A drop-down menu using jquery [like Yahoo]

Source: Internet
Author: User

I saw a very nice drop-down menu in Yahoo mail, and I made a pig.

Http://files.cnblogs.com/pengpengsay/jquery-navi.rar

There is a small bug in it .. That is, after the menu appears, click somewhere else and the menu disappears, but you need to click it twice,
Mainly because the code is <a href = "http://www.zzcn.net/"> navigation <span id = "dh1"> navigation </span> </a>
It is caused by this structure, but I cannot change this structure, or the effect is incorrect ..

-------------------------------------------------------------------------------

After the struggle .. I found that there was a bug in the code just now. I hereby fix the bug. In order to remember the above error, I will not delete it. (The code below also contains the bug code, but peng won't delete it here .)

Click here to download the correct drop-down list Code http://files.cnblogs.com/pengpengsay/jquery-navi2.rar

I have put the code on my website .. You can directly view the results and click here

The following code is a part of the code that is occasionally written (the code below contains the bug, please download navi2 for the correct code ).. Haha .. Jquery uses 1.2.6.

$ (Document). Ready (function (){
VaR d1x_click = false;

$ ("Body"). Not ($ ("# d1x"). Click (function (){
If (! D1x_click)
{
$ ("# D1x" ).css ("display", "NONE ");
}
D1x_click = false;
// Alert ("B ");

})
$ ("# D1x"). Click (function (){
D1x_click = true;
});
$ ("# Dh1"). Click (function (){
// Alert ("C ");
VaR offset = $ ("# d1"). offset ();
VaR d1x = $ ("# d1x ");
If(d1x.css ("display") = "Block ")
{
D1x.css ("display", "NONE ");
}
Else
{
D1x.css ("display", "Block ");
}
D1x.css ("position", "absolute ");
D1x.css ("Left", offset. Left );
D1x.css ("TOP", offset. Top + $ ("# d1"). Height () + 3 );
D1x_click = true;
Return false;
});
});

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.