This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.
<div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">HTML</a></li> <li value="1"><a href="#">User Interface</a></li> <li><a href="#">CSS</a></li> </ul> <div id="slide"></div> </div>
In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below.
menuSlider.init('menu','slide')This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.
February 24, 2013
February 3, 2013
Awesome! Realle, really awesome. Good examples of JavaScript Power, thanks!
Fantastic. I have been making a real mess of a mootools version of this lava lamp effect. This looks much much simpler.
Thank you very much.
if you change :
g=document.getElementById(k);
by :
g=document.createElement(‘div’);
g.setAttribute(‘id’,k);
m.parentNode.appendChild(g);
you can remove <div id=”slide”></div> in html
thanks for all your work
Wow, this is really cool stuff. Have you ever thought of creating your own javascript library? I use jQuery but it contains a lot of functions i would never use. If i had all your functionality in one library it would cover most of my needs for less advanced sites and be a tenth the size!
Nicely done. I like to read your articles.
Thanks for the suggestions/feedback.
@christophe – I debated whether to add the slider to the DOM with the JavaScript or not. Anyone interested can definitely grab your code. I will consider changing it when I update the script.
@Si – The thought had crossed my mind however I really do not have the time to support something on that scale. Perhaps with enough community support it would be possible. Will keep it in mind.
Really nice, working fine on Konqueror
On mouse-out the default position should be the last item you hovered over.
@Alex – I developed the script using Firefox 3.0 RC1 and am testing it right now with no problems. Shoot me an email with some more information as to what exactly you are seeing if you don’t mind. Thanks for reporting.
Just what I’ve been searching for. Thanks for all the hard work! Camxso
Very Nice! (They all are.)
I notice that each of the SliderMenus on this page are in iframes.
Have you tried writing these scripts to allow multiple instances on a single page? I am trying to re-write your Horizontal Accordion as a js class to allow this, will let you know if I succeed.
Keep up the good work
@nickg – I have had a couple requests for multiple instance support so I probably will be changing them around a bit to accommodate. Thanks for the feedback.
Thanks for you people you really make programming brilient.
I’ve used this in my menu here: http://bubblebean.org. Thanks so much! Camxso
Michael,
Your solutions are so light weight – my first reaction to making something like that would be to use jQuery or mootools. To put it in perspective, the smallest file size that jQuery compresses to is 30KB. If you’re not using jQuery for anything else but an effect such as this, use this solution instead!
Keep up the great work and I look forward to your future posts! This blog is on fire!
This inspired me to create a more expandable, vertical menu along the same lines yesterday… see http://fruise.googlepages.com/bookmarks.html
@Lee – Looks good. Thanks for sharing the link. In IE there does seem to be some jerking as you move through the links. Might want to look into it.
Yes, thanks… I had to kludge the positioning for IE (at least I can run it in Linux). I still haven’t worked out how you got the slider bar to actually show the text underneath through it – if I fix IE to add the slider to the body then it becomes solid which is useless. If it’s attached to the menu, the ‘absolute’ position becomes relative to the menu… How did you get the CSS to work to show the text through the slider? (-:
@Lee – It is a combination of the z-index on the slide and position:relative set on the parent. If you can’t get it working how you want shoot me an email and I will take a look at your code.
@Areta do Bern – Obrigado
This is SUPER-SUPER cool! I’m just wondering, can you do a version with a dropdown menu? ^ ^ hehe..
Thank you!
you use :
document.onmousemove = this.pos;
if in the site you have another onmouseover declaration, yours will block the new one.
can you fix this?
@gio – This script down not use onmousemove, perhaps you are referring to the tooltip script? If so shoot me an email with a link so I can take a look at the conflict and find a compromise.
This is awesome mate, I too want to use multiple menus – so I’m trying to modify your code, I suspect you’ll beat me to it though.
I’m trying to modify your menu to have sub-menus appear horizontally below, it would be the perfect menu on the web then!
Bello, semplice, compatto. Molto utile per piccoli e grandi lavori. Complimenti!
Great work. I just modified a little bit to support multiple menus in a page, also support click to set the “menu selection”:
<pre>
var menuSlider=function(){
// usage: onload=”menuSlider.init(‘menu1′,’slide1′);menuSlider.init(‘menu2′,’slide2′)” /
var q=8; //delta width
var i=8; //delta time interval (ms)
var sliders=[]; //all share the sam idx;
var ms=[];
var intervals=[];
return{
init:function(menu,slider){
var g=document.getElementById(slider);
var idx = sliders.indexOf(g);
if(idx !==-1) return; //already initialized
sliders.push(g); idx=sliders.length-1;
var menu_items=document.getElementById(menu).getElementsByTagName(‘li’);
ms[idx]=menu_items[0];
for(var i=0, L=menu_items.length;i<L;i++){
var c=menu_items[i]; if(c.value==1){ms[idx]=c;}
c.onmouseover=function(){menuSlider.mo(this, idx)}; c.onmouseout=function(){menuSlider.mo(ms[idx], idx)};
c.onmousedown=function(){ms[idx]=this;return false};
}
g.style.width=ms[idx].offsetWidth+’px’;
g.style.left =ms[idx].offsetLeft +’px’;
},
mo:function(d,idx){
clearInterval(intervals[idx]);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
intervals[idx]=setInterval(function(){menuSlider.mv(el,ew,idx)},i);
},
mv:function(el,ew,idx){
var g=sliders[idx];
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!==el||w!==ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left =(l+li)+’px’}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+’px’}
}else{clearInterval(intervals[idx])}
}};}();
</pre>
#note: those who want to support older version of browser, may need this Javascript extension: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:indexOf
Thank you, this is an awesome effect and very easy to implement.
I am running into one problem when using it. It seems to prevent .png fixes for transparency in IE6 from working. I’m no javascript coder, so have no idea where to look. I’ve confirmed that when I remove the body onload the png fix works, when it’s there no dice. I’m currently using Supersleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6). I’ve also tried a few of the other fixes and none seem to work with the menueffect enabled. Any ideas?
And thanks again for this and all the other awesome scripts you’ve made available.
@AC – Thanks for sharing, I will look over you code later on.
@Windy – You can email me a link to check it out but it is probably due to multiple onload events. You would need to wrap both events in one global onload function. Hope that makes sense.
Definitely makes sense. I’d puzzled that out as the probable culprit and started hunting for solutions when you responded. I’ve been poking around for some Global Onloaders on the web so I can have one js get called onload that does all the separate functions. I’ve found a couple variations online. Is there any you’d recommend? Thanks again for the great tools and help. You should put a donation link up so we can at least buy you lunch for all the great stuff.
@Windy – If you only have a couple you could do something like…
window.onload = function(){
function1();
function2();
}
is there any way to use an id instead of value=”1″ for the active tab? trying to integrate this to joomla menu system, in the active <li> tag i have <li id=”current”>.
And do you have any idea why the slider is moving so slow when integrated in joomla?
Love your site by the way!!
Michael, Thanks for the email reply! I ended up scrapping the original yacht site and now am building one using these sliding menus. They work great for me on all browsers except IE. I know that it works on IE “as-is” but as soon as I wrap it in a containing div and lengthen the menu bar, I end up having problems (on IE). It seems that the text move relative to the slider. It could be something entirely trivial, but I can’t seem to figure it out regardless. Any thoughts? Here is the site: http://www.yachtpartnership.org
@Parker – Looks like a CSS issue, shoot me a zip of the files and I will look into it.
I assumed it was a CSS issue as well, but could not find it until about 10 mins ago. I had text-align: center in the Body definition for some reason. This was shifting the list on the sliding Nav. Thank you for the help!
Dear Michael,
I have issue that i need load the menu based on user id, so i have 5 different menu category to load based on user. what will be right way to use this sliding down menu. As of now im using some menu its supporting XML as datasource. but im very much impressed with ur menu… plz try to give a solution that how i can go forward using ur menu.
Thanks & Regards
Henrik, here’s how you can use an id=”current” instead of the value=”1″:
On line 8 change this:
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
To this:
var c,v; c=e[i]; v=c.id; if(v==’current’){s=c; w=c.offsetWidth; p=c.offsetLeft}
Amazing script Michael. I look forward to your future posts!
Is there a way to change the speed of the slide? I’m new to javascript so its tough to rap my head around it.
Thanks in advance.
@Ryan – The q and i variables at the top of the script will effect the speed.
hello, how you can add the messenger?
I leave you here, I need some help installing it on my blog, maybe you can do for me, and besides you can give me a few more tips: P
Please if you can add! here I leave the msn: mariano.143@hotmail.com
Sorry for my English, I’m argentine , and don’t speak their language, ’cause use a translator
or at least send a message explaining where each item goes on the page, I am novice in this CSS and HTML.
I’ve been looking for a menu like this for months!
please respond!
taquito
when used with Dynamic Image Gallery and Slideshow I can’t get the slide effect to work! Can you help? I think it has something to do with the onload event?
ok, I moved the onload event from the body to the image gallery js script, this works perfectly!
btw awesome scripts you’ve put online for all of us! thnx
I put it online check result http://www.extrasaus.nl thnx again
@windy I have the same problem I want to use a trans png and can’t get it to work, i’m using this png hack:http://www.twinhelix.com/css/iepngfix/
@michael: what is this and how to implement it? :
window.onload = function(){
function1();
function2();
}
@windy: I got my trans png working on ie6 with the htc hack i was using. Just had to initialize it by adding the li in the style section. Now however only the left side works the right corner is gone!
This is a great lil script, but I am having trouble getting it to work in IE (6&7), any suggestions? Here is the site I am trying to get it to work on http://www.back40internetinnovators.com/thepuzzleboy/index3.htm It works fine in FF and Opera but it throws the text and slider to the center of the page, and does not align them properly. I realize that this is probably my fault due to an error I made somewhere, but I have had no luck tracking it down.
Thanks much for any assistance or suggestions you may be able to provide.
@dreedenator – The function I referenced is an example of wrapping multiple onload events into one global onload function call.
@surelock – Looks the same in IE7 and FF to me so not sure what end result you are looking for. Email me if you like.
Awesome job…thanks a lot! It truly helps us lesser mortals with little or no knowledge of javascript
But i’m having a problem with aligning the slider and the text in the menu. (in IE 7)
css –>
.menu{
position:relative;
background: url(“yellow.gif”) repeat-x; */yellow.gif is 1×100 px/*
width:100%;
height:100px;
}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:7px }
.menu li {float:left}
.menu a{
font-size:12px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
text-align:left;
}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {
text-decoration:none;
color:#FFF;
padding:6px;
}
#slide {position:absolute; height:30px; background:#89957a; opacity:0.4;
filter:alpha(opacity=40); z-index:10}
markup–>
<div class=”menu”>
<ul id=”menu”>
<li id=”current”><a href=”#” >home</a></li>
<li><a href=”#”>pictures</a></li>
<li><a href=”#”>architectures</a></li>
<li><a href=”#”>my account</a></li>
<li><a href=”#”>how to</a></li>
</ul>
<div id=”slide”></div>
</div>
Awesome code snippet. It’s just what I was looking for for my new project. Thanks.
Thanks very much! Had you RSS’d and so found this. I wasn’t looking for something like this, but its so good I’m going to have to use it! TY!
Hi, i’m using ajax to expand content. How to highlight current item in menu using onClick?
ex. onClick getElementByID(‘id’).value = ’1′;
your CSS link doesn’t work properly in FF3 linux
It’s incredible what you can do with such a magnificent codestrip!
See the slider work on: http://www.playingwithdesign.com
It just gives the website that little something…
Thank you so much!
.s
Amazing script..Love your site…
Just sometimes the hover thing stops in the middle of two menu items..I mean its half on one item and half on the other one…I do not have a file upload capability otherwise would have shown you a screenshot..
Also I use wordpress nextgen gallery for displaying the slideshow and was wondering wat impact does this have on the show as I see the slide show is taking some time to load…
Is it possible to fit in your slideshow within wordpress page ? If yes how ?
I would also love (please)to see a mooflow script – that is if time permits you ! – Mooflow script like – http: // wp – superslider . com/ superslider/superslider-mooflow (Spacing for no link back)
This is great! Thank you so much for sharing. Question; can you show me (time permitting of course) how I can use this functionality and create a dropdown for each menu item? I would LOVE to be able to have the drop-down displayed horizontally… any ideas?
Hey! Omg, looks so awesome!
But is it possible to have the little stripe at the top, instead of having it at the bottom? And i now around about nothing javascript.
Thx
Did anyone find a fix for the transparent png files in IE6 – I’m using the menu and it works perfectly in IE7, FF and Chrome, but it’s a mess in IE6. No transparency and when the slider reach the mouse pointer it goes nuts.
You know you’re my hero!
Your gadgets are just too damn simple and nice.
My fix to show an active menu:
JS:
var menuSlider=function(){
var m,e,g,s,q,i,z; e=[]; q=8; i=8;
return{
init:function(j,k,z){
m=document.getElementById(j); e=m.getElementsByTagName(‘li’);
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.id; if(v==z){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
}
g=document.getElementById(k); g.style.width=w+’px’; g.style.left=p+’px’;
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+’px’}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+’px’}
}else{clearInterval(m.tm)}
}};}();
PHP:
$text .= ” <div style=\”width:700px; text-align=center;\” class=\”menu_top\”>\n”;
$text .= ” <ul id=\”menu_top\”>\n”;
$text .= ” <li id=\”menu_top_1\”><a href=\”javascript:database_order_select(1);\”>Время и место</a></li>\n”;
$text .= ” <li id=\”menu_top_2\”><a href=\”javascript:database_order_select(2);\”>Участники заказа</a></li>\n”;
$text .= ” <li id=\”menu_top_3\”><a href=\”javascript:database_order_select(3);\”>Финансовые расчеты</a></li>\n”;
$text .= ” <li id=\”menu_top_4\”><a href=\”javascript:database_order_select(4);\”>Проверка информации</a></li>\n”;
$text .= ” </ul>\n”;
$text .= ” <div id=\”menu_top_slide\”></div>\n”;
$text .= ” </div>\n”;
$text .= ” <SCRIPT TYPE=\”text/javascript\”><!–\n”;
$text .= ” menuSlider.init(‘menu_top’,'menu_top_slide’, ‘menu_top_1′);\n”;
$text .= ” //–></SCRIPT>\n”;
And now you can change active menu by:
menuSlider.init(‘menu_top’,'menu_top_slide’, ‘menu_top_1′);
menuSlider.init(‘menu_top’,'menu_top_slide’, ‘menu_top_2′);
menuSlider.init(‘menu_top’,'menu_top_slide’, ‘menu_top_3′);
menuSlider.init(‘menu_top’,'menu_top_slide’, ‘menu_top_4′);
I am a newbee and a freelancer, new to almost all the tool, I am yet to try this out but here is my thank you in advance.
Thank you very much for this! Your work is absolutely brilliant!
I have a question about this menu slider – how can i align it in the center of the page? setting div tag align=”center” and centering tables does not seem to work in firefox…
Your help much appreciated
Thank you.
Whether it is possible to insert in Joomla
I LOVE IT!!!
My friend needed a default item to be selected with the hover color and stay when you move the mouse away so I added the following:
STYLE:
.menu a:hover, .menu a:active, .menu a.default {color:#ffffff;}
CODE:
var menuSlider = function() {
var m, e, g, s, q, i;
e = [];
q = 8;
i = 8;
return {
init: function(j, k) {
m = document.getElementById(j);
e = m.getElementsByTagName('li');
var i, l, w, p; i = 0; l = e.length;
for (i; i < l; i++) {
var c, v; c = e[i];
v = c.value;
if (v == 1) { s = c; w = c.offsetWidth; p = c.offsetLeft }
c.onmouseover = function() { menuSlider.mo(this) };
c.onmouseout = function() { menuSlider.mo(s) };
}
g = document.getElementById(k);
g.style.width = w + 'px'; g.style.left = p + 'px';
menuSlider.mo(s);
},
mo: function(d) {
clearInterval(m.tm);
var el, ew;
el = parseInt(d.offsetLeft);
ew = parseInt(d.offsetWidth);
m.tm = setInterval(function() { menuSlider.mv(el, ew, d) }, i);
},
mv: function(el, ew, d) {
if (d != s)
s.all[0].className = '';
var l, w; l = parseInt(g.offsetLeft); w = parseInt(g.offsetWidth);
if (l != el || w != ew) {
if (l != el) { var ld, lr, li; ld = (l > el) ? -1 : 1; lr = Math.abs(el – l); li = (lr < q) ? ld * lr : ld * q; g.style.left = (l + li) + 'px' }
if (w != ew) { var wd, wr, wi; wd = (w > ew) ? -1 : 1; wr = Math.abs(ew – w); wi = (wr < q) ? wd * wr : wd * q; g.style.width = (w + wi) + 'px' }
}
else {
clearInterval(m.tm);
if (d == s)
s.all[0].className = 'default';
else
s.all[0].className = '';
}
}
};
} ();
In short, I'm passing along the element that the slider is moving to (function mv) and switch to the 'default' style if this is also the default element (s) when we started.
I also call function mo() in init() so that the default item has the correct hover color from the start.
GREAT CODE AND EASY TO FOLLOW!!!
PS My friend found this on a Russian language site because she is working in Ukraine and speaks Russian as a first language. SO, your code is famous world-wide!
This is fine but one problem here
problem = * {margin:0; padding:0}
for this code the whole pages table is not working cell padding
The slide.js seems to be conflicting with a jquery slideshow I have used on the same page. The slideshow is from (http://jonraasch.com/blog/a-simple-jquery-slideshow).
The sliding image seems to be slowed down by the fade transition rate of the slideshow?
Does anyone have a tip to fix this?
How difficult would it be to set the menu to make the default item the last clicked item.
I too think so, but I think that this does not quite fit
Trying to use the id=”current” instead of the value=”1″ and I used the mentioned code above:
On line 8 I changed this:
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
To this:
var c,v; c=e[i]; v=c.id; if(v==’current’){s=c; w=c.offsetWidth; p=c.offsetLeft}
Which made the slider disappear. I tried doing this with the sample files downloaded from the site…no changes to the css, and the only change to the html was changing value="1" to id="current".
Also what is the reason for the multiple z-index's on the .menu ul in the css?
I am getting a firebug error where "d" is undefined, I looked through the script.js and it isnt lying. I redownloaded your code as well and it seems to be the same.
Any idea's?
Actually forget my last post, I forgot to add the default link. I am curious as to how I can increase the speed that the background travels at?
Forget all my posts. Thanks for the great work! Keep it up!
Does anybody know why this menu (just vertical) dosent work in IE ? The submenu will not hide again … ?
Hi
i want to use this menu with drop down.
Is it possible?
Awaiting your answers ASAP.
Many Thanks
Shaheen
Some tip for mix this awesome with a dropdown menu???
And, it works very fast in Google Chrome… check it out.
Cheers!
Good example. Do you have similar code for vertical menu?
An easy way to make the menu active, in other words the slider stays on the item that has been clicked, is to introduce this code on line 9 after the onmouseover / onmouseout definitions:
c.onclick=function (){ s=this; };
This makes the highlighted item become the current one upon clicking
hi sir, for the active menu how can i change the font color to make it different than non active menu?
ty
Is there a way to combine the code from http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ with this one? Because I like this but also need a drop down menu
how to align it in centre? i m using tables (1003px) & i placed ur code in one of my TD. its working properly but whole page is left align. I want it CENRE aligned. plz help me. thanks for beautiful menu.
Michael, or anyone who knows Javascript, can you take a look at my test page http://digitalinvent.com/aqua/test.html i am having trouble getting the slider aligned to the actual menu texts. i don't know much about Java programing, or Action script, but i know enough to know that the alignment and positioning of the slider seems to be set by the internal slider javascript. Note that i have no trouble setting it's vertical offset by using #slide { position:absolute; top:; }, but i've tried using the same method like #slide { position:absolute; left:300px; }, or at the HTML individual item style level, none of it works. i tried using different positioning properties for #slide {} but fixed doesn't work, neither does float.
Where in the javascript can i add/edit to make it offset to the right by EXTRA 350px.
this is an awesome simple script, can't believe how simple it is. and it'll be great if i can get it to work. thanks. In case i loose track of this blog, my email is howzz1854@gmail.com. thanks so much. awesome job again.
Thank you Michael for responding to my email so quickly. Although your suggested solution didn't work for me. But you did point me to the right direction. I wasn't able to use CSS Float:right;, since doing that renders layering unusable. I figured out that i had change my menu <div> from CSS Float property to "absolute" so the js script could properly register the width and position.
thanks so much. hope to see more of your programing soon.
Hi, first of all, this is great – thanks!
Just wondered if there was a solution to the problem 2 others above have had coz I'm having the same: sam on January 27, 2010 at 12:44 am and Supratim on July 30, 2009 at 12:25 am. It does seem to be a problem with the * {margin:0; padding:0} code, but after 2 days, cannot find a fix
Thank you for this great little script. My only problem is…. is it possible to make it so that on mouseout the slider will dissapear if there is no value=1. Right now it stays on the last one that was hovered over, but i would like it to dissapear. The main problem is if you mouseout real quick the slider can get caught inbetween list items and looks janky.
Thanks!
Hey, thanks for sharing this, its easy to use the script. Hope to see more useful posts from you.
Awesome thanks for the script I am going to use this
thanks for sharing
This is excellent! I did have a question though. I have a Flash movie (with a preloader of course) on one of the pages, because of the video, the page takes an extra second to load. I was wondering if there was any way to call the menu slider with $(document).ready instead of using onload in the body tag? Thank you!
Nevermind, I figured it out, and using $(document).ready to load the menu was much faster on my page. Its definitely the way to go for image or Flash heavy pages. Here is the code for anyone else though.
<pre>
<script type="text/javascript">
$(document).ready(function(){
menuSlider.init('menu','slide')
});
</script>
</pre>
hey i have question regarding the menu script .
first of all Thanks for making good script
i am using your script on my site and i want display the current position of slider
like in the sens
when the user click html menu then the slider should stay on the html
can we tell me how should i do that ?
if you reply me asap then thanks a lot i appreciated
Thanks ..
Thanks for the fantastic code.
Is there any way I use it to slide a png/gif image? I am trying to implement a photo-realistic slider selection.
Awesome Work.. you people really make programming brilliant. Keep it up..
Hi,
Thanks for it make nice and short script.but i have problem. here is it
i am using the background image on slider look the image its look bad ?
can anyone tell me why it is look this ?
Thanks
did anyone ever manage to figure out the simplest way to have 2 or more instances of this on the same page?
Hey man,
thanx for the great work. This is defintly what i was searching for.
The only thing i need is to have an active status on each page. Do you have a solution for this, too? I coludn`t find a post that was working on this problem.
Here is the Link to my work: http://www.growingdetail.de/demo/index.php
Thanx for your help.
I found an easy way to mark up the actives. You only have to say to <li> that it is value=1 on each page with the body id="example". Here is the code:
<ul id="navi">
<li class="ind" <?php if ($bodyID == 'index') echo ' value="1" ' ?>><a href="index.php" class="ind">start</a></li>
<li class="wor" <?php if ($bodyID == 'work') echo ' value="1" ' ?>><a href="work.php" class="wor">work</a></li>
<li class="bio" <?php if ($bodyID == 'bio') echo ' value="1" ' ?>><a href="bio.php" class="bio">bio</a></li>
<li class="lin" <?php if ($bodyID == 'links') echo ' value="1" ' ?>><a href="links.php" class="lin">links</a></li>
<li class="con" <?php if ($bodyID == 'contact') echo ' value="1" ' ?>><a href="contact.php" class="con">contact</a></li>
</ul>
It works….!
hello there
i'm trying to use this script in a dynamic wordpress menu system where i want the js to highlight the current page
http://www.inteoria.net/bevisibleplus
basically i need to be able to add the value=1 to the current page.
any idea?
It's a little off in Chrome – too short?
This is very cool, the code is just simple …
thanhk ! beautiful… !
any chance u have a version of this which i will work with a drop down menu like this http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
?
hi, this is very cool and easy script..i used in my site look at
http://www.1-800-optisource.com
but how can i set slider to the current page menu ?
i mean its show the current on first menu (chemistry) of the navigation bar when i click the machinery its should stay on it right ?
please help me guys …i am not good at javascript.
save my life….
its very urgent .
Thanks a lot…
Read the code in the large black box above, and the 2 lines explaining it just below that. The 'value=1' has to be on the link for that page, to keep the highlight there. Each of your pages has the 'value=1' on the same link.
Thanks Tom for reply me.when look at my script i did same thing .but i am using masterpage and when click navigation menu, page is dynamically generated so how to store the page value =1 ?
Just in case, that someone tries to do the same thing:
I did it like that – but doesn't perform on IE.
"
<div class="menu">
<ul id="menu">
<?php
$category = get_the_category();
$GLOBALS["category"] = $category[0]->cat_name;
$GLOBALS["parentcategory"] = get_cat_name($category[0]->category_parent);
/*if (!empty($GLOBALS["parentcategory"])) {
echo 'Debug Parent Cat: ' . $GLOBALS["parentcategory"];
} else {
echo 'Debug Cat: ' . $GLOBALS["category"];
}
*/
/*
$GLOBALS["category"] = get_the_category();
$GLOBALS["parentcategory"] = get_cat_name($GLOBALS["category"][0]->category_parent);
if (!empty($GLOBALS["parentcategory"])) {
echo 'Debug Parent Cat: ' . $GLOBALS["parentcategory"];
} else {
echo 'Debug Cat: ' . $GLOBALS["category"]->cat_name;
}
*/
?>
<li value="<?php if ( is_home() ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
<li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Sendung || $GLOBALS["parentcategory"] == Sendung) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/sendung/">Sendung</a></li>
<li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Neuigkeiten || $GLOBALS["parentcategory"] == Neuigkeiten) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/neuigkeiten/">Neuigkeiten</a></li>
<li value="<?php if ( is_home() == NULL && ($GLOBALS["category"] == Berichte || $GLOBALS["parentcategory"] == Berichte) ) echo'1'; ?>"><a href="<?php bloginfo('url'); ?>/category/berichte/">Berichte</a></li>
</ul>
<div id="slide"><!– –></div>
</div>
Thanks for the code Michael, I have adapted it on my portfolio site.
http://www.adapdivdesign.com
I really love and admire your work, Keep it up..
Many Thanks!
Pretty! You describe the topic very well. Thanks once again for the push!
<a href="http://web.kentostudios.com">Kentostudios</a>
Really .. amazing work ..Many many thanks to you for your great work.
I am trying to figure this out myself and i asked myself the exact same thing. Anyone have any answers?
Lovely slick code – is there a way to get this tied in with a dynamic wordpress site – i.e using wp_list_pages()
Cheers.
Thank you very much.
thank you
thanks a lot master.. By Logico
thanks
thank you
Hallo…! it's very good your kontens and thank's very much
Cool Man!! Thanks 4 sharing!!
The best part it is light weight which did not make website slow, thank you
This is really a great share ,Appreciate it for sharing good work keep it on.
Thanks
Great menu… I adapted it for a site I am building… however, how do decrease the space between the list and the slider? It is like 2" below my menu.
Awesome. I really like this menu and I found it long time ago and finally got it.
Thanks for sharing
Is there a way to make the line slide on the top instead of the bottom? thanks
Never mind, I got it!
Thanks for this cool script!
One question: is there a way to replace the value tag? Now it is not valid html5!
Value tag is deprecated. Use styles instead.Specifies the value of a list item. The following list items will increment from that number (only for <ol> lists)
http://www.tripledesign.nl
sdf
Great
Hi,
How to work this for RTL( right To left ) menu .
Thanks.
The script is very helpful with my current project. Thanks a lot.
It is very nice and useful for me…..
Thank you…
can u adapt this code to work with spry menu bars
great…..http://www.i-design.hostoi.com
pls anybody give me an idea to locate thjs in vertical menu
How can I add "drop down" to the first one?
Thanks for such a slick navigation. Love it.
I am having one issue. When I embed an iframe further down in my page, the slider disappears. Only seems to be an issue with Chrome. Has anyone else had issues with this? Is there a solution?
Thanks for the code! I changed the onmouseover with onclick to meet my requirements. But right after I click on a menu, the slider highlights it and then disappears within a second. I'll appreciate if someone share a solution.
Very nice code. and simple to. Never would have thought of something like this!
Nice function indeed, is it also possible to make it slide only once you've clicked and not before and without removing your mouse?
I've tried this:
c.onclick=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)}; c.onclick=function (){ s=this; };
But this way you have to remove your mouse first in order to make it slide.
I fixed it by just leaving:
c.onclick=function(){menuSlider.mo(this)};
and remove the rest!
Not sure if this is helpful to anyone, but I noticed an error when there is no active menu item (in my case a 404 page that doesn't exist in the menu). To fix this I changed the code so that the slider disappears when you hover off the menu (as there is no active item to move to). I changed the mo function as follows:
mo:function(d){ clearInterval(m.tm); var el,ew; if( d){ el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth); } else { el=0; ew=0 } m.tm=setInterval(function(){menuSlider.mv(el,ew)},i); },
Small, smart and slick! Very nice indeed, perfect for my needs!
Is there a way to make it return to <li> with specific "class" instead of "value"?
Because if there is it will be great for the wp_nav_menu that automatically
gives the current page <li> a class of "currentpage-item"…
great, thanks, really helped