Download presentation
Presentation is loading. Please wait.
1
Multi-level Navigation
March 16, 2011
2
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
3
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>
4
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
5
Javascript is in the <head> Section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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
6
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
7
Linking to Javascript Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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>
8
Copyright When you use other people’s code you always want to check the copyright information even on tutorials.
9
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
10
Dynamic Navigation Examples
Dragon Interactive Interactive Dreams Bern Ski Alpine Sony-Mega Menu Example Alexandru Cohaniuc Jmar’s Blog Creasenso
11
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
Similar presentations
