DHTML (web effects) examples Tutorial - simple XHTML + CSS + JavaScript produced dynamic navigation (2)
DHTML column collected some examples of DHTML Web effects, and can be used as learning javascript HTML DOM reference.
<style Type="text/css" />
<! --
# Nv * (margin: 0; padding: 0; border: 0;)
(# Nv
Line-height: 24px; list-style-type: none; background: # 666;
)
# Nv a (
Display: block; width: 80px; text-align: center;
)
# Nv a: link (
Color: # 666; text-decoration: none;
)
# Nv a: visited (
Color: # 666; text-decoration: none;
)
# Nv a: hover (
Color: # FFF; text-decoration: none; font-weight: bold;
)
# Nv li (
Float: left; width: 80px; background: # CCC;
)
# Nv li a: hover (
Background: # 999;
)
# Nv li ul (
Line-height: 27px; list-style-type: none; text-align: left;
Left:-999em; width: 980px; position: absolute; float: left;
)
# Nv li ul li (
Float: left; width: 80px;
Background: # F6F6F6;
)
# Nv li ul a (
Display: block; width: 80px; text-align: center;
)
# Nv li ul a: link (
Color: # 666; text-decoration: none;
)
# Nv li ul a: visited (
Color: # 666; text-decoration: none;
)
# Nv li ul a: hover (
Color: # F3F3F3; text-decoration: none; font-weight: normal;
Background: # C00;
)
# Nv li: hover ul (
Left: 0;
)
# Nv li.sfhover ul (
Left: 0;
)
# Content (
Clear: left;
)
-->
</ Style>
<script Type=text/javascript> <!--//--><![ CDATA [//><!--
Function menuFix () (
Var sfEls = document.getElementById ( "nv"). GetElementsByTagName ( "li");
For (var i = 0; i <sfEls.length; i + +) (
SfEls [i]. Onmouseover = function () (
This.className + = (this.className.length> 0? "": "") + "Sfhover";
)
SfEls [i]. OnMouseDown = function () (
This.className + = (this.className.length> 0? "": "") + "Sfhover";
)
SfEls [i]. OnMouseUp = function () (
This.className + = (this.className.length> 0? "": "") + "Sfhover";
)
SfEls [i]. Onmouseout = function () (
This.className.replace this.className = (new RegExp ( "(? | ^) Sfhover \ \ b")
"");
)
)
)
Window.onload = menuFix;
//--><!]]></ Script>
</ Head>
<body>
<ul Id="nv" />
<li> <a Href="#" /> Products </ a>
<ul>
<li> <a Href="#" /> a product </ a> </ li>
<li> <a Href="#" /> a product </ a> </ li>
<li> <a Href="#" /> a product </ a> </ li>
<li> <a Href="#" /> a product </ a> </ li>
<li> <a Href="#" /> a product </ a> </ li>
<li> <a Href="#" /> a product </ a> </ li>
</ Ul>
</ Li>
<li> <a Href="#" /> services introduced </ a>
<ul>
<li> <a Href="#" /> services 2 </ a> </ li>
<li> <a Href="#" /> services 2 </ a> </ li>
<li> <a Href="#" /> services 2 </ a> </ li>
<li> <a Href="#" /> services 2 </ a> </ li>
<li> <a Href="#" /> services 2 </ a> </ li>
<li> <a Href="#" /> services 2 </ a> </ li>
</ Ul>
</ Li>
<li> <a Href="#" /> Stories </ a>
<ul>
<li> <a Href="#" /> case 3 </ a> </ li>
<li> <a Href="#" /> case </ a> </ li>
<li> <a Href="#" /> case three cases </ a> </ li>
<li> <a Href="#" /> case three cases </ a> </ li>
</ Ul>
</ Li>
<li> <a Href="#" /> About </ a>
<ul>
<li> <a Href="#" /> four of us </ a> </ li>
<li> <a Href="#" /> four of us </ a> </ li>
<li> <a Href="#" /> four of us </ a> </ li>
<li> <a Href="#" /> we have four 111 </ a> </ li>
</ Ul>
</ Li>
<li> <a Href="#" /> online demo </ a>
<ul>
<li> <a Href="#" /> demonstration </ a> </ li>
<li> <a Href="#" /> demonstration </ a> </ li>
<li> <a Href="#" /> demonstration </ a> </ li>
<li> <a Href="#" /> demonstration demonstration </ a> </ li>
<li> <a Href="#" /> demonstration demonstration </ a> </ li>
<li> <a Href="#" /> demonstration demonstration </ a> </ li>
<li> <a Href="#" /> demonstration demonstration </ a> </ li>
<li> <a Href="#" /> demonstration demonstration </ a> </ li>
</ Ul>
</ Li>
<li> <a Href="#" /> Contact us </ a>
<ul>
<li> <a Href="#" /> ContactContact </ a> </ li>
<li> <a Href="#" /> ContactContact </ a> </ li>
<li> <a Href="#" /> Contact </ a> </ li>
<li> <a Href="#" /> ContactContact </ a> </ li>
<li> <a Href="#" /> ContactContact </ a> </ li>
<li> <a Href="#" /> ContactContact </ a> </ li>
<li> <a Href="#" /> ContactContact </ a> </ li>
</ Ul>
</ Li>
</ Ul>