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
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.
February 24, 2013
February 3, 2013
Fantastic work, Mike. It's running very fast and smoothly
You can todo the same with just CSS, why require Javascript !?
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.
Micheal thanks for script man GOD bless you
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.
Nice catch, not sure how that slipped past me. Will get it resolved today.
Right, and scripting always gives you more power when it comes to manipulating markup.
Very nice work!
Thanks, great job
Wonderful. I do not want must to use it.
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
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.
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??
Can I use the script in my template to sell ?
Sure, go for it.
Thanks, I link to your post.
I HIGHLY recommend hiding the whole thing in a closure so T$ and T$$ don't pollute the global namespace.
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.
What is the advantage to using JS instead of just CSS for a dropdown?
Cross browser animation and other effects.
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!
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.
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.
Really nice functional menu. Works really well Thanks for the post and the script.
Awesome, thanks
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/
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.
It is really very valuable coding for web developers. Nice post.
I need it vertical too!!
Thanks
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
thanks for posting this…………………
<a href="http://go4webapps.com/"> adobe reader 10 </a>
@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.
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).
@Mad_Man_Moon:disqus
http://rhpstage.ohmyhead.com/zenphoto/themes/rhp/styles/tinydropdown.css
http://rhpstage.ohmyhead.com/zenphoto/themes/rhp/javascript/tinydropdown.js
@Mike thanks so much! … my work firewall wouldn't let me see this, so I just got to it! – Mad_Man_Moon
I really thanks for providing such a valuable stuff!
Nice explanation about menu, i so much impressed with your way of explanation..
thanks for sharing…
Nice plugin. How would I get this to work so the menu would dropdown on a click instead of hover. Thanks in advance!
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.
Thanks for sharing this one..a nice and beautiful on mouse over very clean …I could use something like this..thanks for the post
Great! I would like to use it to see how my website looks.Thanks a lot!
web-designer at cnpintegrations.com
good reference for me……
kak dobavit eto ..pomagiteee pliss
This is an awsome tutorial, the demo looks sweet.
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.
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?
what do i have to change to make it a "drop up menu" ?
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
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>
gr8….great I like this blog …
I am a <a href="http://theweb-coder.com/">webcoder</a> ..so it help me ….
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.
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.
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)
Thanks God and for yuo man.
Thanks for sharing.
Very good plugin.
See ya.
L.
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)
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
innovative stuff presented here but I think that the way it is explained here is not at all understandable. It requires more explanation.
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?
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
Now that's some slick coding.
Now that's some slick coding.
Some very nice coding there.
Very nice plugin. Thanks for sharing it.
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?
hi
the dropdown menu is useful area in every website.It can make to use easy run any website.
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.
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
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
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
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)
很不錯的東東！
This was a great script, The steps are awesome. Already implemented and get good result.
Excellent script. Would like to refer it to my visitors at http://www.yocto-web-development.com
Great script, can't work out the variables though… which numbers are you supposed to change?
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.
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.
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.
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.
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.
Nice article with valuable inputs on menu scripting. Hope this article will help my developers a lot.
nice tutorial, thanks for this script
This was a great script, The steps are awesome.Thanks for sharing this tutorial.
Can you turn it into an onclick menu as well? This would be great for mobile devices.
I really like this script. Is there any way to make to top menu font larger while keeping the dropdown fonts small?
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.
nice script and blog you are sharing with us nice menu <a href="http://www.secrets-pour-succes.com/">Confiance en soi</a>
Great script!! but its over riding my fixed header…
can any one help please!! thaks for your time..
Great script!! but its over riding my fixed header…
can any one help please!! thaks for your time..
Same problem, in IE7 once you mouseover a menu and mouse out it continues to roll/unroll forever on its own. Any fix yet?
hi
Do you have a preferred manner of "Attribution"? As described in the creative commons license.
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.
Doesn't seem to work on IE7 too well.. unfortunately a whole bunch of people I know still use IE7
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.
its realy great thank you for your help
Just wanna say this is really nice, I'm implementing this on my site.
Good work guys
This is a great navigation script. I use it on my site and it works great! All major browsers compatible. Thanks guys!
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?
It is a big helping hand for me. thanks it is great work.
http://www.itconsultancyservices.com/
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
Great with disqus…
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
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.
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
this dropdown doesn't have a parameter to allow it to be horizontally oriented does it?
this is great man! but the right arrow is missing? i think that's great for UX.
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.
Thanks!
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/"> Numisma Technologies </a>
nice 1
i need to meet someone so to put me through, who can help?Type your comment here.
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/"> Receivables Management </a>
nice 1
<a
href='http://www.vistaprint.co.nz/'>website design</a>
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/"> Receivables Management </a>
Nice 1 ? are you fuking idiot ? those people provide us something free and you came out with vistaprint ? pendejo de mierda.
Very helpful post. Thank you for sharing!
hey love this blog<a href=”http://www.usanetsolutions.com” title=”USA Net Solutions”>usa net solutions</a>
very good information here <a href=”http://usanetsolutions.com/index.php/news/wordpress-miami/” title=”pembroke pines web design”>pembroke pines web design</a>
Good demo and very fast script!
good job and share it
at http://www.arqi.cc
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
Great article.Nice looking this dropdownmenu.Thank you for sharing.
Cool, will let out team know about this one. Always searching for new cool development gems.
If you are going to insult someone, you should probably use proper grammar so that you don't look like the idiot.
nice.. very usefull thanks alot.
http://www.wordpresssupportlive.com
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?
Thank You
The given Information on your blog is very useful.
Visit :-<a href="http://www.ariestechsoft.net">Best seo training </a>
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
Dreamweaver spray drop-down is cool and easy
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.
Nice article.Thank you for sharing.Really helpful.
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?
Anyone know what to edit, so that there is a background color change even if the menu item has no sub-menus on hover?
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
Works beautifully! Someday I'll code like you!
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.
actually to tell yo uthe truth, it doesn't work with Lightbox. if Lightbox is enables, TinyDropdown doesn't function. [sigh]
ZDXGSHZNSZYK I like it very much!
Thank You SOOOOOOOOO Much!
How can we use it as onclick attitude instead of mouseover
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!
It is very nice and useful for me…..
Thank you…
Hi, Can i how donate money?
JavaScript menus affect search engine optimization.
Sadly the tinydropdown.js code seems to interfere with .net javascript:__dopostbacks disabling them entirely.
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.
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
I'm using greybox with this script and the menu is layed over top of the greybox popup. Any ideas how to stop this?
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.
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.
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.
I have no words to express how useful your post was to me in completing my project work successfully. Thanks heaps.
nice blog
Nice blog and great job on this dropdown menu script. Works really well!
<a href="http://kasper-suits.com/13/handbags-and-other-accessories-to-select-with-your-kasper-suits/">this post</a>
I Love
your articles guys keep it up.
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.
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>
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
nice
http://www.sminfosoft.com/
web design company|web design companies
Замечательный ресурс я. использовал его на моем сайте http://www.sacrament-money.com
thanks for sharing some thoughts on java script
http://bit.ly/KXrI9u
I like this dropdown menu. I also seek for more in different shape. Thanks
Webintechs@Professional web development
http://www.webintechs.com
nice blog for web design
really nice blog for Hire Java Developers : http://www.xicom.biz/offerings/hire-java-programmers/
hi
How do the level 1 is from up to down and level 2,3,… is from left to right?
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
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?
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.
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.
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?
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?
Hi, could I change event to click function?
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?
This is very nice so clean and elegant. Great post and hope to see more of what javascript has in stored for its users.