Help Stefan Campaign
CSS Dropdown Menus
Introduction
Recent changes to the Google algorithms following their Bigdaddy datacentre updates are making it more and more difficult for new websites to be indexed in Google listings. Frames are out as they're very difficult, if not impossible to index and all those pages referred to by menu items in a frame are not found by Google's spidering bots. Of course, it's possible to create dropdown menus using JavaScript, but once again these are not indexed by the search engine bots.
Indeed, spidering bots of the various search engines effectively view all your web pages as if they were pure text. The simpler the page you offer thm the more likely they are to index them in their entirety. How, then, can you offer the search bots a simple page that they can easily index, whilst creating something that your users will find both visually stimulating and intuatively simple to use.
The answer, as it happens is CSS (Cascading Style Sheets) and in this tutorial I'll show you how to create a multi-level cascading menu using pure CSS. This being precisely the same basic menu style that I use for a number of my own web pages, such as the recipe list page and each and every one of the Celtic Gods pages on my site.
Putting it all together:
Creating Your own CSS Dropdown Lists
Page Map |
|
|---|---|
| Copyright and Header | Querying the Database |
| Overview: | Conclusion |
| Obtaining the Data | Join the Mailing List |
| Parsing the File |
Copyright and Header | ||||||||
|
COPYRIGHT NOTICE:
Copyright 2005 – 2006 Dyfed Lloyd Evans, all rights reserved.
The scripts detailed on this page may be used and modified free of charge by anyone as long as this copyright notice and the comments above remain intact. By using this code you agree to indemnify Dyfed Lloyd Evans from any liability that might arise from their use.
This code is released under the GPL license. Selling the code for this program without the prior written consent of the author is expressly forbidden. Obtain permission before redistributing this software over the Internet or in any other medium. In all cases copyright and header must remain intact.
If you find this code useful and employ it or modify it for your own site, please include a link to this page http://www.celtnet.org.uk/info/IP-to-country-converter.php on your links page.
Overview:
In actuality, creatinig a pure CSS set of menus really isn't that difficult. It's basically just a case of applying an appropriats style to an unordered list, where the list elements represent the categories, sub-divisions and final elements of the menu that it will be rendered into.
Creating a simple Dynamic List:
We'll take the process of building a list in stages. First, let's build an unordered list of the corect pattern (I'll use some of this site's recipe pages as an example:
Navigation
The actual code for the menu above is:
<ul>
<li><h2><b>Navigation</b></h2>
<ul>
<li><a href="../roman.html">Roman Recipes</a><!-- fully working sample -->
<ul>
<li><a href="../roman/starters.html" title="Roman Starters">Starters</a>
<ul>
<li><a href="../roman/gustum_praecoquis.html">Starter with Apricots</a></li>
<li><a href="../roman/isicia_omentata.html">Roman Burgers</a>
<li><a href="../roman/pepones_melones.html">Water and Honey Melons</a></li>
<li><a href="../roman/ovis_apalis.html">Boiled Eggs & Pine Nuts</a></li>
<li><a href="../roman/scillas.html">King Prawns</a></li>
<li><a href="../roman/boiled_mackerel.html">Boiled Mackerel</a></li>
<li><a href="../roman/tuna_w_sauce.html">Salt Tuna</a></li>
</ul>
</li>
<li><a href="../roman/mains.html" title="Roman Starters">Main Courses</a>
<ul>
<li><a href="../roman/patina_pisciculis.html">Soufflée of Small Fish</a></li>
<li><a href="../roman/minutal_marinum.html">Seafood Fricassee</a></li>
<li><a href="../roman/pullum_frontonianum.html">Chicken a la Fronto</li>
<li><a href="../roman/pullum_fusilis.html">Chicken with Liquid Filling</a></li>
<li><a href="../roman/baedinam_excaldatam.html">Steamed Lamb</a></li>
<li><a href="../roman/vitulinam_elixam.html">Boiled Veal</a></li>
<li><a href="../roman/mitulis.html">Mussels</a></li>
<li><a href="../roman/sarda.html">Tuna</a></li>
<li><a href="../roman/chicken_vardanus.html">Chicken Vardanus</a></li>
</ul>
</li>
<li><a href="./roman/desserts.html" title="Roman Desserts">Desserts</a>
<ul>
<li><a href="./roman/patina_piris.html">Pear Soufflée</a></li>
<li><a href="./roman/dulcia_domestica.html">Home-made Dessert</a></li>
<li><a href="./roman/aliter_dulcia.html">Another kind of Dessert</a></li>
<li><a href="./roman/tiropatinam.html">Boiled Custard</a></li>
<li><a href="./roman/baked_custard.html">Baked Custard</a></li>
<li><a href="./roman/sfongia_lacte.html">Pancakes with Milk</a></li>
</ul>
</li>
<li><a href="../roman/snacks.html" title="Roman Snacks">Snacks</a>
<ul>
<li><a href="../roman/cecina.html">Chickpea Pancake</a></li>
<li><a href="../roman/celery_vinegar.html">Celery with Vinegar</a></li>
<li><a href="../roman/cheese_honey.html">Cheese and Honey</a></li>
<li><a href="../roman/sweetened_cheese.html">Cheese Sweetened with Honey</a></li>
<li><a href="../roman/chickpea_cheese.html">Chickpeas with Cheese</a></li>
<li><a href="../roman/chickpea_saffron.html">Chickpeas in Saffron</a></li>
<li><a href="../roman/garlic_plate.html">Garlic and Herb Plate</a></li>
<li><a href="../roman/hazelnut_herb.html">Hazelnut with Herb Purée</a></li>
<li><a href="../roman/mackerel_leaves.html">Mackerel-stuffed Vine Leaves</a></li>
<li><a href="../roman/olive_celery.html">Olive and Celery Paté</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="../brewing/brewing.html">Brewing</a><!-- fully working sample -->
<ul>
<li><a href="../brewing/mead-recipes.html" title="Brewing Mead">Brewing Mead</a>
<ul>
<li><a href="../brewing/basic-mead-brewing.html">Basic Mead Brewing</a></li>
<li><a href="../brewing/clove-mead.html">Clove Mead</a></li>
<li><a href="../brewing/short-mead.html">Short Mead</a></li>
<li><a href="../brewing/nutmeg-mead.html">Nutmeg Mead</a></li>
<li><a href="../brewing/wildflower-mead.html">Wildflower Honey Mead</a></li>
<li><a href="../brewing/ale-mead.html">Braggot</a></li>
<li><a href="../brewing/heather-mead.html">Heather Mead</a></li>
</ul>
</li>
<li><a href="../brewing/ale-recipes.html" title="Ale Recipes">Ale Recipes</a>
<ul>
<li><a href="../brewing/basic-extract-brewing.html">Brasic Extract Brewing</a></li>
<li><a href="../brewing/brewing-from-scratch.html">Brewing from Scratch</a></li>
<li><a href="../brewing/barley-wine.html">Barley Wine</a></li>
<li><a href="../brewing/mild.html">Mild</a></li>
<li><a href="../brewing/india-pale-ale.html">India Pale Ale</a></li>
</ul>
</li>
<li><a href="../brewing/beer-recipes.html" title="Beer Recipes">Drinks</a>
<ul>
<li><a href="../brewing/sake.html">Sake</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Note how each separate level in the hierarchy is wrapped within its own <ul></ul> and <li></li> tags. Only the terminal nodes of each menu item is wrapped in its owl <li></li> elements. Note also that there are four levels to the heirarchy, thoug the topmost level is used solely for the heading. As a result there are really only three levels in the list.
Now, let's add some CSS magic and do something useful with the menu. First we'll start with some very simple CSS that will hide the sub-menu items and then reveal those selfsame menu items on a 'mouseover' event. The code for this is:
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
If this code is added within a
<style type="text/css">in the HTML file header block and the list code given above is wrapped in a
<div id="menu">block then we get what is effectively a dynamic list. You can see what this combination of codes produces here. As you see you now have a dynamic menu with only the description and the top level descriptions available. However, if you place your mouse over the links the list will expand to reveal the next item in the list hierarchy.
As a result of adding some fairly basic CSS code we now have a real dynamic list. But it's still (at least not yet) very pretty. To convert this into a proper (pretty) dynamic menu we need to add some positoinal information and quite a bit more stylistic information in the CSS. In fact we need a fair amount of code, as detailed below:
#menu {
width: 105px;
background: #0000FF;
margin-left: 5px;
position: absolute;
top: 180px;
left: 0px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 9px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #000;
background: #FFFFCC;
text-transform: uppercase;
}
#menu a {
color: #666666;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
The code given above works for all 'sane' web browsers, but IE 6 presents its own set of problems and you only get the top-level link with this browser. For the fly-out menus to work you need to add this code:
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
What's defined in the CSS above is the background and border for the menu item as well as the appearance of each menu item and sub-item. As well as adding blue separators to the menu. If you add this code to the code already written for the simple expanding list set then you will get the complete fully-functioning menu code.
Note, that this is precisely the menu code that I use for my own menus and it is this exact code that drives the menu on the top left hand edge of this page. However, for the main pages of my website I've abstracted all the CSS code out to a single CSS file that's incorporated into each HTML page with a <LINK> statement in the header of the HTML files.
Conclusion:
The information above should allow you to easily create your own CSS-based dropdown menus. As you can also see from the code, everything you need to create the menus can be embedded in the file itself and as far as any text reader is concerned the menu is simply a list within the document making it easy for the indexing spiders to access all the links imbedded in the menu.
Because of the way the menuing system works, if you have internal links in your documents you can add these to the terminals of the menu as well.
|
If you enjoyed this page and would like to get more tips, tricks and offers to help you make the most of your most of your web presence please sign up for my Weekly e-mail newsletter. Please note that your details will never be sold and shared with others. You are signing-u for my e-mail only. |