I remember that I found a lot of drop-down navigation bars on most websites and found them very interesting. After all, we are learning programming and are quite interested in the pull-down effect, this fade-in and fade-out will show different effects as the mouse moves at different locations and whether or not, giving users a god of beauty.
I just learned this piece of knowledge. I followed the teacher's video and tried it. The effect came out. I was really excited.
Basic implementation
HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> JS Code: you also need to reference the jquery. js file.
Menu. JS:
$ (Document ). ready (function () {// code executed when the DOM in the page has been loaded $ (". main> "). click (function () {// find the sub-menu item var ulnode = $ (this) corresponding to the main menu item ). next ("Ul");/* If (ulnode.css ("display") = "NONE") using ulnode.css ("display", "Block ");} else implements ulnode.css ("display", "NONE");} * // ulnode. show ("slow"); // normal fast // ulnode. hide (); // ulnode. toggle (); // ulnode. slidedown ("slow"); // ulnode. slideup; ulnode. slidetoggle (); changeicon ($ (this) ;}); $ (". hmain "). hover (function () {$ (this ). children ("Ul "). slidedown (); changeicon ($ (this ). children ("A");}, function () {$ (this ). children ("Ul "). slideup (); changeicon ($ (this ). children ("A");});/*** modify the indicator icon of the Main Menu */function changeicon (mainnode) {If (mainnode) {If (mainnode.css ("background-image "). indexof ("collapsed.gif")> = 0) using mainnode.css ("background-image", "URL ('images/expanded.gif ')");} else using mainnode.css ("background-image ", "URL ('images/collapsed.gif ')");}}}CSS:Ul, Li {/* clear the default dot on UL and li */list-style: none;} ul {/* clear the indent value of the sub-menu */padding: 0; margin: 0 ;}. main ,. hmain {background-image: URL (.. /images/title.gif); background-repeat: Repeat-X; width: 120px;} li {background-color: # eeeeee ;} A {/* cancel all underlines */Text-Decoration: none; padding-left: 20px; display: block; display: inline-block; width: 100px; padding-top: 3px; padding-bottom: 3px ;}. main ,. hmain A {color: White; Background-image: URL (.. /images/collapsed.gif); background-repeat: No-Repeat; Background-position: 3px center ;}. main Li ,. hmain Li a {color: black; Background-image: none ;}. main ul ,. hmain ul {display: none ;}. hmain {float: Left; margin-Right: 1px ;}:Summary
This effect is used on a large number of websites. After we have a deep understanding of this framework, we will learn a lot more easily later. The knowledge is similar, and we need to continue to use it back and forth, it is understandable. We need to lay a good foundation for the big thinking of small knowledge, and we should be able to learn it later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
