Press "Enter" to skip to content

Simple Responsive Popup Menu Plugin | jQueryPopMenu

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


See Demo And Download

Official Website(gucheen): Click Here

This superior jQuery/javascript plugin is developed by gucheen. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.