jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?


Tags: jquery,css

Problem :

I have a jQuery toggle that slides a DIV up/down, but its content animates left to right. How can I prevent the content from animating left to right?

JS Fiddle: http://jsfiddle.net/CqREn/6/

CSS:

#myMenu ul{
    display: none;
}
#myMenu ul li{
    display: inline-block;
    width: 49%; 
}
#myMenu{
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgb(100,100,100);
}

JS:

$("#MenuToggle").click(function(event){ 
    event.preventDefault();
    $('#myMenu ul').toggle('slow');
});

HTML:

<aside id="myMenu">
    <nav id="MenuTab"><a href="#" id="MenuToggle">Page Navigation</a></nav>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ul>
</aside>


Solution :

toggle() simply toggles the showing/hiding, but doesn't specify how to show/hide. Try:

$('#myMenu ul').slideToggle('slow');

jsfiddle


    CSS Howto..

    How to show Bootstrap 3 popover scroll only when needed

    How to bring DIV2 to top WRT DIV1?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How to remove dropdown active color in bootstrap 3.0?

    Wordpress- How do i change the default font of navigation menu?

    How to make navigation bar of pure css slider?

    How to use different CSS in the same page

    jquery easyui TreeGrid: How to make only Column Headers Bold

    css how to only make bold fonts for first
      set

    How to create a list with three columns in a row by css and html?

    How to pass the output of CSS Selector to beautiful soup?

    how to add a different css to last mysql query result using php

    How to get a 2px wide border regardless of browser zoom with CSS

    Showing responsive menu link that is not shown in regular navigation menu

    How can i overlay an 10x10px image on top of another image?

    How to apply css to id generated dynamically?

    Why not show class css in email when using mail() php send mail to gmail?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to resize the images to have the same height in group while keeping aspect ratio?

    How do I use CSS to reposition this image?

    How to deal with DIV position and height

    How to draw scalable rectangles Ruby on Rails

    Can someone help me to know how I can make my layout work in small screen using css , css3?

    How to modify multiple elements of a block with BEM CSS

    How to make text to wrap image in editor

    CSS - 2 divs side-by-side, one floated - how do I make the other fit next to it without overlapping?

    how to bring two blocks closer

    How to only change left padding in javafx css

    how to indent html output using CSS