CODEWITHSUNDEEP
javascriptjqueryhtml
codingNightmares
codingNightmares

Reputation: 313

Navigation bar- animate a ul

I want to make a navigation bar with submenu's that slide out when clicked.

So I want to animate a unordered list when another unordered list item is clicked.

So i'm thinking something like: (excluding the CSS)

<ul id="menu">
  <li id="filemenu">File</li>
  <li id="reportmenu">Reports</li>
  <li id="toolsmenu">Tools</li>
  <li id="helpmenu">Help</li>
</ul>

<div class="fileSubmenu">
  <ul class = "fileSubmenu sm">
   <li>New</li>
   <li>Open</li>
   <li>Copy</li>
   <li>Print Setup</li>
   <li>Exit</li>
  </ul>
</div>

jquery:

   $(document).ready(function () {
      $("#filemenu").click(function () {
           $(".fileSubmenu").animate({left:'50px'});
      });
  });

So I would think that the entire 2nd list would slide to the right but it doesn't.

what do the experts suggest?

the basic structure http://jsfiddle.net/zLCWW/2/

Upvotes: 0

Views: 64

Answers (4)

Deryck
Deryck

Reputation: 7658

You just need to make your CSS positioning use something other than the default (which is static).

Here's a demo

CSS:

.fileSubmenu {
     position: relative;
}

If you have an affliction towards strictly using jQuery:

jQuery:

$('.fileSubmenu').css({'position': 'relative'}).animate({'left': '50px'});

Upvotes: 1

Ani
Ani

Reputation: 4523

Try this: FIDDLE

JS

 $(document).ready(function () {

    $("#menu li").click(function () {
        $( ".fileSubmenu" ).animate({
           width: "70%",
          marginLeft: "50px"
         }, 1500 );
    });
  });

Upvotes: 0

JayD
JayD

Reputation: 6521

Here is a great demo on building and animating a slide out nav menu. This is fixed to left side of screen but you can tweak it to your needs. Demo

Upvotes: 1

atreju
atreju

Reputation: 477

Try this one:

$(document).ready(function () {
   $("#filemenu").click(function () {
        $("div.fileSubmenu").animate({paddingLeft:'50px'});
   });
});

because with the left-attribute, you can only modify elements which are position:relative or position:absolute.

Upvotes: 1

Related Questions