1. Compile a navigation barWhen you click the title, you can scale the content of the navigation bar to simplify the content or display more content.
The sample code is as follows::
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
<Meta name = "Description" CONTENT = "">
<Script language = "javascript" type = "text/javascript" src = "jquery-1.8.3.min.js">
</Script>
<Style type = "text/css">
Body {font-size: 13px}
# DivFrame {border: solid 1px #666; width: 301px; overflow: hidden}
# DivFrame. clsHead {background-color: # eee; padding: 8px; height: 18px; cursor: hand}
# DivFrame. clsHead h3 {padding: 0px; margin: 0px; float: left}
# DivFrame. clsHead span {float: right; margin-top: 3px}
# DivFrame. clsContent {padding: 8px}
# DivFrame. clsContent ul {list-style-type: none; margin: 0px; padding: 0px}
# DivFrame. clsContent ul li {float: left; width: 95px; height: 23px; line-height: 23px}
# DivFrame. clsBot {float: right; padding-top: 5px; padding-bottom: 5px}
. GetFocus {background-color: # eee}
</Style>
<Script type = "text/javascript">
$ (Function () {// page loading event
$ (". ClsHead"). click (function () {// image click Event
If ($ (". clsContent"). is (": visible") {// if the content is visible
$ (". ClsHead span img"). attr ("src", "Images/a1.gif"); // change the image
$ (". ClsContent" ).css ("display", "none"); // hide the content
} Else {
$ (". ClsHead span img"). attr ("src", "Images/a2.gif"); // change the image
$ (". ClsContent" ).css ("display", "block"); // display content
}
});
$ (". ClsBot> a"). click (function () {// Hot Link click Event
If ($ (". clsBot> a"). text () = "simplified") {// if the content is 'simplified'
$ ("Ul li: gt (4): not (: last)"). hide (); // hide an element whose index number is greater than 4 and not the last one
$ (". ClsBot> a"). text ("more"); // change the character content to "more"
} Else {
$ ("Ul li: gt (4): not (: last)"). show (). addClass ("GetFocus"); // display the selected element and add a style
$ (". ClsBot> a"). text ("simplified"); // change the character content to "simplified"
}
});
});
</Script>
</HEAD>
<BODY>
<Div id = "divFrame">
<Div class = "clsHead">
<H3> book Category <Span> </Span>
</Div>
<Div class = "clsContent">
<Ul>
<Li> <a href = "#"> fiction </a> <I> (1110) </I> </li>
<Li> <a href = "#"> literature and art </a> <I> (230) </I> </li>
<Li> <a href = "#"> youth </a> <I> (1430) </I> </li>
<Li> <a href = "#"> children </a> <I> (1560) </I> </li>
<Li> <a href = "#"> life </a> <I> (870) </I> </li>
<Li> <a href = "#"> Social Science </a> <I> (1460) </I> </li>
<Li> <a href = "#"> management </a> <I> (1450) </I> </li>
<Li> <a href = "#"> Computer </a> <I> (1780) </I> </li>
<Li> <a href = "#"> Education </a> <I> (930) </I> </li>
<Li> <a href = "#"> tool book </a> <I> (3450) </I> </li>
<Li> <a href = "#"> imported version </a> <I> (980) </I> </li>
<Li> <a href = "#"> other classes </a> <I> (3230) </I> </li>
</Ul>
</Div>
<Div class = "clsBot">
<A href = "#"> simplified </a>
</Div>
</Div>
</BODY>
</HTML>
2,:
After clicking:
After simplification: