Sliding Top Menu With jQuery

Sliding menus are very effective in areas where we have limited space .

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

Sliding Top Menu

And when opened:

jQuery Sliding Menu

Demo
Download

 

Click here to see the final working demo of this jQuery sliding menu.

 

Step 1 – HTML:

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn't this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

 

Step 2 – CSS:

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

 

With the CSS file there are few major points:

  • #slider has to be positioned absolutely, so it can overlay the other content.
  • #slider has a negative top-margin which hides it.
  • #sliderContent is positioned absolutely to not to crack the open/close buttons
  • #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({
                marginTop: "-141px"
                }, 500 );
            $("#topMenuImage").html('<img src="open.png"/>');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "0px"
                }, 500 );
            $("#topMenuImage").html('<img src="close.png"/>');
            $("#openCloseIdentifier").hide();
        }
    }); 
});
</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

  • it is nice 😉

  • This is a lot like the jQuery search box that’s documented at the Lullabot website: http://www.lullabot.com/articles/bitchin_search_box

  • saeed

    great .

    but it can be easer if you use slideToggle()

    http://docs.jquery.com/Effects/slideToggle

  • Thanks, very nice.

  • Umut M.

    @Christefane,
    Just checked it aand it is a nice implemantation too.

    @saeed,
    You’re right, with slideToggle() I could have done it without the openCloseIdentifier which already what the toggle is :). Missed that. Thanks

  • That looks great, thanks for code and tutorial!

  • Nice job with the tutorial! Two things you might want to consider with the CSS:

    1. Use position: fixed for #sliderWrap and then serve position: absolute to IE6 through an IE6-only stylesheet (using conditional comment) or with the “* html” hack. That way the top menu will always be visible to the user if he or she is using anything other than IE6.

    2. If other elements on the page have position (other than static), you might need to add a z-index property to #sliderWrap

    Keep up the great work with these tutorials!

  • This is a really cool jQuery menu. Thanks mate for sharing this.

  • This reminds me of the tutorial on web designer wall.

    http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

  • Nice little app there… does it play nicely with the major browsers out there?

  • Umut M.

    @Travis,

    Yes, looks similar with a difference, this one adjusts the margin of the menu rather than toggling. Result is the same.

    @Chris,
    I tested this with IE6, IE7, FF2, Opera & Safari at Windows and all are ok. For IE6 if you’ll use PNG you need a IE PNG fix hack.

  • Nice. But it just feels like this is crying to be draggable as well.

  • Cute, you might want to update this for when JavaScript is turned off.

    p.s. nice website

  • Eric

    Nice:)

  • yes very very nice.

  • Ben Rogerson

    The ‘Open it!’ link could be slightly bigger!

    #openCloseWrap a {padding:0 10px}

  • Thanks for the tutorial

  • Far out,
    Thanks very much for the code!

  • Pierre

    Hy, nice tool!

    Instead of open the tab by clicking i want to open that thing by mouseover and closed again when leaving the slider div.

    is that possible? i tried to write onmouseover instead of click, but didn´t work – i´m pritty bad in javascript 😉

    can we work that out?

  • jj

    Looks great, can it be placed any where on a page or does it have to be at the top?

  • @jj,

    Yes you can place it anywhere. You can even make it slide from left to right or else by playing with the margins..

  • Nice 😉

  • Tyler

    This is a cool tutorial, I used it and it worked at the first time.. very good!

  • bluejay00234

    hi is there a way to change the words “openit!” and “closeit! to something else?

    thx

  • @bluejay00234,
    That part is an image and you can simply modify it.

  • ash

    Nice work. Is it possible to move the menu to the bottom of the screen?

  • Thomas

    This is excellent! Nice work 🙂

    I am curious though…I have a flash movie I need in the header ID, but other than in Safari it floats over everything in all other browsers.
    Any Thoughts?

    Thanks!

  • Thirunavu

    its simple and very usefull…thanks for your codings…

  • suzy

    hey is it possible to have it working in the complete opposite direction from say the bottom of a fixed div or table so that it slides from the bottom up?

    Thanks in advance!

  • demetrius

    that it slides from the bottom up?

  • This is quite a cool slider.

  • Quite nice, it inspired me a lot.

  • Nice Tutorials, Thanks.

  • nimrod

    Great work 🙂

    Have anyone tried the slider while the jquery pngFix? I’m having problem using both at the same time.

  • Adam

    How can i make it Auto open at the start then they have to push close?

  • @Adam,

    Without adding or removing anything, add these after: $(document).ready(function() {

    $(“#slider”).animate({
    marginTop: “-141px”
    }, 500 );
    $(“#topMenuImage”).html(’’);
    $(“#openCloseIdentifier”).show();

    I believe this must do the trick.

  • very nice !!! but how to open top menu first ?

  • @xlife,

    Have you tried the code above?

  • thanks 🙂

    i’m tried

    this code after
    ————————
    $(document).ready(function() {
    —————————
    $(“#slider”).animate({
    marginTop: “0px”
    }, 500 );
    $(“#topMenuImage”).html(”);
    $(“#openCloseIdentifier”).hide();
    ———————————————

    question +

    how to upgrade for jquery-1.3.2.min

    thanks 🙂

  • @xlife,

    As far as I know, the functions used haven’t changed in jQuery 1.3.2. It doesn’t work with jQuery 1.3.2?

  • Hi

    This Works perfectly fine but wanted to know if I can do it 100% instead of fixing the height to hieight

    $(“.topMenuAction”).click(function() {
    if ($(“#openCloseIdentifier”).is(“:hidden”)) {
    $(“#sliderWrap”).animate({
    marginTop: “-659px”
    }, 500);

    instead of -659px I need it to adjust to the content . As My content would be comming dynamically

    please help me out

  • xlife again

    @Umut M.

    when i’am close this tab i can’t open it again
    // jquery 1.3.2

    problem with show(); ?

  • @padma,

    I would suggest that you get the height automatically with: http://docs.jquery.com/CSS/height function which will probably help you.

    @xlife,

    I truly can’t see a reason as tab open/close are both done with the animate function which still exists. Sorry for not being able to help there. Please update us if you get the reason.

  • Roxwell

    @Umut M & @xlife

    I cant get it working at all with jQuery 1.3.2,

    Any help with a fix would be much apprecitated.

    Many thanks

  • No, it is not working with 1.3.2

    Taking the downloaded demo and replacing the link to jquery with a link to the current version stops the demo from functioning.

  • bug 1.3.2

    jquery-1.3.2.min.js

    fine

    hidden=function

    hidden=function(T){return T.offsetWidth===0||T.offsetHeight===0}

    to

    hidden=function(T){return T.offsetWidth===0&&T.offsetHeight===0}

    —-

    http://dev.jquery.com/ticket/4374
    http://dev.jquery.com/changeset/6282

  • Apo

    For jquery 1.3.2 bug, add
    #openCloseIdentifier
    {
    height: 1px;
    }
    on css
    it’s because newest version of jquery consider as hidden elements without height or width

  • Thank you.
    Fix coded.

  • kirank

    hi ,

    its really nice , but i want on right side at same position( i mean in center ) how i can do that
    wht sort of changes i have to do ?

  • davelf

    hi, thanks for the code, but how to make the slider for multiple button, so in one page there’s more than 1 slider. where did i must customize?

  • Melissa

    This was asked but i’m not sure answered. I’d like to use this for each navigation item on a site i’m building,but i need it to slide down on mouseover and slide back up onmouseout/when focus on the menu is moved. Is this possible? I assume i’d just setup a unique div for each one – so i can have multiple sliders on the same page?
    Thank you.

  • Thanks. Look great n cool.

  • Wow… nice script…

    Thank You very much… for great script…

  • Hi guys. u say..”isn’t this nice?.” Yup. that really nice. Great scripts impression. Cool. Thanks 4 the script. Good work

  • Hi, I’d like to add a shoutbox into this but it shows below the open/close tab. I can’t seem to be able to adjust the height to keep the contents of the iframe hidden?
    P.S. Newbie here, just trying to learn some new stuff. :0) Thanks!

  • Hi guys..I came here for the second time. I also thinking..the example u show is by click. How about it’s open just on mouse over?

  • Hi guys

    I have just been preparing a new flash video for my homepage.

    I want to use this sliding top menu like a screen that is pulled down, and then have the video play on the screen after it slides. Any ideas how I could connect “Open it!” with the play button for the video, so it would start to play automatically after it slides down?

    Sorry if this is a crazy idea, but it would be awesome!

  • @Web Suunnittelu,

    That sounds like a nice idea.

    It is very easy to do, however you need to use a video player that can be controlled via JavaScript (like Flowplayer). So you can add the “video-start” function just after the line that slides the content.

  • This is the nice one

    Thanks Dear

  • Karl

    How can I transform the panel to slide down/up on mouseover/mouseout ?????

  • tom

    could you explain how to change the margins to get it moving horizontally please?

  • tom

    Thanks for the tutorial by the way, i got it working straight away. rad

  • Pravin

    Such nice !!!

  • cliche tip: adding a z-index:255 if the close button falls under e.g. a google ad.

  • coool thanks very much

  • leroy

    Earlier it was said that this slider can appear anywhere on the page. I have it placed under a table with a background image. How can I have the content hidden behind the table though and still be clickable? I have modified the z-index of both and have not found a solution.

  • leroy

    ^Nevermind… don’t know what I was doing wrong, but works now.

  • Stefan

    Nice, seems like a lot of unnecessary markup to me though.

  • @Web Suunnittelu

    U can use jw-player and use its API, very easy.

    Nice script btw 🙂

  • Nice script,

    This seems to work ok with most browsers but with with IE6 using ie7.js fix to fix pngs the it stops working? Any ideas why or what pngfix would you recommend?

  • Jay

    It’s nice, excellent work,
    and main thing is easy to use,
    Thanks.

  • raj vaghela

    excellent jquery work but my problem is that i can’t increase a menu height, so give a solution. I can tired the this problem. please give a solution.

  • @raj,
    You’ll need to update the height settings in CSS and also the marginTop value in JS.

    @Chris,
    Didn’t check with any PNG fix, IE7.js is also my favorite. Sorry, no suggestions that I tested.

  • Mary Zibro

    Is there a way to put multiple tabs acroos the top of the page that open seperate panels

  • @Mary Zibro,

    Yes sure, you need to duplicate the JS & HTML codes. And also, change the ids,classes.

  • James

    Hi,

    I am having a problem with this script where I have a wrapper element, then I have the drop down box floated to the right but my wrapper wont extend underneath the drop down menu, it just moves down onto another line ?

    Any Help ?

  • wow, I tested it, and it work this is the first time to use a jquery
    thanks

  • Kean

    Hi. Very nice indeed. What happen if I like to reserve the menu to the bottom of the page? I tried using positioning absolute I manage to get the content to slice up but not the button. Any tips?

  • you was right.

  • Richard

    Hey,

    Just a quick issue, because the menu is dropping down a navigation bar to parts of the first page. When i click close it takes me right back up to the top of the page. Is there a way to close it without the page going right back up to the top?

  • fritz

    How about an outline:none on the anchor tag, its annoying to look at after the first time you click it.

  • Nick

    How to make it slide from left side to right side on the left Navigation?
    What changes i need to make?
    Please help.

  • Nick

    Is it only working on div tag?
    Because when i use tr and td tag, it doesn’t work.

  • Thanks a lot for sharing the article. Was looking for a horizontal instead of vertical menu. But this article anyways solved my problem.

  • Is it working also for browser that no has Javascript activated ?

  • @yusuf,
    Nope. It doesn’t.

  • Yren

    Since I can change the manu to a wings to the right -> interesaria a lot of power extract for example the respuesto.

    Thank you very much in advance

  • freelancer

    Its nice. thanks for sharing.

  • Rob

    Is there an answer to positioning and having it come up instead of down?

  • Useful information..thx Thank You for having us
    excellent information, thank you thanks for the inspiration!

  • Great looking solution. I’ve ALMOST completed it, just can’t get it in hidden state when the page loads. The content div is visible. How can I resolve this? Any clues? Look at http://www.sunacnetreatment.com

    Thanks,
    Chris

  • Hello,

    this doesn’t seem to work with jquery-1.3.2.min.js, you can view my example here
    http://www.justinblayney.com/new/topslider.php

    if i switch it back to 1.2.6 it works, but my other scripts wont… 🙁

  • Great Tutorial. I have used on my site and works perfect. Check out ChillTip.

    http://www.chillwebdesigns.co.uk/chilltip.html

  • Thanks for this awesome menu, very unique tutorial,
    thanks…

  • Tyreal

    Hi,

    this is an awesome method for the drop down, however is it possible to Z-index it so that it comes from behind a different Div, i’ve been trying to achieve it butwith little success.

    Thanks

  • george

    Hi , This is good work from your side.
    But i need some more asist from you. I place it on header div the scroller want to run behind header. i use Z-index but inside content link are in active.

  • Umut, it would be good to fix CSS bug for jquery 1.3.2 in the download code itself. Thanks for the code though.

  • KK

    How to create multiple sliding menus in a page and have one of them close when the other one opens and all that? I have tried this but not successful!!! HELP !!!

  • Stephen C

    Trying to have it open on landing. Tried:
    “…
    Without adding or removing anything, add these after: $(document).ready(function() {

    $(“#slider”).animate({
    marginTop: “-141px”
    }, 500 );
    $(“#topMenuImage”).html(’’);
    $(“#openCloseIdentifier”).show();
    …”
    but there is a syntax problem and it won’t work. Could somebody please tell me “add after” what?

  • good good very good slide

  • Damn. Doesn’t work with latest versions of jQuery 🙁

    It does work well with 1.2.6 though at least.

  • Sorry, I take that back, it just doesn’t work with no conflict mode set on.

    The following code fixes that problem:
    var $ = jQuery;

  • Anders

    I saw this nice menu and implemented it. It works great and looks great for my purpose.

    But when I see the final result I realize that I probably need a dim out effect a la lightbox to go with this.

    I’m only a novice scripter and dont think I can make this happen on my own. Anyone here that could sink their teeth into this idea?

  • Anders

    I surprise myself. 🙂

    I made the dim out work using the code found here:
    http://buildinternet.com/2009/08/lights-out-dimmingcovering-background-content-with-jquery/

    Basically just add their class “alert” to the class “topMenuAction” like this
    a href=”#” class=”topMenuAction alert”

    Also add their close for the dim out to this script
    $(“#openCloseIdentifier”).show();
    $(“#dim”).fadeOut();

    Finally add the dim div and the ccs

  • George

    hai good work

    i need one more thing on that hide div if user click out side ant where. can any one help me.

  • sushil

    u gave script in 3 steps
    as i’m biginner in dis field can u please help me how to implement it
    thanku in anticipation

  • I try to install this menu to my website http://www.arcadedumper.com but dont work.
    Any suggestion, please?

    Thanks

  • @Marc,

    I think it will b e a good idea to use Firebug for detecting the issue (another JS can be causing a problem ,etc.).

  • Good work, mate!!!

    I was just looking for a slider menu…

    Oki

  • nice effects. what wouild be the code if it’ll be placed at bottom of page and slide out above the tab.

  • Parker

    Hey!

    I successfully modified the slider so that it goes from left to right, (by changing to marginLeft) however I need to click twice on the open button so that the effect starts. I know that if I change de marginleft: “0px” it will change but this is not exactly the best solution.

    Do you know how I could resolve this?

  • great man….good trick thanx

  • Very helpful jQuery code. I had a few problems with the menu in Internet Explorer at first but managed to sort it. It’s a great code to have for the future, thank you.

  • shashi

    slider not working in IE 8…

  • SH

    nice tutorial..i can use this for show/hide for some description. thanks.

  • Gem

    can anyone tell me how I work it in mouseover or on hover ..when i call it is looping

    please help me it’s urgent

    $(document).ready(function() {
    $(“.topMenuAction”).hover( function() {
    if ($(“#openCloseIdentifier”).is(“:hidden”)) {
    $(“#slider”).animate({
    marginTop: “-141px”
    }, 500 );
    $(“#topMenuImage”).html(”);
    $(“#openCloseIdentifier”).show();
    } else {
    $(“#slider”).animate({
    marginTop: “0px”
    }, 500 );
    $(“#topMenuImage”).html(”);
    $(“#openCloseIdentifier”).hide();
    }
    });
    });

  • @Gem,

    As hover event occurs everytime you move the mouse on the area, it’ll be very problematic.

    However, you can set a controller with values true/false and when the user first hovers the area, you can set it to “true” and disable the event if its “true”, etc.

  • Gem

    thanks for reply I am trying with assigning true false and
    also using .stop but the problem is not solving.
    please if anybody can help me its very urgent for me to
    do this in hover or mouseover

  • Its nice but would be more effective in Horizontal way.

  • Klas

    sry 4 the error msg. i have a problem when i use this and click on the open top menu. the menu drop down behind the header. Can i fix that in a easy way?

  • is it possible that the slider goes down with a mouse-over?

  • @Floris,

    That can be problematic or you must apply some contrl points to the code. Check the comments of @Gem.

  • Okay, but does anybody know how to do this?

  • Rex

    Nice tutorial, thanks for sharing =P
    @Klas,
    CSS will do the job, check out something called “z-index”

    @Floris,
    try to re-write the $(document).ready part; i didn’t test this out to see if it works, but i think u might need to give it a try to modify the function into several parts, like body onload=”your_function_part_one()” and set a counter or sth; then rewrite the and to make it like onmouseover=”your_function(variable)”

  • holyguackamolly

    I really like it very much. thanks for sharing.

  • atp

    thanks for this really nice tutorial but can you put the ‘hover’ Or ‘onmouseover’ version of the code
    it’ll be really helpful …
    tnx

  • Like it. But is it browser independent example?

  • Jessica

    Hi! I used this for the header and it worked awesome! But, I tried to use it for the footer as well, and it’s not sliding up. Here’s all my code.

    $(document).ready(function() {
    $(“.topMenuAction”).click( function() {
    if ($(“#openCloseIdentifier”).is(“:hidden”)) {
    $(“#slider”).animate({
    marginTop: “-125px”
    }, 500 );
    $(“#topMenuImage”).html(”);
    $(“#openCloseIdentifier”).show();
    } else {
    $(“#slider”).animate({
    marginTop: “0px”
    }, 500 );
    $(“#topMenuImage”).html(”);
    $(“#openCloseIdentifier”).hide();
    }
    });
    });
    $(“.footertopMenuAction”).click( function() {
    if ($(“#footeropenCloseIdentifier”).is(“:hidden”)) {
    $(“#footerslider”).animate({
    marginBottom: “-2px”
    }, 500 );
    $(“#footertopMenuImage”).html(”);
    $(“#footeropenCloseIdentifier”).show();
    } else {
    $(“#footerslider”).animate({
    marginBottom: “-125px”
    }, 500 );
    $(“#footertopMenuImage”).html(”);
    $(“#footeropenCloseIdentifier”).hide();
    }
    });

    #sliderWrap {
    margin: 0 auto;
    width: 1000px;
    position: relative;
    z-index: 99;
    }
    #slider {
    position: fixed;
    background:url(“../img/dashboard/header.png”);
    background-repeat:no-repeat;
    background-position: bottom;
    width: 990px;
    height: 180px;
    margin-top: -125px;
    }
    #slider img {
    border: 0;
    }
    #sliderContent {
    margin: 50px 0 0 50px;
    position: absolute;
    text-align:center;
    font-weight:bold;

    }

    #openCloseWrap {
    position:absolute;
    margin: 143px 0 0 930px;
    font-size:12px;
    font-weight:bold;
    }

    #header {
    margin: 0 auto;
    width: 1000px;
    height: 200px;
    padding: 10px;
    }

    #footersliderWrap {
    margin: 0 auto;
    width: 1000px;
    position: relative;
    z-index: 99;
    }
    #footerslider {
    position: fixed;
    background:url(“../img/dashboard/footer.png”);
    background-repeat:no-repeat;
    background-position: bottom;
    width: 990px;
    height: 180px;
    bottom: -125px;
    }
    #footerslider img {
    border: 0;
    }
    #footersliderContent {
    margin: 50px 0 0 50px;
    position: absolute;
    text-align:center;
    font-weight:bold;

    }

    #footeropenCloseWrap {
    position:absolute;
    left: 31px;
    top: 5px;
    font-size:12px;
    font-weight:bold;
    }

    #footer {
    margin: 0 auto;
    width: 1000px;
    height: 200px;
    padding: 10px;
    }

    Any and all help would be amazing!!

  • Jessica

    Nevermind I fixed that issue >.<. I closed the doc.ready early, and had some numbers mixed up.

    Is there anyway to have it not go back to the top of the page when clicked though?

  • Nice tutorial. You could add easing effects (check out jQuery UI) to make it more interesting, e.g. use the easeOutBack to make it bounce.

  • njasvi

    Is there anyway to have it not go back to the top of the page when clicked?

  • Michael M

    Hi! Love this function! Is there any way to make it mouseover sensitive? So if someone is in the general area the menu will expand? Thanks!

  • I think using toggle is a better alternative if you’re doing a fixed menu cause I was using your method, but if you’re scrolled really far down a long page and you expand/collapse the menu it takes you to the top of the page for some reason.

  • angel sanchez

    is just great, i need it but to come outside from the right side, how can i do that?

  • good stuff!!! thanks

  • Lovely posting.
    Thank you for sharing..

  • nj

    Is there anyway to have it not go back to the top of the page when clicked?

  • angelcz

    I works, but I can’t figure out how to re-adjust the position of the close.png.I want it to not slide with the slider.

  • angelcz

    Nevermind….I think I got it

  • Ranchesi

    Did somebody manage to place this slider on the right side? I want to make it look like on this theme: http://www.gallyapp.com/tf_themes/?theme=DK

    I managed to put it on the right side,but its not so good…
    Please,help! Thank you.

  • rhadeee

    Hello, thanks a lot for this awesome tutorial :D. I’m using this and I changed some stuff in there to fit my needs and the first time is loaded, or even after a page refresh the Open menu image seems as it’s missing, but as soon as I click it it looks normal untill I refresh the page.
    here’s what i did so far: http://rhadeee.voodoo.ro/slider/
    I’m not as good in css or html as some folks here so I can’t figure it out 🙁 . Any help would be appreciated. Thanks.

  • @rhadee,

    It seems like, in your HTML, rather than open.png, you should be pointing to menu.png.

  • rhadeee

    Aaahh man, I totally missed that line in the file. I feel even more stupid than earlier =D. Thanks alot, i’ll post a link to my portfolio when it’s finished if you’re interested ^^ (but i guess it’ll count as advertising so i’m not sure). I may post a deviantart link though . Bye now 🙂

  • Very nice jquery script. Thanks.

  • peter

    hi, not working in chrome and firefox. HELP!

  • Piotr Zakrzewski

    Hello,
    I used this cool slider for slideing menu from left. the only think that annoys me is that every time i click open/close the page goes to the TOP. any chance to remove that effect? I’ve looked in the code and cant see anythink. please help, I v alrerady adopted it for joomla and workin website.

  • Piotr Zakrzewski

    Hello again,
    I figured out how to prevent moving window to the TOP when clicked on “open/close”, simply remowe the <>
    from class=”topMenuAction” trigger.

    simply leave like this:

    if you need a pointer change css cursor: pointer.

    Yo!

  • Piotr Zakrzewski

    Hey, it cut out the code, You need to remove the href # element.

  • thanks for sharing! nice menu slide

  • hansengine

    Hi,

    this doesn’t seem to work with jquery-1.8.0.min.js

    if i switch it back to 1.2.6 it works, but my other scripts wont…

    somebody help me, please..

    thanks.

Search