Jquery practice summary 2 vertical menu drop-down effect

Source: Internet
Author: User
Document directory
  • Basic implementation
  • HTML:
  • JS Code: you also need to reference the jquery. js file.
  • CSS:
  • :
  • Summary

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


<! 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 ')");}}}
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 ;}



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.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.