Sliding Top Menu With jQuery

14°

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.

150 Comments
  1. Reply Belogradchik June 11, 2008 at 1:27 AM

    it is nice 😉

  2. Reply Christefano June 11, 2008 at 4:50 AM

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

  3. Reply saeed June 11, 2008 at 6:12 AM

    great .

    but it can be easer if you use slideToggle()

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

  4. Reply Vizor June 11, 2008 at 6:28 AM

    Thanks, very nice.

  5. Reply Umut M. June 11, 2008 at 8:13 AM

    @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

  6. Reply Make Money Talks June 11, 2008 at 8:27 AM

    That looks great, thanks for code and tutorial!

  7. Reply Karl Swedberg June 11, 2008 at 10:10 AM

    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!

  8. Reply Shreemani June 11, 2008 at 10:27 AM

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

  9. Reply Travis June 11, 2008 at 11:25 AM

    This reminds me of the tutorial on web designer wall.

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

  10. Reply Chris Fane June 11, 2008 at 11:55 AM

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

  11. Reply Umut M. June 11, 2008 at 2:44 PM

    @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.

  12. Reply Steven Black June 11, 2008 at 6:37 PM

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

  13. Reply smily June 11, 2008 at 7:21 PM

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

    p.s. nice website

  14. Reply Eric June 11, 2008 at 8:56 PM

    Nice:)

  15. Reply Gamer June 12, 2008 at 5:26 AM

    yes very very nice.

  16. Reply Ben Rogerson June 12, 2008 at 6:58 AM

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

    #openCloseWrap a {padding:0 10px}

  17. Reply imagehosting June 16, 2008 at 11:35 PM

    Thanks for the tutorial

  18. Reply rapid fire controller August 19, 2008 at 3:45 PM

    Far out,
    Thanks very much for the code!

  19. Reply Pierre August 21, 2008 at 3:58 PM

    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?

  20. Reply jj September 14, 2008 at 9:38 PM

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

  21. Reply Umut M. September 15, 2008 at 12:28 AM

    @jj,

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

  22. Reply Ali SEVİMLİ September 18, 2008 at 4:25 PM

    Nice 😉

  23. Reply Tyler October 10, 2008 at 9:33 AM

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

  24. Reply bluejay00234 October 13, 2008 at 1:56 AM

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

    thx

  25. Reply Umut M. October 13, 2008 at 2:06 AM

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

  26. Reply ash October 13, 2008 at 8:21 AM

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

  27. Reply Thomas December 17, 2008 at 6:47 PM

    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!

  28. Reply Thirunavu December 22, 2008 at 12:56 AM

    its simple and very usefull…thanks for your codings…

  29. Reply suzy January 5, 2009 at 7:23 AM

    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!

  30. Reply demetrius January 7, 2009 at 9:03 AM

    that it slides from the bottom up?

  31. Reply Rahul February 5, 2009 at 11:05 AM

    This is quite a cool slider.

  32. Reply Sklep Zoologiczny Wędkarski March 5, 2009 at 3:31 PM

    Quite nice, it inspired me a lot.

  33. Reply danreb March 11, 2009 at 10:51 AM

    Nice Tutorials, Thanks.

  34. Reply nimrod March 23, 2009 at 8:51 PM

    Great work 🙂

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

  35. Reply Adam March 27, 2009 at 2:19 PM

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

  36. Reply Umut M. March 27, 2009 at 5:43 PM

    @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.

  37. Reply xlife March 29, 2009 at 2:38 AM

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

  38. Reply Umut M. March 29, 2009 at 12:56 PM

    @xlife,

    Have you tried the code above?

  39. Reply xlife April 1, 2009 at 8:22 AM

    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 🙂

  40. Reply Umut M. April 1, 2009 at 10:12 AM

    @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?

  41. Reply padma April 1, 2009 at 2:29 PM

    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

  42. Reply xlife again April 2, 2009 at 2:18 AM

    @Umut M.

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

    problem with show(); ?

  43. Reply Umut M. April 2, 2009 at 4:33 AM

    @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.

  44. Reply Roxwell April 15, 2009 at 1:35 AM

    @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

  45. Reply SteveX April 17, 2009 at 4:16 AM

    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.

  46. Reply xlife April 19, 2009 at 12:02 AM

    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

  47. Reply Apo May 22, 2009 at 5:54 PM

    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

  48. Reply mehmet May 27, 2009 at 5:41 AM

    Thank you.
    Fix coded.

  49. Reply kirank June 12, 2009 at 8:13 AM

    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 ?

  50. Reply davelf July 9, 2009 at 4:39 AM

    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?

  51. Reply Melissa August 12, 2009 at 1:25 PM

    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.

  52. Reply hasfa August 23, 2009 at 11:27 AM

    Thanks. Look great n cool.

  53. Reply Mansur August 29, 2009 at 1:55 AM

    Wow… nice script…

    Thank You very much… for great script…

  54. Reply hasfa August 30, 2009 at 7:21 AM

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

  55. Reply Crystal August 30, 2009 at 3:11 PM

    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!

  56. Reply hasfa September 6, 2009 at 12:55 PM

    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?

  57. Reply Web Suunnittelu October 1, 2009 at 7:18 AM

    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!

  58. Reply Umut M. October 1, 2009 at 8:12 AM

    @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.

  59. Reply dinesh October 1, 2009 at 10:21 AM

    This is the nice one

    Thanks Dear

  60. Reply Karl October 7, 2009 at 12:19 PM

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

  61. Reply tom October 9, 2009 at 5:49 AM

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

  62. Reply tom October 9, 2009 at 6:13 AM

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

  63. Reply Pravin October 10, 2009 at 5:16 AM

    Such nice !!!

  64. Reply Edward de Leau October 11, 2009 at 6:57 PM

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

  65. Reply egypt web November 1, 2009 at 6:47 AM

    coool thanks very much

  66. Reply leroy November 1, 2009 at 7:11 AM

    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.

  67. Reply leroy November 1, 2009 at 7:13 AM

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

  68. Reply Stefan November 4, 2009 at 2:53 PM

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

  69. Reply iwanttobelieve November 26, 2009 at 5:01 AM

    @Web Suunnittelu

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

    Nice script btw 🙂

  70. Reply Chris December 23, 2009 at 9:35 PM

    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?

  71. Reply Jay December 24, 2009 at 1:36 AM

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

  72. Reply raj vaghela January 9, 2010 at 4:37 AM

    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.

  73. Reply Umut M. January 9, 2010 at 9:32 AM

    @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.

  74. Reply Mary Zibro January 28, 2010 at 4:34 PM

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

  75. Reply Umut M. January 29, 2010 at 2:46 AM

    @Mary Zibro,

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

  76. Reply James February 7, 2010 at 1:33 PM

    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 ?

  77. Reply egypt web designer February 12, 2010 at 6:57 PM

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

  78. Reply Kean February 14, 2010 at 10:30 PM

    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?

  79. Reply Universo February 19, 2010 at 11:42 PM

    you was right.

  80. Reply Richard March 10, 2010 at 8:24 AM

    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?

  81. Reply fritz March 10, 2010 at 3:16 PM

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

  82. Reply Nick March 10, 2010 at 10:38 PM

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

  83. Reply Nick March 11, 2010 at 1:38 AM

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

  84. Reply Parag March 22, 2010 at 1:38 PM

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

  85. Reply yusuf March 28, 2010 at 1:09 AM

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

  86. Reply Umut M. March 28, 2010 at 1:16 AM

    @yusuf,
    Nope. It doesn’t.

  87. Reply Yren April 1, 2010 at 7:53 AM

    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

  88. Reply freelancer April 4, 2010 at 8:09 AM

    Its nice. thanks for sharing.

  89. Reply Rob April 8, 2010 at 5:51 PM

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

  90. Reply Disain April 14, 2010 at 9:19 PM

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

  91. Reply Chris April 17, 2010 at 2:07 PM

    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

  92. Reply justinb April 30, 2010 at 10:35 AM

    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… 🙁

  93. Reply Chill Web Designs May 7, 2010 at 4:14 PM

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

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

  94. Reply Mados May 8, 2010 at 10:42 AM

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

  95. Reply Tyreal May 18, 2010 at 2:58 AM

    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

  96. Reply george May 19, 2010 at 6:32 AM

    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.

  97. Reply Punit Pandey May 30, 2010 at 4:00 AM

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

  98. Reply KK June 11, 2010 at 10:52 AM

    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 !!!

  99. Reply Stephen C June 14, 2010 at 10:59 PM

    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?

  100. Reply prem June 23, 2010 at 7:49 AM

    good good very good slide

  101. Reply Ryan June 26, 2010 at 12:44 PM

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

    It does work well with 1.2.6 though at least.

  102. Reply Ryan June 26, 2010 at 12:54 PM

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

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

  103. Reply Anders June 30, 2010 at 2:53 AM

    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?

  104. Reply Anders June 30, 2010 at 4:19 AM

    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

  105. Reply George August 3, 2010 at 5:41 AM

    hai good work

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

  106. Reply sushil September 8, 2010 at 4:28 AM

    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

  107. Reply Marc from arcade dumper September 11, 2010 at 7:24 AM

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

    Thanks

  108. Reply Umut M. September 12, 2010 at 7:15 AM

    @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.).

  109. Reply Erik September 12, 2010 at 9:39 AM

    Good work, mate!!!

    I was just looking for a slider menu…

    Oki

  110. Reply affordable web solutions September 13, 2010 at 11:21 AM

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

  111. Reply Parker September 19, 2010 at 1:52 AM

    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?

  112. Reply games October 1, 2010 at 12:32 PM

    great man….good trick thanx

  113. Reply Mandy Heating November 2, 2010 at 6:28 AM

    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.

  114. Reply shashi November 30, 2010 at 1:16 AM

    slider not working in IE 8…

  115. Reply SH December 10, 2010 at 4:39 PM

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

  116. Reply Gem January 27, 2011 at 1:54 AM

    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();
    }
    });
    });

  117. Reply Umut M. January 29, 2011 at 4:04 PM

    @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.

  118. Reply Gem January 31, 2011 at 11:24 PM

    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

  119. Reply Saurabh Gupta February 18, 2011 at 1:37 AM

    Its nice but would be more effective in Horizontal way.

  120. Reply Klas February 18, 2011 at 7:15 AM

    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?

  121. Reply Floris February 21, 2011 at 7:25 AM

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

  122. Reply Umut M. February 21, 2011 at 8:59 AM

    @Floris,

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

  123. Reply Floris February 21, 2011 at 10:37 AM

    Okay, but does anybody know how to do this?

  124. Reply Rex March 17, 2011 at 11:06 PM

    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)”

  125. Reply holyguackamolly April 19, 2011 at 8:56 AM

    I really like it very much. thanks for sharing.

  126. Reply atp May 25, 2011 at 3:47 AM

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

  127. Reply Zamshed Farhan June 26, 2011 at 5:14 AM

    Like it. But is it browser independent example?

  128. Reply Jessica July 1, 2011 at 10:01 AM

    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!!

  129. Reply Jessica July 1, 2011 at 10:14 AM

    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?

  130. Reply Refly July 24, 2011 at 12:13 PM

    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.

  131. Reply njasvi August 14, 2011 at 3:44 PM

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

  132. Reply Michael M August 19, 2011 at 11:13 PM

    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!

  133. Reply Michael M August 30, 2011 at 12:16 AM

    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.

  134. Reply angel sanchez September 14, 2011 at 7:06 PM

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

  135. Reply feathersdesigns October 11, 2011 at 7:00 AM

    good stuff!!! thanks

  136. Reply Mark Willam October 21, 2011 at 7:06 AM

    Lovely posting.
    Thank you for sharing..

  137. Reply nj November 11, 2011 at 2:23 PM

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

  138. Reply angelcz December 9, 2011 at 8:40 PM

    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.

  139. Reply angelcz December 9, 2011 at 9:09 PM

    Nevermind….I think I got it

  140. Reply Ranchesi January 6, 2012 at 10:36 AM

    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.

  141. Reply rhadeee January 9, 2012 at 8:14 AM

    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.

  142. Reply Umut M. January 9, 2012 at 10:01 AM

    @rhadee,

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

  143. Reply rhadeee January 9, 2012 at 11:09 AM

    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 🙂

  144. Reply biletji March 14, 2012 at 2:23 PM

    Very nice jquery script. Thanks.

  145. Reply peter March 30, 2012 at 6:18 AM

    hi, not working in chrome and firefox. HELP!

  146. Reply Piotr Zakrzewski July 27, 2012 at 11:39 AM

    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.

  147. Reply Piotr Zakrzewski July 29, 2012 at 1:52 PM

    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!

  148. Reply Piotr Zakrzewski July 30, 2012 at 12:07 PM

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

  149. Reply elive August 28, 2012 at 2:58 AM

    thanks for sharing! nice menu slide

  150. Reply hansengine September 11, 2012 at 12:25 PM

    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.

Leave a reply

Search