JavaScript Dropdown Menu

Javascript 178 responses so far

JavaScript Dropdown Menu

This update to the TinyDropdown dropdown menu script offers improved stability, speed, and features. Added features include animation toggles, a speed toggle, a rollout timeout, and improved style handling. The script is still very lightweight at only 1.7KB packed and should perform noticeably better than the previous version. Styling is completely flexible through the CSS… you can even make this a vertical menu with a few tweaks.

The script is executed by passing an object to the init function. A sample call would look like the following:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

Parameters include (tag – description (type) – default):

id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200

Click here for the demo.

Click here to download

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. I welcome any bug reports. Head to the Scriptiny QA for community support.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • http://twitter.com/batfandotcom Ben Rollier

    Fantastic work, Mike. It's running very fast and smoothly

  • Keven

    You can todo the same with just CSS, why require Javascript !?

  • Arman Mkhitaryan

    It's really nice, Mike. The only problem I have is that the submenus don't appear in my IE 8, but they work in Firefox. No error actually.

    Do you know what could be the issue?

    Thanks.

  • http://www.cygnismedia.com/web-application/ Web Application Developer

    Micheal thanks for script man GOD bless you

  • Anonymous

    Animation outside of Flash/JavaScript is very early stages and definitely not cross browser compatible. Plus, IE6 doesn't support pseudo hover. Does JavaScript have to die because CSS3 can do a few things that scripting can? That said, it is always good to be able to fall back, as this accordion could easily do.

  • Anonymous

    Nice catch, not sure how that slipped past me. Will get it resolved today.

  • Arman Mkhitaryan

    Right, and scripting always gives you more power when it comes to manipulating markup.

  • Anonymous

    Very nice work!

  • Arman Mkhitaryan

    Thanks, great job ;)

  • http://twitter.com/garakuta_gara garakuta_gara

    Wonderful. I do not want must to use it.

  • NIWAScriptiny

    Hi, is there a fix yet for IE8? Really nice bit of code but under IE8 the submenu's get messed up, especially where submenu's would occupy the same space on the screen with other menus

  • Anonymous

    I am not seeing the issue. I fixed an IE8 issue 5 days ago per the post below. Contact me at the bottom of this page with a link, would be glad to take a look.

  • http://profiles.google.com/mak2cool Akram Khan

    It is very smooth and fast
    But it is not working properly for more than 5 headings
    ie after 4 headings it starts coming at next row…

    how to make them to come in single row??

  • Paulogil00

    Can I use the script in my template to sell ?

  • Anonymous

    Sure, go for it.

  • Paulogil00

    Thanks, I link to your post.

  • alpha123

    I HIGHLY recommend hiding the whole thing in a closure so T$ and T$$ don't pollute the global namespace.

  • http://www.egrovesys.com/ Joomla development

    This tiny drop down module will works better comparing to previous version. Drop down menus are easy to navigate form one page to another page.

  • http://www.josiahsprague.com/ Josiah Sprague

    What is the advantage to using JS instead of just CSS for a dropdown?

  • Anonymous

    Cross browser animation and other effects.

  • Jaredcameron

    Loving this menu script!

    You mention that it can be changed to a vertical menu with a few small tweaks – I'm relatively new to CSS and JS, could you point me in the direction of where to start to change it to a vertical menu?

    Thanks!

  • Anthonymarshall13

    Great menu! But i'm having some problems with adding this to my site cause I'm trying to run this plus the tinyfader slideshow script. I have the tinyfader script running fine but when I add the dropdown menu script it deletes my site's background image and it turns the tinyfader into a scroll box. It's a website I'm designing for my friend and it's not running online yet and I'm fairly familiar with html and css, but I'm new to javascript. So any help that anyone could give me would be very beneficial.

  • Carlis78

    Nice menu. Works fine with Java script on. I would like the menu to work also for the people who turned off their active x. With only CSS. Is it possible to change the CSS to make it work without the script? For a beginner.

  • http://www.surgeforward.com Web Developer

    Really nice functional menu. Works really well Thanks for the post and the script.

  • Guest

    Awesome, thanks :)

  • http://pulse.yahoo.com/_2HPKKMSG3NRHBZ5DRXWX6VSFYQ Hemant Mishra

    Do you people have a facebook fan page? I looked for one on twitter but could not discover one, I would really like to become a fan! fore more information visit at:- http://makemeonline.net/

  • mike

    I had a need to support longer text, so the fixed width on the menu wasn't an option for me. So I looked into how to support arbitrary widths. The addition of a small bit of code at the top of the "if (d)" block in the show function did the trick for me:

    var classes = h.classList;
    for(var i = 0; i < classes.length; i++) {
    if (classes[i] == "submenu") {
    // mozilla warns us that setProperty may be deprecated, so:
    c.style.cssText += ';left:'+h.clientWidth+'px';
    break;
    }
    }

    With that, I can remove all of the explicit "width" CSS properties.

  • http://www.rapidsofttechnologies.com/php-development.html Php Development

    It is really very valuable coding for web developers. Nice post.

  • Linx

    I need it vertical too!!

    Thanks

  • Mobile Application Development

    Thank you for sharing this post about the <a href="http://www.inforlinx.com">Mobile Application Development</a>. This is very useful for iPhone development and Android Mobile Application Development. Thanks again :)

  • Go4webapps

    thanks for posting this…………………

    <a href="http://go4webapps.com/"&gt; adobe reader 10 </a>

  • Anonymous

    @mike, exactly where do you put this in the code, and do you remove anything?

    I tried placing this in, and it just funked the whole thing up, page went crazy.

  • Anonymous

    I'm playing around with this (it's lovely, by the way), and am trying to find a workable way to make this vertical (since I'm already using it once horizontally, I wanted to use it to controll hidden divs on a single page).

  • mike
  • Mad_Man_Moon

    @Mike thanks so much! … my work firewall wouldn't let me see this, so I just got to it! – Mad_Man_Moon

  • http://twitter.com/cogzideltech CogzidelTechnologies

    I really thanks for providing such a valuable stuff!

  • http://webindiaweb.in/ Web Development chennai

     Nice explanation about menu, i so much impressed with your way of explanation..
    thanks for sharing…

  • http://twitter.com/Kidplastik Kidplastik

    Nice plugin. How would I get this to work so the menu would dropdown on a click instead of hover. Thanks in advance!

  • service

     Wow.. very informative information that most of web developers ready to use. Its really best and free of cost script specially designed for web developers.

  • http://www.casinospelautomater.com/nordicbet/ nordicbet

    Thanks for sharing this one..a nice and beautiful on mouse over very clean …I could use something like this..thanks for the post

  • http://twitter.com/joomlads07 William Smith

    Great! I would like to use it to see how my website looks.Thanks a lot! 

    web-designer  at cnpintegrations.com
     

  • j3ff

    good reference for me……

  • Hayk

    kak dobavit eto ..pomagiteee pliss

  • http://twitter.com/ValpoCreative Valpo Creative

    This is an awsome tutorial, the demo looks sweet.

  • Aaron

    This is an excellent drop down menu. Thank you for developing these tools for us designers who are not programmers.

    I have a question about using the new version.

    I've noticed that when I click a link on the menu in it's dropped state – the browser takes you to the next page as is expected. But if you click the browsers back button, the menu still appears open, in it's dropped state. The only way to close the menu is to briefly hover your pointer over the top list element or the dropped menu. When you move your pointer away, the dropped menu disappears. I used Tiny Dropdown Version 1 in the past and don't remember this issue popping up.

    This happens in Firefox, Opera and Safari but not Chrome (haven't check IE yet). I'm wondering if this is the expected behavior or if I've changed something in the stylesheet which may be allowing this to happen.

    Thanks for your time and your help.

  • dawnrae

    I'm having trouble with the active state. How do I implement that so that the main link remains highlighted while the submenu is being accessed? 

  • http://twitter.com/except_you Except you, Love

    what do i have to change to make it a "drop up menu" ?

  • ACG

    Michael,

    Thank for posting a very nice dropdown menu!  Do you think you'll have time to resolve all the issues resulting from running the script through JS Lint?

    Thanks

  • Mark Stockton

    Check for broken links using this tool and it's good for Google SEO: <a href="http://www.certicite.com">http://www.certicite.com</a&gt;  

  • http://www.facebook.com/rusho.black ভব ঘুরে

    gr8….great I like this blog …

    I am a <a href="http://theweb-coder.com/">webcoder</a&gt; ..so it help me ….

  • Apouras

    can someone PLEASE help me.  I want to be able to implement this to a site I have developed using thesis.  If someone can please help, point me in the right direction it would really mean a lot.  I feel so lost at the moment.  

  • Twisted Whisper

    In my opinion scripts like this has several flaws. First of all, lack of documentation. One won't know how to use this until he/she digs into the .js file.
    It wasn't stated anywhere that only the element "ul" are "slidable". I have wasted more than half an hour figuring out why my "table" and "div" menu won't slide until in the end I have to go digging the source codes.

    In conclusion, one will never able to figure out to make it work by only the information on this page. He/she will have to dig into the html and .js file.

  • L0ft13

    get
    a life man – these scripts are posted because the author is kind enough
    to share his workings with us. I am sure if you offered to pay him for
    the hours he spent on it he will be more than willing to comment all his
    code beautifully for you (actually probably not any more)

  • http://www.hacerunapagina.com.ar/ Leon | Hacer una Pagina

    Thanks God and for yuo man.
    Thanks for sharing.
    Very good plugin.
    See ya.
    L.

  • http://www.facebook.com/people/Edmond-Cossu/100000852568802 Edmond Cossu

    no need of this script whatever jquery script will do it better, and your script already as a flaw: if you pass rapidly hover and hover the menus they keep being showed, this is one of the purpose of jquery hover intent (among other techniques)

  • http://pulse.yahoo.com/_FC6WQBPPFLUWW63WXNQBCCHXGU Abbey Pink

    This was a great script, For the best web design or Web development, check out http://www.debcom-software.com/ they offer innovative and creative website designs based on your theme and line of business

  • Faraz_aleem

    innovative stuff presented here but I think that the way it is explained here is not at all understandable. It requires more explanation.

  • http://twitter.com/niftyhawk Venkat P

    The timeout doesn't seem to work for more than one level of submenus.  The second level submenus disappear very fast. How can I fix this?

  • Shortyshawna

    Nice script, very clean ill try and use it next time i need something like this, yeah the explanation can be simplified so people with less knowledge can use it

    btw do u have a library with more code i liked your work and i can use it in the development of my sites as i have a company called www.totalwebexposure.com

  • http://www.facebook.com/michaeljcalkins Michael Calkins

    Now that's some slick coding.

  • http://www.facebook.com/michaeljcalkins Michael Calkins

    Now that's some slick coding.

  • http://www.whichdoor.co.uk Whichdoor

    Some very nice coding there.

  • http://www.cramie.net Refly

    Very nice plugin. Thanks for sharing it.

  • ImHumble

    Great plugin, but I'm having trouble adding a second menu on the same page.

    Would I have to make a second .js file, and link to that one in addition to the one I have linked already?

  • http://twitter.com/jamesparkerz jamesparkerz

    hi
    the dropdown menu is useful area in every website.It can make to use easy run any website.

  • Henry Paul

    I don't like the explanation; I am not a copy and paste programmer, but I am not experienced enough to write this myself, and thus am forced to copy/paste. This is the best script I have found, but I want to be able to write, update, and modify any script by the time I am done with a tutorial and some accompanying practice.
    Not trying to be mean, I would just appreciate that you give a clearer description, and thus to the end user, a clearer understanding, of the script.

  • Web4You

    Really cool menu i found till now, I checked with mozilla and IE it work gr8, Hope it also work in chrome, safari and other famous browsers.

    Web4You
    http://www.web4you.co.in

  • http://www.nada-photo.info

    Hello
    I love all your script , very nice , fast , and to the point.
    I just have 1 problem , seems tinydropdown2 and tinyslider2 can not be loaded on the same page.Is there a workaround for that bug , or will you update to the version 3?
    Thanks

  • http://www.nada-photo.info

    after some futher search i found this :
    http://www.scriptiny.com/qa/2263/how-combine-javascripts-namely-tiny-dropdown2-and-tinybox2

    Just delete the line var TINY={}; out of the second included file – this essentially clears out the TINY variable which was setup in the first. You can also get rid of the T$ functions, but this is not essential

    works perfect 

  • Justin Rovang

    There seems to be a hairy bug (only tested in FF) when you disable slide (slide:false) – You can test it on the demo page or the downloadable.

    Basically the menu has some display issues where you can't get your mouse to an embedded menu within the menu. (e.g.: on the demo, disable 'slide' and try: two => no link)

  • Hxfsc2

    很不錯的東東!

  • Deb

    This was a great script, The steps are awesome. Already  implemented and get good result.  

  • Yoctoinc

    Excellent script. Would like to refer it to my visitors at http://www.yocto-web-development.com

  • Mark35se

    Great script, can't work out the variables though… which numbers are you supposed to change?

  • Guest

     In tinydropdown.js, version2:

    1. the timeout (initially 200 milliseconds) sets the delay before a menu begins to close, if the cursor is moved off the displayed menu. This prevents the menu from immediately closing if a shaky mouse temporarily moves off the menu. I find 500 more useful, but I'm old and shaky!

    2. p.speed determines how fast the menu opens and closes, but it is mis-named. The allowed value for p.speed is at least 0, but less than 1. At 0, the menu opens and closes immediately. At values slightly less than 1, then rate is slower.

    3. Be sure to check open and close rate in various browsers. I find that Firefox, Safari (Windows), Opera, and IE8 used in IE=7 mode all work at the same speed. But IE8 used as IE8 runs the script slower. This is not a matter of quirks or doctype, but the inherent JavaScript engine. Nobody is sure why. I do not know about IE greater than 8. If necessary, you can insert code that changes p.speed according to user agent compatibility mode, but IE8 still lags.

  • Guest

     I did it this way: I edited the code so that the function creating the menu is in the form of an array. Then, it can be called to create menus as TINY[0], TINY[1], and so forth. This is too detailed to post here (and too difficult to explain in a few words), but if you grasp the concept, it works.

  • Guest

     That is true. However, it is possible to edit the code so that state variables (c.opened, c.closed) are added, with relevant tests that determine what to do. This is not very simple, but it works. It is not the same as jquery hover intent.

    A problem with jquery, apart from its file size, it that the code is so involved that it is hard to edit.

  • Guest

     A "feature" of many browsers is that when you leave a web page, the mouseout event is not triggered (because you did not actually slide the cursor sideways out of the link. If you return to that same page via the browser's back button, it remembers its past state (mouseover, but not mouseout) even though the cursor moved while you were on another page.

    That's a feature of the browser, not the script. The only way to fix it would be to re-initialize the menu each time the page is visited, perhaps after clearing it when the page is unloaded. If you understand how onload and onunload work, you can play with that.

  • Guest

    It can be done. I have done it after a LOT of modification, so I won't post my results here, as they are too different from the author's original script and I cannot provide support. All I'm saying is that it can be done. In my version a click opens the menu, but it still closes by itself (after delay) on mouseout. I could have made it to remain open until closed by re-click.

  • http://www.professional-webdesigners.com/ acams

    Nice article with valuable inputs on menu scripting. Hope this article will help my developers a lot.

  • http://www.zestytechnologies.com Jacob Freelancer

    nice tutorial, thanks for this script

  • http://www.mactonweb.com/web-design-company-united-kingdom.html web design london

    This was a great script, The steps are awesome.Thanks for sharing this tutorial.

  • i7Grendel

    Can you turn it into an onclick menu as well? This would be great for mobile devices.

  • sharkbytes

    I really like this script. Is there any way to make to top menu font larger while keeping the dropdown fonts small?

  • sharkbytes

    Troubleshooting problem- the menu works great in FF, but in IE7 the menus continue to roll and unroll all by themselves and won't stop.

  • Shikhas239

    nice script and blog you are sharing with us nice menu <a href="http://www.secrets-pour-succes.com/">Confiance en soi</a>

  • Poorvik

    Great script!! but its over riding my fixed header… :( can any one help please!! thaks for your time..

  • Poorvik

    Great script!! but its over riding my fixed header… :( can any one help please!! thaks for your time..

  • teebee

    Same problem, in IE7 once you mouseover a menu and mouse out it continues to roll/unroll forever on its own.  Any fix yet?

  • sasi

    hi

  • Joe Brennan

    Do you have a preferred manner of "Attribution"? As described in the creative commons license.

  • Seidetudo.com

    An inconvenient problem occur if you have one text that use more than 120px.

    in the menu bar and even in the submenus…

    I'm finding some way to fix it. maybe using AUTO istead of 120px.

  • http://www.redinquest.com Ricardo

    Doesn't seem to work on IE7 too well.. unfortunately a whole bunch of people I know still use IE7 :(

  • http://twitter.com/ryamunacbs Yamuna Cbs

    Javascript is scripting language and it is process of display a data as graphs.Javascript is important in <a href=http://crystalbpo.com/webdevelopment.html> Web Development</a>. This nice blog to learn about javascript.

  • Tery Sniper

    its realy great thank you for your help

  • http://twitter.com/dorrellwilson Dre-Mane

    Just wanna say this is really nice, I'm implementing this on my site.

  • http://www.web4you.co.in/ web4you

    Good work guys :)

  • http://www.facebook.com/profile.php?id=100000051476576 Jesse Elser

    This is a great navigation script. I use it on my site and it works great! All major browsers compatible. Thanks guys!

  • Karl Manning

    I have the same problem on my site as you have in your demo under IE7 but not Firefox. When you float over 'Two' then 'No Link' for the first time it pushes down slightly the two links below it. Is there any fix for IE7 please?

  • Anonymous

    It is a big helping hand for me. thanks it is great work.
    http://www.itconsultancyservices.com/

  • Jason

    If there is a flash object under that menu, the drop-down menu doesn't work!!
    I am using IE9 with windows 7.  But it works with Firefox.  Please help.

    Jason@wildlydelicious.com

  • http://www.marathonm2m.com/m-to-m-autmobiles-sector/m2m-communications.aspx m2m communications

    Great with disqus…

  • Mark W

    Hi there. There appears to be a bug that is affecting second level dropdowns (visible in IE7 + 8) which can also be seen on your demo site.

    Sometimes, when you hover over the second level it doesnt appear. So on the demo when you hover over "No Link" under "Two" in some instances it just doesnt appear. If you move off the menu and come back again it usually appears.

    There doesnt appear to be any consistency over this but happens fairley frequently.

    Any help will be much appreciated

  • http://www.facebook.com/profile.php?id=1020523826 Mihai Petrescu

    Hell ois there any way to make the menu when mouse over, like in this picture : http://speednsx.com/mihai/school%20test.jpg i have a school test and i have to do that no matter what or else i am fucked up. Thank you very much. you can send me the info here, admin@speednsx.com. Thank you again.

  • Garethmann101

    This is great, I downloaded the code, but i cannot work out how to modify it so that the menu is left justified, right now it is center justified.

    Thanks

  • Guest

    this dropdown doesn't have a parameter to allow it to be horizontally oriented does it?

  • http://www.codeofaninja.com/ Ninjazhai30

    this is great man! but the right arrow is missing? i think that's great for UX.

  • Tenlethar

    Not that i wish to be unthankful. I mean, after all you provide this for free.

    I think it is a huge issue that no proper description is provided. Instead of 'ID of the navigation' you could actually clarify that it is the ID of the <ul> element.

    But the real problem is that you just don't tell us ANYTHING about this:
    var dropdown=new TINY.dropdown.init("dropdown", {});This is as confusing as it can be. Three times the word "dropdown" in one line of declaration. How will anyone know what is what? In any case, when dynamically loading that thing, it just won't work. "dropdown is not defined", is what it is saying.Why not write a normal script? You just call a function, pass the id of the UL element, a few options and that's it. Why complicate things like that?Sorry, but i don't get it.Respect for publishing this, but it truly lacks clarity.

  • http://www.emarketeer.com.au Emarketeer

    Thanks!

  • Zenfierwaugh24

    It's really great and helped me a lot to know about java in better way.Thanks a lot.
    <a href="http://www.numismatechnologies.com/"&gt; Numisma Technologies </a>

  • Meettemper

    nice 1

  • Meettemper

    i need to meet someone so to put me through, who can help?Type your comment here.

  • Stefi Watson

    Such great post..This is really good to know that it's free.So many people can use it.It help them a lot. Thanks.
    <a href="http://www.highradius.com/"&gt; Receivables Management </a>

  • http://tipsforsocialmedia.blogspot.com/ SEO VIRGO

    nice 1

     <a
    href='http://www.vistaprint.co.nz/'>website design</a>

  • Zeniferhudson22

    That's good to know that it has been provided absloutely free.It will help many people Thanks a lot For sharing.
    <a href="http://www.highradius.com/"&gt; Receivables Management </a>

  • Mihai Petrescu

    Nice 1 ? are you fuking idiot ? those people provide us something free and you came out with vistaprint ? pendejo de mierda.

  • http://www.zfort.com Web development company europe

    Very helpful post. Thank you for sharing!

  • Alex

    hey love this blog<a href=”http://www.usanetsolutions.com” title=”USA Net Solutions”>usa net solutions</a> 

  • Alex

    very good information here <a href=”http://usanetsolutions.com/index.php/news/wordpress-miami/” title=”pembroke pines web design”>pembroke pines web design</a>

  • Federico Bucchi

    Good demo and very fast script!

  • 八戒

    good job and share it
    at http://www.arqi.cc

  • Melmuler

    Love this menu! But when I added it to my site, it got super slow in IE. Any idea why this may be happening? Looks fantastic in all other browsers.

    http://www.clubwoodside.com

  • adumpaul

    Great article.Nice looking this dropdownmenu.Thank you for sharing.

  • http://www.mediacore.co.nz Auckland Website Design

    Cool, will let out team know about this one. Always searching for new cool development gems.

  • anonymous32

    If you are going to insult someone, you should probably use proper grammar so that you don't look like the idiot. 

  • www.wordpresssupportlive.com

    nice.. very usefull thanks alot.

    http://www.wordpresssupportlive.com

  • Anonymous

    I have used your dropdown menu, and it works fine in all browsers accept for IE

    In IE it only takes the first dropdown menu, but it places all the other menu's al to left under each other.. is there someone that can please help me with this?

  • sunil singh

    Thank You 

    The given Information on your blog is very useful.
     
    Visit :-<a href="http://www.ariestechsoft.net">Best seo training </a>

  • http://www.cyberdesignz.com/services/web-designers Professional web design

    awesome menu. 
    I really like javascript for designing these kind of things and dynamic page.
    Thanks a lot.
    and keep writing these kinds of scripts

  • Naveen

    Dreamweaver spray drop-down is cool and easy

  • Walt

    Tiny works great on Safari, IE, Chrome and Firefox but has this problem on Safari mobile as seen on both iPad and iPhone4S:  menus display and will clear when going to another menu but do not clear when cursor is taken off the menu.  I suspect either setInterval or setTimeout is not working on Safari Mobile.  Solution may be option to post some icon at beginning of menu strip that when clicked on causes the same effect as moving the cursor off the menu does.

  • adumpaul

    Nice article.Thank you for sharing.Really helpful.

  • http://www.facebook.com/profile.php?id=100000515578722 Andreas Wilson-Johnson

    I design responsive websites. I'm having a little issue trying to center the menu for a page that's 100% in width. Does anyone know a work around?

  • Madazrx4

    Anyone know what to edit, so that there is a background color change even if the menu item has no sub-menus on hover? 

  • Age_maniac

    The JS seems to work very nice and smoothly, however i have to say that CSS design is very poor, there is no description for what is what (although its not hard to understand), but there is a lot of redundancy… the width, height, and text font is set several times, while it could be all reduced to be set only once.

    Also, for a good design, the width should not be fixed, it should be more dynamic and adjust to the size of the container.

    These are just constructive comments, thanks a lot for sharing it, just giving my opinion on what can be improved ;)

  • Dobbs

    Works beautifully! Someday I'll code like you!

  • Al

    I like your little menu system. however when used with Lightbox, the Lightbox image comes up under the menu. I haven't figured out why it would be on top. I removed the "z-index:1000" styles but that didn't seem to do the job.

  • Al

    actually to tell yo uthe truth, it doesn't work with Lightbox. if Lightbox is enables, TinyDropdown doesn't function. [sigh]

  • http://top-sunglasses.org/ Oakleys

    ZDXGSHZNSZYK I like it very much!

  • Mepriti

    Thank You SOOOOOOOOO Much!

  • Yigitahmetsahin

    How can we use it as onclick attitude instead of mouseover

  • Anonymous

    I have noticed that when you don't have enough space for sublevels in window, they are not turning to left. I was using old version of menu when I did this, but I didn't see it is fixed in new version. So maybe you can fix that this way:

    1. add these parameters to every <ul> tag for sublevels:
        -data-level="1" or data-level="2"or data-level="3"… depending on level
        -data-parentid="____"  -id of parent <ul> tag
        -data-isturned="false"  -initially is false

    2. add function for determining position of <ul> element in window. You can use next one:
            function findPos(obj) {
                var curleft = curtop = 0;
                if (obj.offsetParent) {   
                    do {
                        curleft += obj.offsetLeft;
                        curtop += obj.offsetTop;   
                    } while (obj = obj.offsetParent);
                }
                return [curleft,curtop];
            }

    3. change "dd.prototype.st = function (x, f)" like this:
    dd.prototype.st = function (x, f) {
    var c = this.c[x], h = this.h[x], p = h.getElementsByTagName('a')[0];
    clearInterval(c.t); c.style.overflow = 'hidden';
    if (f) {
    //ADDED CODE
    if (c.attributes["data-level"].value > 1) {
    var winW = document.body.offsetWidth;
    var thisPos = findPos($("#" + c.attributes["id"].value)[0]);
    var isNodeTurned = $("#" + c.attributes["data-parentId"].value)[0].attributes["data-isturned"].value;

    if (thisPos[0] + 148 > winW || isNodeTurned=="true") {
    $(this.c[x])[0].style.left = "-148px";
    $(this.c[x])[0].attributes["data-isturned"].value = "true";
    }
    }
    //END OF ADDED CODE
    p.className += ' ' + a;
    if (!c.mh) { c.style.display = 'block'; c.style.height = ''; c.mh = c.offsetHeight; c.style.height = 0 }
    if (c.mh == c.offsetHeight) { c.style.overflow = 'visible' }
    else { c.style.zIndex = z; z++; c.t = setInterval(function () { sl(c, 1) }, t) }
    } else { p.className = p.className.replace(a, ''); c.t = setInterval(function () { sl(c, -1) }, t) }
    }

    By the way, your script for menu is great!!!
    All the best!

  • Shiva

    It is very nice and useful for me…..
    Thank you…

  • Elías Alfredo

    Hi, Can i how donate money?

  • http://redbonzai.com/ Nikki

    JavaScript menus affect search engine optimization.

  • lupa

    Sadly the tinydropdown.js code seems to interfere with .net javascript:__dopostbacks disabling them entirely.

  • Scott

    I googled for three days trying to find a JavaScript to include this TinyDropMenu in my html pages for an offline help desk. The traditional <!– include virtual="page.html"> won't work. I don't want to use iframe and I can't find an up-to-date JavaScript to include html page into another html page. Any help is greatly appreciated.

  • Maybe23332

    Hi guys, I found a way to make this a vertical dropdown, see this link http://www.codeofaninja.com/2012/04/vertical-tinydropdown-2.html

  • http://twitter.com/Tuxxin Daniel

    I'm using greybox with this script and the menu is layed over top of the greybox popup. Any ideas how to stop this?

  • Pcacesam

    change the z-indexes inside tinydropdown.css to something lower. By default it's set to z-index:1000 which is placing it way above anything else. 

  • Toño

    Hello the menu is great, but I have three problems someone could help me, one, I have my main menu and pass the mouse over any option, it remains active and not hidden, two, if two submenus, submenu1 this on submenu2 and has submenu1 several options, the options are active submenu2 and I can not see the options submenu1, three, all the menu stays on my website and I can not write on my textbox, greetings from Mexico.

  • ccaines

    Your menu could display gaps in the drop down if the user's IE browser is set to "compatibility mode". This bug usually shows up between a sub-level and lower sub-level menu after a "hover" mouse action occurs. It's annoying because the drop down closes if the user sends their mouse over the gap. I tried tweeking the js script and css a million times but I had no success.

    Tip: Add this meta tag in the <head> of your page.
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

    This meta forces IE8 browsers to ignore the user's compatibility view setting and render the submenus in native IE mode. Thanks to http://twigstechtips for the meta tag.

  • http://www.socialcubix.com/ Facebook Developers

    I have no words to express how useful your post was to me in completing my project work successfully. Thanks heaps.

  • Scottgray398

    nice blog

  • http://www.itgeared.com/ JM

    Nice blog and great job on this dropdown menu script. Works really well!

  • jeanii roonit
  • Maxisjay74

    Drop down  menu looks elegant. I'll give this a try in one of my sites. Thanks for the download link. You can have a look on some tools that I use in my site: http://web-development-tools.com/. I also review web development tools.

  • http://www.scriptiny.com/ Michael Leigeber

    Disqus generic email template

    Delete

    *From:* Disqus [mailto:notifications@disqus.net]
    *Sent:* Friday, May 25, 2012 10:32 AM
    *To:* michael@leigeber.com
    *Subject:* [leigeber] Re: JavaScript Dropdown Menu

    [image: DISQUS] <http://disqus.com&gt;

  • Dan Snook II

    How do I set this up for more than 5 main menu options… i have 7 but the last two show on a line below the others

  • S&M Infosoft

    nice
    http://www.sminfosoft.com/
    web design company|web design companies
     

  • http://twitter.com/mick541 Mikhail Yuslenko

    Замечательный ресурс я. использовал его на моем сайте http://www.sacrament-money.com

  • Sana Talha

    thanks for sharing some thoughts on java script
    http://bit.ly/KXrI9u

  • http://www.ios.waysandmeanstechnology.com/ iPhone apps development

    I like this dropdown menu. I also seek for more in different shape. Thanks

  • webintechs001

    Webintechs@Professional web development

    http://www.webintechs.com

    nice blog for web design

  • Chris Miller

    really nice blog for Hire Java Developers : http://www.xicom.biz/offerings/hire-java-programmers/

  • h00manb

    hi
    How do the level 1 is from up to down and level 2,3,… is from left to right?

  • Wildo

    Hello I am using your menu in Master page , I need to highlight the menu in the current page for example if i am in contactus.aspx the li should be highlighted

    Contact Us

    how can i do this? please help

  • Deena

    hey i love this design, thanks so much for creating this. i wanted to know though, if it's possible to close the dropdown with an onclick. its possible to do it to open the menu as well, in effect making the title a toggle button (all you do is in the tag for dt, change onmouseover to onclick), but when i try to add it to the dd tag (where i notice the cancelHide method is called by onmouseout, it won't work. anyone else try this out?

  • MaryAnne Beauduin

    I am not very good at scripting. I've tried using this and it works great except that I cannot change the size of the font for the menu items that are not a link but have links below them. It is so small that it looks funny on my site.

  • Linda Clark

    Java script is not crawled by major search engines, so I think one should make menu in plain HTML rather than using java script. But yes this post is worth reading because sometimes you are forced to use java script in navigation.

  • Ashwin

    Hey..thanks for this menu!
    I am using this on my sharepoint page using Content Editor Web Part. When I add this web part it disable all formatting on the page. Is there any workaround to this?

  • NewToJavascript

    I have two .master pages. The first master page is used for the pages at the root level. The second master pages is used for all pages in subfolders. When i try to link to the external javascript file in the second masterpage, i get a compliation error: Line 3: function T$(i) { return document.getElementById(i) }
    is undefined. Any thoughts on how to get around this?

  • saosangmo

    Hi, could I change event to click function?

  • mark

    i need a jQuery code that i could be able to reverse the menu from the right side if it goes to the right margin ??? i have a drop down menu where the sub categories flyies to the right side of the page which i annoying is there is a way to reverse that side if it has alot of cat?

  • http://www.iwebxpert.com/ Daisy Bono

    This is very nice so clean and elegant. Great post and hope to see more of what javascript has in stored for its users.

  • http://winterpatriot.com NJT

    woo hoo it works great

  • Kern

    Worked really well and easy to integrate into wordpress.

  • saeed saif alsaidi

    goof