The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling.
As you have seen on websites, menus are everywhere, it is an important part of the website, like a navigation toolbar for users to get essential links.
As long as only a few basic lines of html are needed and more lines on css, it is obvious that everything will be compatible accross browsers.
As always, we first create the basic example and then extend to a more advanced overview in css.
1. Basic Setup
First, go ahead and create a html file with its basic syntax inside like so:
<!DOCTYPE html> <html> <head> <title>CSS3 Horizontal Menu Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
2. Coding the Menu
Below, we will create the html and css for a basic horizontal menu.
1. HTML
The html structure of the menu is going to be like this:
1. A class named menu is going to wrap all menu items under a div.
2. The menu is going to be placed as an unordered list element, that is ul.
3. Each specific menu title is going to be under the li and then a tag.
Coming to the code, it would look like this together with some random menu items inside:
<!-- HTML SECTION --> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Well, it is still html, and we got a creepy view where the menu is vertical:
2. CSS
CSS is going to make aall the difference in this case, it is all about styling. First, lets remove some default styling.
a:-webkit-any-link {
text-decoration: none; /* no text underline to anchor elements */
}
.menu ul {
list-style-type: none; /* no bullet sign before items */
}
Then, we continue with making the menu items display inline, color, padding etc:
.menu li {
display: inline; /* display horizontal */
padding-right: 2em; /* item spacing */
text-transform: uppercase; /* ALL CAPS */
}
.menu a {
color: black;
transition: .5s; /* given a fade transition when going to hover */
}
.menu a:hover {
color: green; /* given green color on hover */
}
That was pretty easy. We now have a better looking horizontal menu that looks like this:
3. Advanced and Professional Menus
Now we will have a look at some more professional menus that have extra elements added on css.
3.1 Example 1
.menu a {
color: #f2f2f2;
transition: .5s;
}
.menu a:hover {
color: white;
}
.menu {
width: 28em;
height: 3em;
border-radius: 0.4em;
padding: 0.5em;
background-color: #56bce7;
}
Now this menu has a background and would look like this:
3.2 Example 2
Lets see another great styled menu which now has a more enhanced look.
HTML:
<head> <meta charset='utf-8'> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'>Home</a></li> <li><a href='#'>Products</a></li> <li><a href='#'>Company</a></li> <li><a href='#'>Contact</a></li> </ul> </div>
CSS:
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right > ul > li > a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu > ul > li > a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
background: #47c9af;
}
This would look like this:
You can continue to create or use templates of CSS & jQuery menus according to your needs.
One page that I recommend for you to browse is this.
4. Conclusion
To conclude, we can say that it is pretty easy to create basic menus with html and style with css. However, if you want professional and well designed menus consider browsing for templates or using frameworks which make this easier.
Note that to make interactive menus with submenus and dropdowns, you will probably need jQuery or Javascript in general to achieve animations, dropdowns, left and right menu expansion and so on and so forth.
5. Download
You can download the full source code of this example here: CSS3 Horizontal Menu
