Multi-level Navigation
March 16, 2011
Dynamic Menus-pure CSS
 Examples are fly-out menus, pull-down menus or pop-up
menus
 Some dynamic menus can be created with pure css
 Disadvantage-submenus disappear instantly if users mouse strays
away from link
Example: son of suckerfish
Multilevel Lists
 Usually you build an unordered list, with each sub-menu
appearing as a list within its parent list item.
<ul>
<li><a href=“#”>home</a></li>
<li><a href=“#”>About Us</a>
<ul>
<li><a href=“#”>History</a></li>
<li><a href=“#”>History</a></li>
</ul>
</li>
</ul>
Dynamic Menus-Using Javascript
 Learning Javascript is beyond the scope of this course
 Use css to style the navigation and javascript to control the actions of
submenu
 You can also add animation effects like fading
 If you do use Javascript make sure to put it in the <head> section of
your HTML
Simple example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
Linking to Javascript File
 Sometimes you will have so much Javascript code that
you will need to create a file specifically to house your
javascript and then link to this file in the <head> section
of your HTML document.
 You should have a folder specifically for your javascript
files
 Javascript files have a .js on the end of them
example: jquerylavalamp.js
Linking to Javascript Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=“javascript/jquery.js"></script>
<script type="text/javascript" src=“javascript/jquery.lavalamp.js"></script>
</head>
Copyright
 When you use other people’s code you always want to check
the copyright information even on tutorials.
Site Map
 In more complex sites, group hyperlinks into a site map that
allows it to function as both a navigation tool and outline of
site content.
 A site map will also help optimize your site for search
engines
Dynamic Navigation Examples
 Dragon Interactive
 Interactive Dreams
 Bern
 Ski Alpine
 Sony-Mega Menu Example
 Alexandru Cohaniuc
 Jmar’s Blog
 Creasenso
Dynamic Navigation Tutorials
 List-o-matic
 CSS Play
 Dock Menu
 Lava Lamp
 Dock Menu 2
 Yet Another Dynamic Menu
 Ultimate Drop Down Menu
 Horizontal Accordion