August 18, 2016

Dropdown Menu

creating a dropdown menu inside of a horizontal navigation menu

Creating A Dropdown Navigation Menu

In this lesson, we are going to build a dropdown menu. The most popular use for a dropdown menu is in a navigation bar, but it can be used for many other things like dialogue text or zoomed in images on hover, etc.. You can use any Html element to create a dropdown. The type of dropdown menu that we’ll be working on in this lesson will be part of a horizontal navigation menu. To learn more about that click here: HORIZONTAL NAVIGATION MENU. The most common reason why a dropdown menu would be added to a horizontal navigation menu is if you had too many links in your menu, you could separate them into categories and use the dropdown to hold the related links. It also gives your menu a nice clean look and feel. Let’s begin our dropdown menu with the basic Html necessary to create one. NOTE: To make this lesson a little easier to understand, we’ll mainly use colors by name instead of RGB or Hex values. Refer to the images below.

index.html Example 1: BASIC HTML FOR A DROP DOWN MENU INSIDE OF A HORIZONTAL NAVIGATION MENU

dropdown list inside of a horizontal menu html display

Displayed Page Example 1

dropdown list horizontal navigation menu html display

This is all of the Html code that we’ll need to create our dropdown menu inside of a horizontal navigation menu. I will be adding some extra spacing and comments throughout this lesson to help explain the code. Important parts of code are also highlighted. Let’s break down what we have in our index.html document.

<ul> The unordered list is the basic Html we need to create our menus. We will transform the ul and it’s li’s into both the horizontal menu and dropdown menu.
<li> Each list item will hold an anchor element. So, each list item will be a link. We use the # in place of a URL for the href attribute. This allows us to test our link styles and hover effects.
<li class=”dropdown-menu”> This list item has a class name of dropdown-menu and allows us to target the entire dropdown menu.
<a href=”#” class=”drop-button”> Anchor(link) element with a class name of drop-button allows us to work on the a(link) element that we nested inside of the li element. Targets the Services button.
<div class=”dropdown-links”> This div element is a container for our dropdown menu links. We have three anchor(link) elements nested inside of it.

To try to sum everything up for our dropdown menu code, we have a list item with a class of “dropdown-menu”. This holds an a element with a class of “drop-button”. We will use the li and a elements to style and either hide or show the div with a class of “dropdown-links”. As we work with the CSS code, you should start to understand why we set up the Html the way we did. Let’s begin adding some CSS code to transform our link list into something that looks like a navigation menu. Refer to the images below.

my-styles.css Example 2: ADDING STYLE AND POSITIONING TO OUR DROPDOWN LIST

styling and positioning the dropdown menu and horizontal menu css

Displayed Page Example 2

dropdown navigation menu inside of a horizontal navigation menu display

We add quite a bit of CSS code over three rules to display the list items side by side, remove the default li and a element styles, and add some styles of our own. Let’s discuss what these three rules are doing.

ul Targets the ul element; which is essentially our horizontal navigation menu.
list-style-type: none; Removes the bullets that are added by default from the unordered list.
margin: 0; and padding: 0; Removes the default margin and padding added by the browser.
overflow: hidden; Clips the overflowed content. Content that overflows the element is unseen.
background-color: #555; We specify a shade of gray as the background color for the horizontal navigation menu.

li Targets all list item elements.
float: left; We float all of the list items left so that they will display side by side.

li a, .drop-button Targets a elements that are children of li elements, and the class of drop-button.
display: inline-block; We display the elements specified in the multiple selectors of this CSS rule as inline-block. Inline-block is kind of a mix between inline format and block format as the name suggests. See the links at the end of this lesson to learn more about multiple selectors and inline block.
color: white; Sets the font color white for the a elements with a parent of li, and the class of drop-button which is applied to an a element. To sum it up, the entire horizontal navigation menu will have white font including our “Service” dropdown menu button.
text-align: center; Centers the text on our “buttons”.
padding: 12px 14px; Gives a padding of 12px on the top and bottom and 14 px on the left an right of our buttons. This is the space between the text and the border. NOTE: The border is invisible because we have not added a border declaration, but you could see where the border would be because of the gray background color applied to the menu.
text-decoration: none; Removes the underline added to a(hyperlinks) by default.

We will finish styling the horizontal menu and hide the dropdown menu by default in the next example. Add these new CSS rules right after the li a, .drop-button rule in your my-styles.css external style sheet. Refer to the images below and we’ll discuss what the code does.

my-styles.css Example 3: STYLING BOTH MENUS AND HIDING THE DROPDOWN MENU BY DEFAULT

dropdown menu css styling and hiding by default

Displayed Page Example 3

dropdown navigation menu css displayed

li a:hover, .dropdown-menu:hover .drop-button These selectors target the a elements that are children of li’s on mouse hover; and the classes of .dropdown-menu and .drop-button on mouse hover. We are affecting all of our “buttons” with this CSS rule. The horizontal navigation menu buttons, the Services button, and the dropdown menu links.
background-color: blue; Sets the background color to blue when the mouse is hover over the element.

