Horizontal - Menu Fly out

by Shankar

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div>
<div>
<button id="myButton" style="width: 100px; float:left; border:1px solid; height:100px; margin:30px; margin-right:15px">More (Click me)</button>
</div>
    
    <div id="myDiv" style="float:left; margin:20px">
        <ul>
			<li><a href="#">Calculator</a></li>
			<li><a href="#">Request Statements</a></li>
			<li><a href="#">Track Applications</a></li>
			<li><a href="#">Fast Apply</a></li>
			<li><a href="#">Self Service</a></li>
		</ul>
    </div>
</div>

CSS

/** Style for the body **/
 body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}


/** Style for the button & div **/
#myDiv {
    display:none;
    height: 150px;
}

#myDiv ul li { display: inline; }

#myDiv ul li a
{
    float:left;
    width: 100px;  height:100px; border:1px solid; margin:20px
    color: #fff;
    text-align: center;
    text-decoration: none;
}

/** Style for the cointainer **/
 #body {
    clear: both;
    margin: 0 auto;
    max-width: 600px;
	list-style-type: none;
}

JavaScript

$("#myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'left' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;

    $('#myDiv').toggle(effect, options, duration);
});