List based drop down menu is one of the most popular site ornaments, and a lot of sites are using it as their primary navigation tool. If you want to use list based menu on your site as well, follow this tutorial I’m about to present to you and create your own with CSS/HTML in a matter of minutes.
Let us start with making the list to work with. Use the following HTML code as your guide.
<div id=”nav”>
<ul>
<li class=”first”><a href=”#”>Home</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Services</a>
<ul>
<li><a href=”#”>SEO</a></li>
<li><a href=”#”>Internet Marketing</a></li>
<li><a href=”#”>Web Contents</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
You should notice the “nav” id that will be used in your CSS codes as identifier. Let us continue with setting up some basic CSS codes for your menu. First, set up the basics for #nav to lay down some ground formatting for your list based menu.
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
Add the following piece of CSS code to make your list based menu float. This will make integrating the menu to your site a lot easier.
#nav ul li {
float: left
position: relative;
}
Add the following code to your CSS to make the list clickable as a whole — instead of just the text — and add separating borders to the design. Of course, you can change colors and border settings used.
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
The following CSS codes will allow you to format child nodes properly and create a smooth dropdown effect.
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
Last but not least, add the following code to your CSS to set the hover state of the nodes.
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
When it comes to integrating the menu to your site, all you have to do is insert the CSS codes into your CSS file and add the HTML list code wherever on the page within a container. The new list based dropdown menu will be a nice addition to your already intuitive design.
Welcome to Review Of Web. I recommend you to subscribe via RSS Feed. You can also subscribe by email and have new articles sent directly to your inbox. It's absolutely free!
Sharing SEO and web design related points, I consider of utmost importance. (not in any order)
- You should always provide a gadget for language translation , it becomes more important if you have a site in language other than English.
- While flash looks good, it is of no use for Google, if you want to show off flash, always have some accompanied text with it.
- Always have a sitemap for your website. It is not only helpful for navigational purposes but also for site optimization purposes. Having a sitemap helps search engine bots to find and follow all pages of your site. This would help in indexing your site better.
- Do not use auto-audio-on when a visitor first arrives on your site. This becomes most annoying for a user sitting in an office like quiet environment. Rest assured that this visitor will never come back. If at all you want to use audio, it should be within users control and the “play” should be dictated by user and not your preference.
- Do not use Pop-ups or pop-unders. Expert opinions might vary on this but for me it’s a bug NO-NO and turn off.
- Make sure your website is cross-browser tested. I don’t know why but some webmasters still do not take Firefox seriously. Even if you don’t have time make sure that your website look and feel is consistent at least on IE, FF and Safari. If a site looks fine on Safari, you can be sure it would look good on most of the other modern age browsers as the technology behind most of these is same.
- Make sure images are optimized (and are not heavy) for web publishing purposes. Take care to choose the right format for images.
- Use CSS. It not only helps you to manage your design from one place but it is only less resource intensive.
- Periodically test links going out and coming into your sites. Google webmaster can be a good resource. Other good free resource that can be used is XenuLink Checker.
- If you are a merchant site give multiple payment options do not restrict to PayPal only.
- For better SEO always put post title before blog title. [Check mine in your browser bar]
- Always give an image some meaningful name. Also don’t forget to give an alt tag. Image name is used for Google Image search, this can bring in some traffic for you. Alt tag is like a meaningful description for your image. [Also, If for some reason am image does not gets displayed, alt tag text will replace it.]
- In blogs, don’t give the date as post slug, date is redundant and is not useful for SEO purposes. I have found the best slug is to have your blog title and then page slug. Yes, this blog use category also in slug but then I was new to wordpress and I don’t want to mess with my rankings now.
- Make full use of meta description tags, meta keywords are pretty much useless at-least from Google’s perspective.
- Use bread crumb structure. Google says that. Download SEO Starter PDF.
These are some recommendations I gathered from the last Google webmaster chat:
- Do not rely on directory submission too much. There is always a chance that Google will discount links from directory sites.
- Before going for article directories, make sure you have enough content on your site.
- If going for article submission, go with quality article directories only.
- There is no difference between a link juice from a .gov, .edu or a .info site.
- If you want to create sites in multiple languages, the best way is go with example.cn and example.fr. If that is not feasible, try using subdomain cn.example.com and fr.example.com. Lastly you can go for example.com/cn and example.com/fr. For such sites always use the geo-targeting feature present inside Google Webmasters tools.
- Lastly always keep user experience in mind while designing websites.
Over to you.
What do you do for better user experience and SEO?
