Home » CSS » CSS Horizontal Menu Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Horizontal Menu Example

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:

HTML Menu Unstyled

HTML Menu Unstyled

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:

Basic Horizontal Menu

Basic Horizontal Menu

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:

A Horizontal Menu with a Background

A Horizontal Menu with a Background

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:

2nd Example of a Great Design and Professional Menu

2nd Example of a Great Design and Professional Menu

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

Download
You can download the full source code of this example here: CSS3 Horizontal Menu
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments