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
Javascript is in the <head> Section <!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> Javascript is in the <head> Section
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