Navigation within a website is one of the most important aspects of design. Showing where the navigation is and presenting it in an easy-to-use method is a combination that can be tricky without the right tools.
Thankfully, CSS has various options for just that issue. In this short tutorial, you will learn how to create a CSS dropdown menu.
A wonderful aspect of CSS is how much it lets you explore your creative concepts while providing useful HTML page design. There are some common elements of a CSS dropdown menu used across the board.
However, that does not mean all CSS dropdown options have to be the same. In fact, they don’t all even have to be menus.
What is a CSS Dropdown?
A CSS dropdown is a method where the designer creates a style that responds to user input on a specified HTML element. This can be an image, a button, or even something like a heading. When the user clicks or hovers over the intended element, a visual reaction should occur.
The dropdown can be a list of links, such as a “Contact Us” or “About Us” page. It can even be something like a happy face image that appears if the end-user hovers over a sale item on the website. There can be a lot of creative concepts to apply to the design and use of a CSS dropdown.
How to Create a CSS Dropdown Menu
Developing a CSS dropdown is thankfully not an overwhelming task in modern CSS. In these next few steps, you will see just how to set up HTML and CSS code to get your own dropdown style up and running. You are free to follow along with the provided sample code or create your own to experiment.
Note: In the following examples, you will see the use of HTML classes in sample code. This is for ease of coding and display within the guide. If you are not familiar with using classes or IDs, please refer to this quick blog guide for help.
Setting Up the HTML Page:
In the main HTML document a button will be the focus of the page. This button element will be where the CSS dropdown menu will be placed. See the sample HTML code provided below for the basic setup.
Take note of the use of the classes that have been setup within the code. This will make it easier to target and manipulate the elements for the dropdown menu.
<!DOCTYPE html> <html> <head> <title>CSS Dropdown Menu</title> <link rel="stylesheet" href="CSSDropdown.css"> </head> <body> <button class="dropdownButton">Udacity Dropdown Example Menu! <div class="dropdownMenuItems"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Us</a> </div> </button> </body> </html>
Note: Inside the “href” elements you may notice they are set to equal “#” currently. You may replace that with a functioning URL to test navigation as well.
Setting Up the CSS Stylesheet:
Next up you have the linked stylesheet for the HTML document. In the sample code provided below, you will notice there is styling applied to the classes from the HTML sample. These will be explained.
.dropdownButton { display:block; position: relative; color: rgb(28, 21, 37); background-color:rgb(201, 195, 200); padding: 4px; margin:10px; } .dropdownMenuItems { display: none; background-color:darkorange; color:black; font-weight: bold; margin:5px; border-style: solid; border-color: white; position: relative; } .dropdownButton:hover .dropdownMenuItems{ display:block; }
The first class element is the “dropdownButton” at the top. This is the actual button that will be represented on the HTML page. Minor styling was applied to simply make it easier to see for the example. Feel free to modify the values as you wish.
The next element class is “dropdownMenuItem” which has the contents of the drop down menu within it. The styling applied here is also simply for ease of viewing. You can modify these as you wish with the exception of one. The display property has a value of “none” in this example. This is because the contents of the dropdown menu should not be visible until the dropdown action has taken place.
The final item is the use of “hover” on both element classes. Note the structure of this section as well. The “dropdownButton” class is noted first with the hover property attached. After this the “dropdownMenuItem” class is added. In this form, the CSS is applied in the proper format so the styling can take effect. The end-user hovers over the button element and this creates the menu items to take the display property of “block” — making them visible on the page.
Example Dropdown Menu Output:
This is how the button element should appear on the HTML page:
With the CSS applied, this is how the dropdown menu should look when a user hovers over it.
Styling the Dropdown Menu Style
You can style the contents of the dropdown menu using CSS. Take a look at the example HTML code below. There are now three new element ids in use. They are applied to the href elements of the “dropdownMenuItems” class.
<button class="dropdownButton">Udacity Dropdown Example Menu! <div class="dropdownMenuItems"> <a href="#" id="menu1">Home</a> <a href="#" id="menu2">About</a> <a href="#" id="menu3">Contact Us</a> </div> </button>
The titles of these are simply set as menu1, menu2, and menu3. Moving the work over to the CSS stylesheet, the new element ids are called up for individual styling work. The sample CSS code below shows both the background and text color being changed.
#menu1{ background-color:blue; color:white; } #menu2{ background-color: rgb(67, 241, 23); color:black; } #menu3{ background-color: rgb(248, 19, 179); color:white; }
This applied styling will give the following result on the dropdown menu.
For the needs of this example, the extreme color choice displays how different you can make each menu item. Consider tweaking the code for yourself to have borders, various fonts, or even altering the dimensions.
Adding a Submenu
You will often find that just one top-level menu will not suffice for more complex websites. In this case, being able to add multiple tiers to a menu can become an invaluable option. Thankfully, this is not much different than just creating a normal dropdown menu.
In this sample code below a new class was created titled as “submenu” and placed right under the “menu3” anchor tag element.
<button class="dropdownButton">Udacity Dropdown Example Menu! <div class="dropdownMenuItems"> <a href="#" id="menu1">Home</a> <a href="#" id="menu2">About</a> <a href="#" id="menu3">Contact Us</a> <ul class="submenu"> <li><a href="#">Email</a></li> <li><a href="#">Phone</a></li> <li><a href="#">Social Media</a></li> </ul> </div> </button>
Within that unordered list class, a set of three list elements were added. These were given common types of contact details that you might find on a personal site.
In the CSS stylesheet, the submenu class was provided with some styling. Notice it also has the display property value of “none” applied.
.submenu{
background-color: cornflowerblue;
color: white;
display: none;
font-weight: bold;
margin:5px;
position: relative;
list-style: disc;
text-align: right;
}In the next bit of CSS, the combinator of “+” was used to link the “menu3” id with the “submenu” class. For more information on using CSS combinators, please refer to this blog.
#menu3:hover + .submenu{ background-color:cornflowerblue; font-weight: bold; display: block; }
This now allows the new submenu to appear just as with the previous dropdown menus.
Just the Start of Your Web Development Journey
These CSS dropdown menus were just the most basic of setups. The wealth of artistic options in web development allow for some truly amazing concepts. Consider how great the dropdowns can appear with a bit of animation applied.
Even small additions, such as color transitions or background images, set in just the right form can make huge impacts for the user.
This is what makes CSS a great choice to start on various other paths. For a great example of this, check out the powerhouse of tools that JavaScript can infuse a website with. Remember that the key to learning these skills is relaxing.
You won’t master everything all at once. If you have issues with a concept, learn a new one and come back to it. Each new skill you acquire goes towards bettering your own future.
____________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code.
Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
