August 15, 2016

Horizontal Navigation Menu

horizontal navigation menu

Horizontal Navigation Menu

Navigation menus are one of the most important areas of a website. The horizontal navigation menu is the most popular design by far. Being highly interacted with by viewers; you want your nav menu to look great and function well. Visitors should be able to easily navigate through your site. When it comes to the nav menu, you have many options. Vertical menus, horizontal menus, drop-down menus, colors, hover effects, etc. are just a few things to consider when designing your menu. A nav menu or nav bar; whatever you prefer to call it; needs some basic Html as the base, and CSS is used to design, position, and add functionality. You may sometimes hear the nav menu referred to as the vertical or horizontal list menu. This is because, when it comes down to it, a nav menu is simply a list of links. Let’s begin building a nav menu with the ul element. We will proceed with this lesson in detailed steps in order for you to understand how we transform an Html link list into a great looking navigation menu. See the images below.

index.html Example 1: CREATING A LINK LIST WITH THE UL ELEMENT

horizontal list navigation menu html

Displayed Page Example 1

horizontal list nav menu display

In the index.html document, we create an unordered list with anchor (<a>) elements NESTED inside of the list item (<li>) elements. This makes every list item a LINK. For testing purposes, since we do not actually have all of these pages created, we use the # symbol for the value in our href attribute. This will allow us to see any link effects that we create. The URL to the relevant pages would be added later on after they were created. NOTE: We could have simply used the # instead of #home, etc. for the values. This would still allow us to see the hover effects and so on with our links. If you remember from the HYPERLINK lesson, the # is used to assign a bookmark link when used with an anchor element. We are now going to begin the designing and positioning of our horizontal list navigation menu with CSS in our EXTERNAL STYLE SHEET. Refer to the next set of images.

my-styles.css Example 2: REMOVING THE LIST BULLETS, MARGIN, AND PADDING

removing bullets, margin, and padding styles css

Displayed Page Example 2

removed bullets from ul element and default margin and padding display

In the my-styles.css stylesheet, we create a CSS rule with a selector of ul. The list-style-type: none; declaration removes the bullets from our unordered list, because most navigation menus do not have list item markers of any kind. We are essentially turning the links into buttons. The next two declarations take away the default margin and padding space that the browser adds automatically. At this point, we basically have a vertical list of links; which is another popular menu style. But we are creating a horizontal navigation menu in this tutorial, so let’s start positioning and adding some style to our links. Refer to the images below. NOTE: We will not be making any more changes to the index.html document until the final example.

my-style.css Example 3: BEGIN POSITIONING AND STYLING OUR LINKS

position and style horizontal navigation menu css

Displayed Page Example 3

positioning and styling the horizontal list nav menu displayed

We have added quite a bit of code to the my-styles.css document. We’ll start with the li rule. The sole purpose of this CSS rule for now is to FLOAT our list items left. Moving on to the next new CSS rule that we added with a selector of li a, this rule targets the anchor (link) elements that are embedded inside of li elements. The first declaration in this rule, display: block; makes our links display in BLOCK FORMAT, which in turn makes the entire link area clickable instead of just the text. Displaying in block format also allows us to specify things like width, padding, margin, etc. We set the text color white and center it with the next two declarations. We add padding of 6 pixels to the top and bottom, and 10 pixels to the left and right to give it more of a button look and feel. Finally, we remove the underline from our links with text-decoration: none;. Back up in the ul rule, we set a background color for the entire navigation bar and set the overflow property to hidden. The overflow property specifies what you want to happen if content overflows the element’s box. To learn more about overflow click here. THE OVERFLOW PROPERTY. The value of hidden will clip any overflow in our navigation menu. The rest would be invisible. Our menu is starting to come along pretty good. Now, let’s add some more style and hover effects. See the images below.

my-styles.css Example 4: ADDING MORE STYLE AND HOVER EFFECTS

navigation menu hover effects

Displayed Page Example 4

navigation menu hover effects displayed

I have added some comments to the CSS code to help describe what the new code does. First, we add another declaration to the li rule. The border-right: 1px solid #fff; adds a white vertical line in between our li elements. We are only adding the right side in order to create a button look. The first of our two new CSS rules with a selector of li a:hover gives us a text color of red and a background color of a darker shade of blue when the mouse is hovered over the link area (button area). The second new CSS rule with a selector of li:last-child takes away the right side border for the last list item. I did this for two reasons. Two show you how to affect specific parts of your HTML elements, and in case you wanted to float the last list item “About Us” to the right. It is common for menus to be displayed in this way with a specific button displayed all the way to the right. This is usually a “Contact Us” or “About Us” button. This is completely up to you. If you want to float the “About Us” button to the right, you can simply add style=”float: right” to the opening li tag in the index.html document for that specific button.

:hover and :last-child are pseudo-classes. To learn more about them click here: PSEUDO-CLASSES. We now have a great looking navigation menu created with hover effects. Before we finish up this lesson, let’s display our menu in a FIXED POSITION at the top of the browser window. Refer to the last set of images for this example.

index.html Example 5: SIMULATING A LONG PAGE WITH A FIXED HORIZONTAL NAVIGATION MENU

navigation link list html

my-styles.css Example 5: SIMULATING A LONG PAGE WITH A FIXED HORIZONTAL NAVIGATION MENU

horizontal navigation menu position fixed css

Displayed Page Example 5

horizontal navigation bar position fixed displayed

In the index.html document, we add some HEADING ELEMENTS and P ELEMENTS with a ton of line breaks to simulate a long web page. Over in the my-styles.css document, we add a few positioning declarations to the ul rule. They specify that we want the ul (navigation menu) fixed to the very top of the browser window with a width of 100% of the screen. Finally, we add a p rule, with a background-color: property to fill in all of the extra space from the line breaks with a gray background. Now, when you scroll up and down the page, the navigation menu stays put right at the top of the browser window. This is a very common thing to do with nav menus. It provides easy access to the other pages in the website for the visitors. That finishes this lesson on creating a horizontal navigation menu. Thanks for reading, and we’ll see you next time.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Horizontal List Navigation Menu</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#service">What We Do</a></li>
<li><a href="#quote">Get A Quote</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#about">About Us</a></li>
</ul>

<h1>Horizontal List Navigation Menu</h1>
<p>This paragrapgh is here to simulate a long webpage. <br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

<h1>Bottom Section Of Web Page</h1>
<p>This paragrapgh is here to simulate a long webpage. <br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

</body>
</html>

my-styles.css Source Code


ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #50A6C2;
overflow: hidden;
position: fixed; /* Fixes the ul (nav menu) to the top of the screen. Stays put when scrolling */
top: 0;
width: 100%;
}

p {
background-color: gray;
}

li {
float: left;
border-right: 1px solid #fff; /* Adds a white border (right side only) */
}

li a {
display: block;
color: #fff;
text-align: center;
padding: 6px 10px;
text-decoration: none;
}

/* Hover Effect: Changes text and background color */
li a:hover {
background-color: #00688B;
color: red;
}

/* Takes away white border from the last element
in case you want to float the last list item right */
li:last-child {
border-right: none;
}

Clear Coded Programming

Please Leave a comment