Simple Responsive Popup Menu Plugin

jQueryPopMenu is a responsive jQuery popup menu extension that allows a responsive menu panel to appear while the toggle is clicked. Based on jQuery 2.0.3. Chrome, Safari, Firefox, and Opera are available. No IE support.

popup menu in jquery, jquery menu examples with source code, jquery popup menu on click, jquery datatable context menu example, jquery horizontal menu, jquery ui menu example

Note: All icons on the demo page are based on FontAwesome and are not required. You can change it yourself.

How to make use of it:

1. Include FontAwesome CSS required from CDN.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>

2. Create HTML for a popup.

<div id="demo_box">
<div id="pop_ctrl"><i class="fa fa-bars"></i></div>
<ul id="demo_ul">
<li class="demo_li">
<div><i class="fa fa-home"></i></div>
<div>Home</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cloud"></i></div>
<div>Cloud</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cog"></i></div>
<div>settings</div>
</li>
<li class="demo_li">
<div><i class="fa fa-envelope"></i></div>
<div>E-mail</div>
</li>
<li class="demo_li">
<div><i class="fa fa-clock-o"></i></div>
<div>Clock</div>
</li>
<li class="demo_li">
<div><i class="fa fa-folder"></i></div>
<div>Files</div>
</li>
<li class="demo_li">
<div><i class="fa fa-heart-o"></i></div>
<div>Favourites</div>
</li>
<li class="demo_li">
<div><i class="fa fa-mobile"></i></div>
<div>Mobile</div>
</li>
<li class="demo_li">
<div><i class="fa fa-power-off"></i></div>
<div>Exit</div>
</li>
</ul>
</div>

3. Include jQuery javascript library and jQuery Pop Menu plugin at the end of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.popmenu.min.js"></script>

4. Call the function with the default settings.

<script>
$(function(){
$('#demo_box').popmenu();
})
</script>

5. Customize the appearance of the popup menu in JavaScript.

<script>
$(function(){
$('#demo_box').popmenu({
'controller': 'true',
'width': '100%',
'background': '#34495e',
'focusColor': '#1abc9c',
'borderRadius': '10px',
'top': '0',
'left': '0',
'iconSize': '100px'
});
})
</script>

simple jquery popup menu, jQueryPopMenu Plugin/Github, toggle menu with jquery