Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
Pure VPN - Up to 27 Months
vgp
Updated:
Friday at 8:10 AM
එක පැකේජ් එකයි මාසෙටම Unlimited Internet. තාමත් DATA CARD දාන්න සල්ලි වියදම් කරනවද? අඩුම මිලට අපෙන්.
sayuru bandara
Updated:
Jun 2, 2026
Ad icon
ඉන්ටර්නෙට් එකෙන් හරියටම සල්ලි හොයන්න සහ Success වෙන්න කැමතිද? 🚀 (E-Money & Success Stories)
siri sumana
Updated:
May 30, 2026
Gemini AI PRO 18 months Offer
Hawaka
Updated:
May 27, 2026
Ad icon
koko account
DasunEranga
Updated:
May 27, 2026
Electronics
Vehicles
Property
Search
Reply to thread
Forums
General
ElaKiri Help
podi help 1k
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="kosandpol" data-source="post: 7461337" data-attributes="member: 105851"><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><strong>Simple Drop-Down Menu v2.0</strong></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">It is a One Level Drop-Down Menu with Timeout effect.</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">If you are looking for advanced script, see the <a href="http://www.elakiri.com/scripts/multi_level_drop_down_menu/?st" target="_blank">Multi-Level Drop-Down Menu</a> based on simple treelike unordered list.</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">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.</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">And I just wrote this simple script:</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><strong>HTML Code</strong></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">Parent items and hidden layers have unique identifiers. Also these have event handlers <span style="color: #659912">onmouseover</span> and <span style="color: #659912">onmouseout</span>:</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span>[code][COLOR=#000000][FONT=Times New Roman][FONT=lucida console]<[COLOR=#3659a4][B]ul[/B][/COLOR] id=[COLOR=#a0560d]"sddm"[/COLOR]></p><p> <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR] </p><p> onmouseover=[COLOR=#a0560d]"mopen('m1')"[/COLOR] </p><p> onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>Home</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]div[/B][/COLOR] id=[COLOR=#a0560d]"m1"[/COLOR] </p><p> onmouseover=[COLOR=#a0560d]"mcancelclosetime()"[/COLOR] </p><p> onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>HTML Drop Down</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>DHTML Menu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>JavaScript DropDown</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Cascading Menu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>CSS Horizontal Menu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> </[COLOR=#3659a4][B]div[/B][/COLOR]></p><p> </[COLOR=#3659a4][B]li[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]li[/B][/COLOR]><[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR] </p><p> onmouseover=[COLOR=#a0560d]"mopen('m2')"[/COLOR] </p><p> onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]>Download</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]div[/B][/COLOR] id=[COLOR=#a0560d]"m2"[/COLOR] </p><p> onmouseover=[COLOR=#a0560d]"mcancelclosetime()"[/COLOR] </p><p> onmouseout=[COLOR=#a0560d]"mclosetime()"[/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>ASP Dropdown</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>Pulldown menu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>AJAX Drop Submenu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> <[COLOR=#3659a4][B]a[/B][/COLOR] href=[COLOR=#a0560d]"#"[/COLOR]>DIV Cascading Menu</[COLOR=#3659a4][B]a[/B][/COLOR]></p><p> </[COLOR=#3659a4][B]div[/B][/COLOR]></p><p> </[COLOR=#3659a4][B]li[/B][/COLOR]></p><p> <[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]></p><p> <[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]></p><p> <[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]></p><p></[COLOR=#3659a4][B]ul[/B][/COLOR]></p><p><[COLOR=#3659a4][B]div[/B][/COLOR] style=[COLOR=#a0560d]"clear:both"[/COLOR]></[COLOR=#3659a4][B]div[/B][/COLOR]>[/FONT][/FONT][/COLOR]</p><p>[/code]<span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p> <span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><strong>CSS Code</strong></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'"><li> tag have <span style="color: #659912">loat: left;</span> declaration. sumbmenu layer have <span style="color: #659912">visibility: hidden;</span> and <span style="color: #659912">position: absolute;</span>. Anchor tag set to <span style="color: #659912">display: block;</span></span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">Everything else is usual decoration:</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'"></span></span></span></span></span>[code][COLOR=#000000][FONT=Times New Roman][FONT=lucida console][COLOR=#3659a4][B]#sddm[/B][/COLOR]</p><p>{ [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]z-index[/B][/COLOR]:[COLOR=#a0560d] 30[/COLOR]}</p><p></p><p>[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR]</p><p>{ [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]list-style[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR];</p><p> [COLOR=#3659a4][B]float[/B][/COLOR]:[COLOR=#a0560d] left[/COLOR];</p><p> [COLOR=#3659a4][B]font[/B][/COLOR]:[COLOR=#a0560d] bold 11px arial[/COLOR]}</p><p></p><p>[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]</p><p>{ [COLOR=#3659a4][B]display[/B][/COLOR]:[COLOR=#a0560d] block[/COLOR];</p><p> [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0 1px 0 0[/COLOR];</p><p> [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 4px 10px[/COLOR];</p><p> [COLOR=#3659a4][B]width[/B][/COLOR]:[COLOR=#a0560d] 60px[/COLOR];</p><p> [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #5970B2[/COLOR];</p><p> [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #FFF[/COLOR];</p><p> [COLOR=#3659a4][B]text-align[/B][/COLOR]:[COLOR=#a0560d] center[/COLOR];</p><p> [COLOR=#3659a4][B]text-decoration[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR]}</p><p></p><p>[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]li[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]:hover</p><p>{ [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #49A3FF[/COLOR]}</p><p></p><p>[COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR]</p><p>{ [COLOR=#3659a4][B]position[/B][/COLOR]:[COLOR=#a0560d] absolute[/COLOR];</p><p> [COLOR=#3659a4][B]visibility[/B][/COLOR]:[COLOR=#a0560d] hidden[/COLOR];</p><p> [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #EAEBD8[/COLOR];</p><p> [COLOR=#3659a4][B]border[/B][/COLOR]:[COLOR=#a0560d] 1px solid #5970B2[/COLOR]}</p><p></p><p> [COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]</p><p> { [COLOR=#3659a4][B]position[/B][/COLOR]:[COLOR=#a0560d] relative[/COLOR];</p><p> [COLOR=#3659a4][B]display[/B][/COLOR]:[COLOR=#a0560d] block[/COLOR];</p><p> [COLOR=#3659a4][B]margin[/B][/COLOR]:[COLOR=#a0560d] 0[/COLOR];</p><p> [COLOR=#3659a4][B]padding[/B][/COLOR]:[COLOR=#a0560d] 5px 10px[/COLOR];</p><p> [COLOR=#3659a4][B]width[/B][/COLOR]:[COLOR=#a0560d] auto[/COLOR];</p><p> [COLOR=#3659a4][B]white-space[/B][/COLOR]:[COLOR=#a0560d] nowrap[/COLOR];</p><p> [COLOR=#3659a4][B]text-align[/B][/COLOR]:[COLOR=#a0560d] left[/COLOR];</p><p> [COLOR=#3659a4][B]text-decoration[/B][/COLOR]:[COLOR=#a0560d] none[/COLOR];</p><p> [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #EAEBD8[/COLOR];</p><p> [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #2875DE[/COLOR];</p><p> [COLOR=#3659a4][B]font[/B][/COLOR]:[COLOR=#a0560d] 11px arial[/COLOR]}</p><p></p><p> [COLOR=#3659a4][B]#sddm[/B][/COLOR] [COLOR=#3659a4][B]div[/B][/COLOR] [COLOR=#3659a4][B]a[/B][/COLOR]:hover</p><p> { [COLOR=#3659a4][B]background[/B][/COLOR]:[COLOR=#a0560d] #49A3FF[/COLOR];</p><p> [COLOR=#3659a4][B]color[/B][/COLOR]:[COLOR=#a0560d] #FFF[/COLOR]}[/FONT][/FONT][/COLOR]</p><p>[/code]<span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><strong>JavaScript Code</strong></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">Insert this code between your <head></head> tags. Look to the code for the comments:</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'"></span></span></span></span></span>[code][COLOR=#000000][FONT=Times New Roman][FONT=lucida console][COLOR=#888888]// Copyright 2006-2007 javascript-array.com[/COLOR]</p><p></p><p>[COLOR=#3659a4][B]var[/B][/COLOR] timeout = [COLOR=#008800]500[/COLOR];</p><p>[COLOR=#3659a4][B]var[/B][/COLOR] closetimer = [COLOR=#008800]0[/COLOR];</p><p>[COLOR=#3659a4][B]var[/B][/COLOR] ddmenuitem = [COLOR=#008800]0[/COLOR];</p><p></p><p>[COLOR=#888888]// open hidden layer[/COLOR]</p><p>[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mopen[/B][/COLOR](id)</p><p>{ </p><p> [COLOR=#888888]// cancel close timer[/COLOR]</p><p> mcancelclosetime();</p><p></p><p> [COLOR=#888888]// close old layer[/COLOR]</p><p> [COLOR=#3659a4][B]if[/B][/COLOR](ddmenuitem) ddmenuitem.style.visibility = [COLOR=#a0560d]'hidden'[/COLOR];</p><p></p><p> [COLOR=#888888]// get new layer and show it[/COLOR]</p><p> ddmenuitem = document.getElementById(id);</p><p> ddmenuitem.style.visibility = [COLOR=#a0560d]'visible'[/COLOR];</p><p></p><p>}</p><p>[COLOR=#888888]// close showed layer[/COLOR]</p><p>[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mclose[/B][/COLOR]()</p><p>{</p><p> [COLOR=#3659a4][B]if[/B][/COLOR](ddmenuitem) ddmenuitem.style.visibility = [COLOR=#a0560d]'hidden'[/COLOR];</p><p>}</p><p></p><p>[COLOR=#888888]// go close timer[/COLOR]</p><p>[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mclosetime[/B][/COLOR]()</p><p>{</p><p> closetimer = window.setTimeout(mclose, timeout);</p><p>}</p><p></p><p>[COLOR=#888888]// cancel close timer[/COLOR]</p><p>[COLOR=#3659a4][B]function[/B][/COLOR] [COLOR=#3659a4][B]mcancelclosetime[/B][/COLOR]()</p><p>{</p><p> [COLOR=#3659a4][B]if[/B][/COLOR](closetimer)</p><p> {</p><p> window.clearTimeout(closetimer);</p><p> closetimer = [COLOR=#008800]null[/COLOR];</p><p> }</p><p>}</p><p></p><p>[COLOR=#888888]// close layer when click-out[/COLOR]</p><p>document.onclick = mclose; [/FONT][/FONT][/COLOR]</p><p>[/code]<span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">That’s it! All you have to do now is add some hover styles and make it your own. Enjoy! <img src="http://www.elakiri.com/_img/dance.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">If you want to use this script on your page, please place link to <a href="http://javascript-array.com" target="_blank">http://javascript-array.com</a> at one of your pages.</span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'"></span></span></span></span></span></p><p><span style="color: #000000"><span style="font-family: 'Times New Roman'"><span style="font-family: 'trebuchet ms'"><span style="color: #353d3c"><span style="font-family: 'trebuchet ms'">Source : </span></span></span></span></span><a href="http://javascript-array.com/scripts/simple_drop_down_menu/" target="_blank">http://javascript-array.com/scripts/simple_drop_down_menu/</a></p></blockquote><p></p>
[QUOTE="kosandpol, post: 7461337, member: 105851"] [COLOR=#000000][FONT=Times New Roman][FONT=trebuchet ms][B]Simple Drop-Down Menu v2.0[/B] [COLOR=#353d3c][FONT=trebuchet ms]It is a One Level Drop-Down Menu with Timeout effect.[/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]If you are looking for advanced script, see the [URL="http://www.elakiri.com/scripts/multi_level_drop_down_menu/?st"]Multi-Level Drop-Down Menu[/URL] based on simple treelike unordered list.[/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]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.[/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]And I just wrote this simple script:[/FONT][/COLOR] [B]HTML Code[/B] [COLOR=#353d3c][FONT=trebuchet ms]HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.[/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]Parent items and hidden layers have unique identifiers. Also these have event handlers [COLOR=#659912]onmouseover[/COLOR] and [COLOR=#659912]onmouseout[/COLOR]:[/FONT][/COLOR] [/FONT][/FONT][/COLOR][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] [/code][COLOR=#000000][FONT=Times New Roman][FONT=trebuchet ms] [B]CSS Code[/B] [COLOR=#353d3c][FONT=trebuchet ms]<li> tag have [COLOR=#659912]loat: left;[/COLOR] declaration. sumbmenu layer have [COLOR=#659912]visibility: hidden;[/COLOR] and [COLOR=#659912]position: absolute;[/COLOR]. Anchor tag set to [COLOR=#659912]display: block;[/COLOR][/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]Everything else is usual decoration: [/FONT][/COLOR][/FONT][/FONT][/COLOR][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] [/code][COLOR=#000000][FONT=Times New Roman][FONT=trebuchet ms][B]JavaScript Code[/B] [COLOR=#353d3c][FONT=trebuchet ms]Insert this code between your <head></head> tags. Look to the code for the comments: [/FONT][/COLOR][/FONT][/FONT][/COLOR][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] [/code][COLOR=#000000][FONT=Times New Roman][FONT=trebuchet ms] [COLOR=#353d3c][FONT=trebuchet ms]That’s it! All you have to do now is add some hover styles and make it your own. Enjoy! [IMG]http://www.elakiri.com/_img/dance.gif[/IMG][/FONT][/COLOR] [COLOR=#353d3c][FONT=trebuchet ms]If you want to use this script on your page, please place link to [URL]http://javascript-array.com[/URL] at one of your pages. Source : [/FONT][/COLOR][/FONT][/FONT][/COLOR][URL]http://javascript-array.com/scripts/simple_drop_down_menu/[/URL] [/QUOTE]
Insert quotes…
Verification
Hathara warak wissa keeyada? (Hathara wadi karanna 20)
Post reply
Top
Bottom
Pure VPN - Up to 27 Months
Gemini AI PRO 18 months Offer