.dropdown-links Targets the dropdown-links class which is applied to the div that holds our dropdown links.
display: none; Hides the dropdown menu by default.
position: absolute; Positions the div with a class of dropdown-links absolutely. This completely removes the div from the default “natural flow”. This basically means that the element does not respect the boundaries of any other element next to it. It allows the menu to overlap other content which is what we want when the dropdown menu is visible.
background-color: teal; Sets the background color of the div (dropdown menu box) to teal.
min-width: 160px; Specifies the minimum width of an element. Depending on the name length of your links you may need to set a larger width. This prevents our longer dropdown link names from displaying on more than one line and specifies a minimum width for the dropdown div background.
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); Creates a box shadow effect. Box-shadows are black by default. The rgba values are (red,green,blue,alpha). The only rgba value we’re setting is 0.8 for alpha (transparency). Which is pretty dark. Try a lower value like 0.2 for a light shadow.

Now, we will make the dropdown menu visible when we hover over the Services button with the mouse. Add this new CSS rule after the .dropdown-links rule. Refer to the images below.

my-styles.css Example 4: MAKING THE DROPDOWN MENU VISIBLE WHEN SERVICES BUTTON IS HOVERED OVER

display block dropdown menu css

Displayed Page Example 4

dropdown menu display block css display

.dropdown-menu:hover .dropdown-links Targets the dropdown menu and links on mouse hover.
display: block; Makes the dropdown menu visible when the mouse is hover over the Services button.

Finally, we will add some styles and positioning to the a(link) elements in the dropdown menu. We will also add a few Html elements for a better visual. Add the new Html code to the index.html document, and the new CSS rule after the .dropdown-menu:hover .dropdown-links rule. Refer to the images below.

index.html Example 5: ADDING A FEW HTML ELEMENTS

adding some html elements

my-styles.css Example 5: POSITIONING AND STYLING THE DROPDOWN MENU: FINAL TOUCHES

dropdown menu inside of horizontal menu css

Displayed Page Example 5

dropdown navigation menu hover effect display block

.dropdown-links a Targets the a(link) elements in the dropdown menu.
color: black; Sets the link font color to black for the dropdown menu.
display: block; Makes the links display on top of each other.
text-align: left; aligns the link text to the left inside of our dropdown menu box.

Click On A Link Below For More Information On A Topic Used In This Lesson

You should now be able to create eye catching, user friendly horizontal and dropdown navigation menus. It’s now time for you to experiment with different styles, positions, and hover effects. Trying new ideas with Html and CSS are how web designers come up with stunning unique content for their web pages. Thanks for reading, and we’ll see you next time.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Dropdown menu inside of a horizontal menu</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<ul>
<li><a href="#">Home</a></li>

<!-- THE LIST ITEM CONTAINS THE CODE FOR OUR DROPDOWN MENU -->
<li class="dropdown-menu">
<a href="#" class="drop-button">Services</a>
<div class="dropdown-links">
<a href="#">Service 1</a>
<a href="#">Service 2</a>
<a href="#">Service 3</a>
</div>
</li>
<!-- END OF DROPDOWN MENU HTML CODE -->

<li><a href="#">Get A Quote</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>

</ul>

<h1>Dropdown Navigation Menu Inside Of A Horizontal Menu</h1>
<p>This is just a simple paragraph element to add some content.</p>
<h2>Another Heading Element</h2>
<p>This is just a simple paragraph element to add some content.</p>
<p>This is just a simple paragraph element to add some content.</p>

</body>
</html>

my-styles.css Source Code


/* REMOVE UNWANTED DEFAULT UL STYLES AND SPACING, COLOR NAV BAR */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #555;
}

/* DISPLAY ALL NAV BAR LI (BUTTONS) SIDE BY SIDE */
li {
float: left;
}

/* STYLE LIST ITEMS (MENU BUTTONS AND DROP BUTTON) */
li a, .drop-button {
display: inline-block;
color: white;
text-align: center;
padding: 12px 14px;
text-decoration: none;
}

/* CHANGE BACKGROUND COLOR ON HOVER (ALL MENU BUTTONS: BOTH MENUS) */
li a:hover, .dropdown-menu:hover .drop-button {
background-color: blue;
}

/* HIDE DROPDOWN MENU UNTIL HOVERED OVER. ADD SOME STYLE */
.dropdown-links {
display: none;
position: absolute; /* STOPS THE HORIZONTAL MENU FROM EXPANDING WITH DROPDOWN MENU */
background-color: teal;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}

/* MAKE DROPDOWN MENU AND LINKS VISIBLE ON MOUSE HOVER */
.dropdown-menu:hover .dropdown-links {
display: block;
}

/* STYLE AND POSITION THE LINKS */
.dropdown-links a {
color: black;
display: block;
text-align: left;
}

Clear Coded Programming

Please Leave a comment