PowerPoint Presentation - HTML Review
advertisement
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
