Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 65 of 130
How to create a hoverable dropdown menu with CSS?
A hoverable dropdown is a dropdown menu that opens when you hover over a trigger element. This type of dropdown is commonly used in navigation menus where hovering over a menu item reveals submenu options. Syntax .dropdown:hover .dropdown-content { display: block; } Method 1: Basic Hoverable Dropdown Step 1 − HTML Structure First, create the HTML structure using a container div, trigger element, and dropdown content − Web Technology ...
Read MoreHow to add a navigation menu on an image with CSS?
Adding a navigation menu on an image creates an attractive overlay effect for websites. This technique combines CSS background properties with navigation styling to place menu items directly over a background image. Syntax .container { background: url('image-path'); background-size: cover; background-position: center; } nav { /* Navigation styles */ } Set the Style for the Document's Body First, reset the default margin and padding for the document's body − body { margin: ...
Read MoreHow to create a \"fixed\" menu with CSS?
To create a fixed menu on a web page, use the position property and set the value fixed. A fixed menu stays in the same position on the screen even when the user scrolls down the page. Set the width to 100% using the width property to span the entire viewport width. Syntax selector { position: fixed; top: 0; width: 100%; } Example: Creating a Fixed Navigation Menu The following example demonstrates how to create a fixed navigation menu that stays at ...
Read MoreHow to create a navigation bar with equal-width navigation links with CSS?
Creating a navigation bar with equal-width navigation links ensures that each menu item takes up the same amount of space, providing a balanced and professional appearance. This can be achieved using CSS properties like width with viewport units or flexbox. Syntax /* Method 1: Using viewport width */ .nav-link { width: calc(100% / number-of-links); } /* Method 2: Using flexbox */ .nav-container { display: flex; } .nav-link { flex: 1; } Method 1: Using Viewport Width The following example creates a ...
Read MoreHow to create a navigation bar with a centred link/logo with CSS?
Creating a navigation bar with a centered link or logo is a common web design pattern. This can be achieved using CSS positioning techniques to place navigation items on the left, center, and right sides of the navigation bar. Syntax nav { position: fixed; top: 0; width: 100%; } .center-links { display: inline-block; margin-left: 50%; transform: translateX(-50%); } Example The following example creates a fixed navigation bar with links ...
Read MoreHow to create a navigation bar with left-aligned and right-aligned links with CSS?
To create a navigation bar with left-aligned and right-aligned links with CSS, you should have a basic understanding of CSS flexbox. First, we will create the structure of navigation bar having five links using HTML, then we will use CSS to design the navigation bar and align the links on the left and right sides using flexbox properties. Syntax nav { display: flex; justify-content: space-between; } .left-links { flex: 1; } .right-links { display: flex; } Method ...
Read MoreHow to create bottom bordered (underline) navigation links with CSS?
To create underlined navigation links, use the border-bottom property in CSS. This property is a shorthand for setting the width, style, and color of the bottom border. These links will display an underline on hover using the :hover selector, and the selected link will also remain underlined. Syntax selector { border-bottom: width style color; } /* For hover effect */ selector:hover { border-bottom: width style color; } Example: Bottom Bordered Navigation Links The following example creates a navigation menu with underlined links on hover and ...
Read MoreHow to create a bottom navigation menu with CSS?
A bottom navigation menu is a fixed navigation bar that stays at the bottom of the viewport. It's commonly used in mobile applications and modern web designs for easy access to main sections. The menu is created using the position: fixed and bottom: 0 CSS properties. Syntax nav { position: fixed; bottom: 0; width: 100%; } Example: Complete Bottom Navigation Menu The following example creates a responsive bottom navigation menu with hover effects − ...
Read MoreHow to create a vertical menu with CSS?
Vertical menus on a web page are mainly placed on the left or the right. These left or right menus are vertically aligned to make it easier for users to navigate or click them. To create a vertical menu, set a container and within that set the menu links. The display property is to be set as block to let the menu appear vertically. Syntax selector { display: block; width: value; padding: value; text-decoration: none; } Set a Container ...
Read MoreHow to create a horizontal scrollable menu with CSS?
A horizontal scrollable menu is useful when you have multiple navigation items that may not fit on smaller screens. The key is using overflow: auto and white-space: nowrap to prevent menu items from wrapping to new lines. Syntax .container { overflow: auto; white-space: nowrap; } .menu-item { display: inline-block; } Example The following example creates a horizontal scrollable navigation menu − Horizontal Scrollable Menu body { ...
Read More