BACK
BACK
BACK
Loading...

Blog / HowTos /  Simple and Cool CSS Menu Tutorial

February 5, 2016 - Cathy

Simple and Cool CSS Menu Tutorial

What to Expect from the CSS Menu Tutorial

CSS3 makes it possible to build a dropdown menu using only CSS and HTML. Navigation of your website is a big part of the user experience and creating a dropdown vertical CSS menu is a step in the right direction. Not having to depend on jQuery or JavaScript to create a menu will decrease your page loading time and contribute towards improving the overall user experience. Our CSS menu tutorial will show you everything you need to know. The basic layout of the CSS drop menu will be as follows:

  • Home
  • About
    • Mission Statement
    • Our Staff
    • Our Promise
    • Ethics & Legal
    • Future Goals
    • Testimonials
  • Latest Offers
  • News
  • Contact Us

If this isn’t exactly how you want to structure your own menu it is a simple matter to adapt it to meet your specific needs.

Creating a CSS Menu

Without any more beating around the bush, we will get started. Here are the steps you will take to create a CSS menu:

  1. Structure the vertical CSS3 dropdown menu using HTML: Create an unorderedlist, adding in any required list items. This initial list is used to structure the base menu:
<nav>
<ul>
<li><a href="#"><span></span> Home </a></li>
<li><a href="#"><span></span>About </a></li>
<li><a href="#"><span></span>Testimonials </a></li>
<li><a href="#"><span></span>Latest Offers </a></li>
<li><a href="#"><span></span>News </a></li>
<li><a href="#"><span></span>Contact us </a></li>
</ul>
</nav>
  1. Add the HTML required to form a drop-down menu: An additional unordered list needs to be nested within one of the list items. Here is the altered code:
<nav>
<ul>
<li><a href="#"><span></span> Home </a></li>
<li><a href="#"><span></span>About </a>
<ul>
<li><a href="#">Mission Statement </a></li>
<li><a href="#">Our Staff </a></li>
<li><a href="#">Our Promise </a></li>
<li><a href="#">Ethics &amp; Legal </a></li>
<li><a href="#">Future Goals </a></li>
</ul>
</li>
<li><a href="#"><span></span>Testimonials </a></li>
<li><a href="#"><span></span>Latest Offers </a></li>
<li><a href="#"><span></span>News </a></li>
<li><a href="#"><span></span>Contact us </a></li>
</ul>
</nav>

css menu tutorial

  1. Style the vertical drop-down menu:
    1. Style the base menu:
nav {
/* Repeating background image */
background: url(http://xyz.com/wpcontent/uploads/2012/11/a.png);
width:210px;
margin:20px;
}
 
navul {
/* Removes bullet points */
list-style:none;
margin:0;
padding:0;
 
}
navul li {
/* Any child positioned absolutely will be positioned relative to this */
position:relative;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
/* Fill all available horizontal space */
display:block;
/* Remove underline */
text-decoration:none;
/*
*/
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
/*
*/
background: RGBA(255,255,255,0.05);
color:#fff;
}
    1. Styling the drop-down tab:The tab needs to be positioned, then it needs to be hidden and finally it needs to be made visible again when a user hovers over its parent list item:
navulli:hoverul {
/* When list item is hovered, display UL nested within. */
display:block;
}
navulul {
/* Remove element from document flow */
position:absolute;
/* Position relative to its parent &lt;li&gt; */
left:210px;
top:0;
border-top:1px solid #e9e9e9;
display:none;
}
navulul li {
width:200px;
background:#f1f1f1;
border:1px solid #e9e9e9;
border-top:0;
}
navulul li a {
color:#a8a8a8;
font-size:12px;
text-transform:none;
}
navulul li a:hover {
color:#929292;
}
  1. Polish the vertical CSS3 dropdown menu: Transform the span elements into 12×12 squares and add some simple animations using the transition property
nav span {
width:12px;
height:12px;
background:#fff;
display:inline-block;
float:left;
margin-top:3px;
margin-right:20px;
position:relative;
transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
nav a:hover span {
background: #7d2c41;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
  1. Separate the large squares into 4 smaller ones:
/*Horizontal line*/
navspan:before {
content:"";
width:12px;
height:2px;
background:#3a3b3b;
position:absolute;
left:0px;
top:5px;
}
/*Vertical line*/
navspan:after {
content:"";
width:2px;
height:12px;
background:#3a3b3b;
position:absolute;
left:5px;
position:top;
}

That concludes our CSS menu tutorial. This is just one of many ways that you can use to create a CSS menu. Using only CSS and HTML will make the navigation process faster and easier for visitors to your site and improve their experience.

Learn how to create a CSS book style to take your skills to the next level!

And if you feel this CSS menu tutorial is not enough, you can always ask us a question!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5