Latest ads

Electronics
Vehicles
Property
Search

podi help 1k

K

kosandpol

Well-known member
  • Jun 10, 2008
    45,329
    1,492
    113
    Simple Drop-Down Menu v2.0

    It is a One Level Drop-Down Menu with Timeout effect.
    If you are looking for advanced script, see the Multi-Level Drop-Down Menu based on simple treelike unordered list.
    Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable.
    And I just wrote this simple script:
    HTML Code

    HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.
    Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:
    Code: 
    [COLOR=#000000][FONT=Times New Roman][FONT=lucida console]<[COLOR=#3659a4][B]ul[/B][/COLOR] id=[COLOR=#a0560d]"sddm"[/COLOR]>
    <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR] 
        onmouseover=[COLOR=#a0560d]"mopen('m1')"[/COLOR] 
        onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>Home</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]div[/B][/COLOR] id=[COLOR=#a0560d]"m1"[/COLOR] 
            onmouseover=[COLOR=#a0560d]"mcancelclosetime()"[/COLOR] 
            onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>HTML Drop Down</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>DHTML Menu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>JavaScript DropDown</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Cascading Menu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>CSS Horizontal Menu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        </[COLOR=#3659a4][B]div[/B][/COLOR]>
    </[COLOR=#3659a4][B]li[/B][/COLOR]>
    <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR] 
        onmouseover=[COLOR=#a0560d]"mopen('m2')"[/COLOR] 
        onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>Download</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]div[/B][/COLOR] id=[COLOR=#a0560d]"m2"[/COLOR] 
            onmouseover=[COLOR=#a0560d]"mcancelclosetime()"[/COLOR] 
            onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>ASP Dropdown</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Pulldown menu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>AJAX Drop Submenu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>DIV Cascading Menu</[COLOR=#3659a4][B]a[/B][/COLOR]>
        </[COLOR=#3659a4][B]div[/B][/COLOR]>
    </[COLOR=#3659a4][B]li[/B][/COLOR]>
    <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Order</[COLOR=#3659a4][B]a[/B][/COLOR]></[COLOR=#3659a4][B]li[/B][/COLOR]>
    <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Help</[COLOR=#3659a4][B]a[/B][/COLOR]></[COLOR=#3659a4][B]li[/B][/COLOR]>
    <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Contact</[COLOR=#3659a4][B]a[/B][/COLOR]></[COLOR=#3659a4][B]li[/B][/COLOR]>
</[COLOR=#3659a4][B]ul[/B][/COLOR]>
<[COLOR=#3659a4][B]div[/B][/COLOR] style=[COLOR=#a0560d]"clear:both"[/COLOR]></[COLOR=#3659a4][B]div[/B][/COLOR]>[/FONT][/FONT][/COLOR]


    CSS Code

    <li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;
    Everything else is usual decoration:
    Code: 
    [COLOR=#000000][FONT=Times New Roman][FONT=lucida console][COLOR=#3659a4][B]#sddm[/B][/COLOR]
{    [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]z-index[/B][/COLOR]:[COLOR=#a0560d] 30[/COLOR]}

[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR]
{    [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]list-style[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR];
    [COLOR=#3659a4][B]float[/B][/COLOR]:[COLOR=#a0560d] left[/COLOR];
    [COLOR=#3659a4][B]font[/B][/COLOR]:[COLOR=#a0560d] bold 11px arial[/COLOR]}

[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]
{    [COLOR=#3659a4][B]display[/B][/COLOR]:[COLOR=#a0560d] block[/COLOR];
    [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0 1px 0 0[/COLOR];
    [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 4px 10px[/COLOR];
    [COLOR=#3659a4][B]width[/B][/COLOR]:[COLOR=#a0560d] 60px[/COLOR];
    [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #5970B2[/COLOR];
    [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #FFF[/COLOR];
    [COLOR=#3659a4][B]text-align[/B][/COLOR]:[COLOR=#a0560d] center[/COLOR];
    [COLOR=#3659a4][B]text-decoration[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR]}

[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]:hover
{    [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #49A3FF[/COLOR]}

[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR]
{    [COLOR=#3659a4][B]position[/B][/COLOR]:[COLOR=#a0560d] absolute[/COLOR];
    [COLOR=#3659a4][B]visibility[/B][/COLOR]:[COLOR=#a0560d] hidden[/COLOR];
    [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
    [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #EAEBD8[/COLOR];
    [COLOR=#3659a4][B]border[/B][/COLOR]:[COLOR=#a0560d] 1px solid #5970B2[/COLOR]}

    [COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]
    {    [COLOR=#3659a4][B]position[/B][/COLOR]:[COLOR=#a0560d] relative[/COLOR];
        [COLOR=#3659a4][B]display[/B][/COLOR]:[COLOR=#a0560d] block[/COLOR];
        [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];
        [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 5px 10px[/COLOR];
        [COLOR=#3659a4][B]width[/B][/COLOR]:[COLOR=#a0560d] auto[/COLOR];
        [COLOR=#3659a4][B]white-space[/B][/COLOR]:[COLOR=#a0560d] nowrap[/COLOR];
        [COLOR=#3659a4][B]text-align[/B][/COLOR]:[COLOR=#a0560d] left[/COLOR];
        [COLOR=#3659a4][B]text-decoration[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR];
        [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #EAEBD8[/COLOR];
        [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #2875DE[/COLOR];
        [COLOR=#3659a4][B]font[/B][/COLOR]:[COLOR=#a0560d] 11px arial[/COLOR]}

    [COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]:hover
    {    [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #49A3FF[/COLOR];
        [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #FFF[/COLOR]}[/FONT][/FONT][/COLOR]
    JavaScript Code

    Insert this code between your <head></head> tags. Look to the code for the comments:
    Code: 
    [COLOR=#000000][FONT=Times New Roman][FONT=lucida console][COLOR=#888888]// Copyright 2006-2007 javascript-array.com[/COLOR]

[COLOR=#3659a4][B]var[/B][/COLOR] timeout    = [COLOR=#008800]500[/COLOR];
[COLOR=#3659a4][B]var[/B][/COLOR] closetimer    = [COLOR=#008800]0[/COLOR];
[COLOR=#3659a4][B]var[/B][/COLOR] ddmenuitem    = [COLOR=#008800]0[/COLOR];

[COLOR=#888888]// open hidden layer[/COLOR]
[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mopen[/B][/COLOR](id)
{    
    [COLOR=#888888]// cancel close timer[/COLOR]
    mcancelclosetime();

    [COLOR=#888888]// close old layer[/COLOR]
    [COLOR=#3659a4][B]if[/B][/COLOR](ddmenuitem) ddmenuitem.style.visibility = [COLOR=#a0560d]'hidden'[/COLOR];

    [COLOR=#888888]// get new layer and show it[/COLOR]
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = [COLOR=#a0560d]'visible'[/COLOR];

}
[COLOR=#888888]// close showed layer[/COLOR]
[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mclose[/B][/COLOR]()
{
    [COLOR=#3659a4][B]if[/B][/COLOR](ddmenuitem) ddmenuitem.style.visibility = [COLOR=#a0560d]'hidden'[/COLOR];
}

[COLOR=#888888]// go close timer[/COLOR]
[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mclosetime[/B][/COLOR]()
{
    closetimer = window.setTimeout(mclose, timeout);
}

[COLOR=#888888]// cancel close timer[/COLOR]
[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mcancelclosetime[/B][/COLOR]()
{
    [COLOR=#3659a4][B]if[/B][/COLOR](closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = [COLOR=#008800]null[/COLOR];
    }
}

[COLOR=#888888]// close layer when click-out[/COLOR]
document.onclick = mclose; [/FONT][/FONT][/COLOR]


    That’s it! All you have to do now is add some hover styles and make it your own. Enjoy!
    dance.gif

    If you want to use this script on your page, please place link to http://javascript-array.com at one of your pages.

    Source :     http://javascript-array.com/scripts/simple_drop_down_menu/
     

    Similar threads

    RottenCOLT
    Podi ayata hoda poth?
    Replies
    13
    Views
    307
    tharakaf
    tharakaf
    London Mahathun
    Help - Download Embedded Videos
    Replies
    4
    Views
    139
    dog123
    dog123
    saw1993
    PayPal payment help
    Replies
    1
    Views
    114
    baba-chuti
    baba-chuti
    Akshaya5000
    podi help ekak oneee...
    Replies
    7
    Views
    231
    dayt0na
    dayt0na
    charith077
    Android app Help
    Replies
    3
    Views
    233
    Nidarshana_k
    Nidarshana_k
    Top Bottom