How to create: The "More" button in the navigation bar
- Previous page Next/Previous Page Button
- Next Page Block Button
Learn how to create a "More" button.
The "More" button in the navigation bar
Create a dropdown menu navigation bar
A dropdown menu will appear when the user hovers over the elements within the navigation bar.
Step 1 - Add HTML:
<div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">More <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div>
Example explanation:
Use any element to open the dropdown menu, such as <button>, <a>, or <p> elements.
Create a dropdown menu using a container element (such as <div>) and add dropdown menu links within it.
Wrap the button and another <div> element with a <div> element to use CSS for proper positioning of the dropdown menu.
Step 2 - Add CSS:
/* Navigation bar container */ .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* Links within the navigation bar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Dropdown menu container */ .dropdown { float: left; overflow: hidden; } /* Dropdown menu button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical alignment on mobile */ margin: 0; /* Important for vertical alignment on mobile */ } /* Add a red background color to the navigation bar links when hovered */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } /* Dropdown menu content (default is hidden) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links within the dropdown menu */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to the dropdown menu links when hovered */ .dropdown-content a:hover { background-color: #ddd; } /* Display the dropdown menu when the mouse hovers */ .dropdown:hover .dropdown-content { display: block; }
Example explanation:
We have set styles such as background color and padding for the navigation bar and navigation links.
We have set styles such as background color and padding for the dropdown menu button.
.dropdown
class is .dropdown-content
container. Since this is a <div> element, not an <a> element, we must make it float to ensure it stays next to the link.
.dropdown-content
class containing the actual dropdown menu. It is hidden by default and will be displayed when the mouse hovers over it (see below). Note that the minimum width is set to 160px. Feel free to change this setting.
We did not use borders, but used box-shadow
property, making the dropdown menu look like a 'card'. We also use z-index
Place the dropdown menu in front of other elements.
:hover
The selector is used to display the dropdown menu when the user moves the mouse over the dropdown menu button.
Related pages
Tutorial:CSS Dropdown Menu
Tutorial:How to create a clickable dropdown menu
Tutorial:CSS Navigation Bar
- Previous page Next/Previous Page Button
- Next Page Block Button