So I was looking around at new ways to make your navigation look better and there are tons of awesome links for people use with different techniques from excellent web masters with CSS3 animation and JQuery effects. I think it’s awesome that we take the next step to make our websites more 3 dimensional but after looking at the code and thought to myself, what about people who are just learning? So I searched online for the basics of HTML menu and sub menu’s and it was almost no where to be found or they have all kinds of crazy absolute left -9999999, or used the element select and options, borders, right left top bottom, and unnecessary vertical align bullshit. I thought to myself, what the fuck is this shit all over the web? So I decided to make a simple navigation code about 30 lines of css code or less on the most average vanilla menu with a sub navigation. By the way, you can ignore the font-awesome css, it’s just bells and whistles.
<!DOCTYPE html>
<head>
<title>Navigation Basic </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="page.html">Page</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<body>
</html>
/* CSS */
nav ul {
text-align:center;
padding: 0;
margin: 0;
}
ul li {
text-align:left;
display:inline-block;
list-style:none;
padding: 0 10px;
}
So here is an image of your simple navigation that is centered. Ignore the fact that it’s black and stuff. I just styled the background color black and text white. Also make sure the <a> anchor element is text-decoration : none. Here’s what you should get if you use the font-awesome code. You can actually delete the text-align center and just have to go wherever (default is left) but that’s it. I tend to dislike the bullets it feels really 1990s for me so I always style it as none. as far as padding goes, I usually want it so there’s room to breathe. When I add the next line of code, I will ignore the padding but you can add that later. I just want to show you the basics of a simple navigation. You can probably learn this on w3 schools or on youtube but there was nothing really simple. Most sites on the net had all kinds of crazy css shit with position: relative, fixed/static/left/right/top, floats all over the fucking place.
<nav> <ul> <li><a href="home.html">Home</a></li> <li><a href="page.html">Page</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#">Directives</a> <ul class="submenu"> <li><a href="page1.html">Attribute</a></li> <li><a href="page2.html">Class</a></li> <li><a href="page3.html">Element</a></li> <li><a href="page4.html">Transclusion</a></li> </ul> </li> <li><a href="#">Services</a> <ul class="submenu"> <li><a href="soon.html">Coming Soon</a></li> </ul> </li> <li><a href="#">Other</a> <ul class="submenu"> <li><a href="test.html">Test</a></li> </ul> </li> </ul> </nav>
Here’s the CSS for the sub menu only.
ul li > ul.submenu {
padding: 0;
position: absolute;
width: 100px;
visibility: hidden;
}
ul li:hover > ul.submenu {
display: block;
visibility: visible;
}
ul li:hover > ul.submenu li {
display:inline-block;
width: 150px;
padding: 0;
}
It’s really simple I think. You have to hide the submenu, Give it a width, and try not to have the navigation text with 3 word descriptions, the taxonomy should be simple. The position absolute is too keep the submenu positioned under the main menu. When you hover, show it. When the submenu drops, let it drop down. I can use float left as well but fuck it, I’ll keep it old school for this demo. Usually, you will put padding on the list with some color so it looks like a thick button, really useful for mobile phones but I’m making this without any style – you can get creative with that. And when we all put together with font-awesome and angularjs.
<!DOCTYPE html>
<head>
<title>Navigation Basic </title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#/home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#/page"><i class="fa fa-shield"></i> Page</a></li>
<li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
<li><a href="#"><i class="fa fa-star"></i> Directives</a>
<ul class="submenu">
<li><a href="#/attribute"><i class="fa fa-bolt"></i> Attribute</a></li>
<li><a href="#/class"><i class="fa fa-bolt"></i> Class</a></li>
<li><a href="#/element"><i class="fa fa-bolt"></i> Element</a></li>
<li><a href="#/transclusion"><i class="fa fa-bolt"></i> Transclusion</a></li>
<li><a href="#/social"><i class="fa fa-bolt"></i> socialwidget</a></li>
<li><a href="#/ngmodel"><i class="fa fa-bolt"></i> ngmodel</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-star"></i> Services</a>
<ul class="submenu">
<li><a href="#/soon"><i class="fa fa-bolt"></i> Coming Soon</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-star"></i> Other</a>
<ul class="submenu">
<li><a href="#/test"><i class="fa fa-bolt"></i> Test</a></li>
</ul>
</li>
</ul>
</nav>
<body>
</html>
And the vanilla style of a simple navigation with a drop down should be this
/* CSS */
nav ul {
text-align:center;
padding: 0;
margin: 0;
}
ul li {
text-align:left;
display:inline-block;
list-style:none;
padding: 0 10px;
}
ul li > ul.submenu {
padding: 0;
position: absolute;
width: 100px;
visibility: hidden;
}
ul li:hover > ul.submenu {
display: block;
visibility: visible;
}
ul li:hover > ul.submenu li {
display:inline-block;
width: 150px;
padding: 0;
}
It should like like this boring navigation at the end. Yes, the Directives link is tight and the Attribute/Class/Element etc links seems to be really close but that’s because I’m trying to show you the simplicity of it. When you add some padding, you’ll notice it move up and down. You can even choose a background color or special css3 transition effects or cool fonts but it should only be a few lines of code for each action in the sub menu in the style sheet. I saw some really cool JQuery effects when I was looking at other developers but CSS3 can do a lot now so if you are starting to build websites, try to using less script when it comes to the menu and focus on the newer standards. They say write less code so let css3 be your best friend when style a site and let Javascript/JQuery do the other stuff. If you have issues on older browsers, try modernizr or use progressive enhancements.
Thanks!
no worries 🙂