Creating A Mobile Menu Grid with jQuery and jQuery Mobile - Grid Menu
File Size: | 10.9 KB |
---|---|
Views Total: | 6521 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A menu grid containing 6 buttons designed for your mobile project, built on top of jQuery, jQuery Mobile and CSS.
How to use it:
1. Include the latest version of jQuery javascript and jQuery Mobile in your page.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
2. Markup Html structure.
<div data-role="page" id="grid-menu" data-theme="b"> <!-- Page header --> <div data-role="header" data-position="fixed" > <h1>3x2 Grid-Menu</h1> </div> <!-- Page header --> <!-- Page body --> <div role="main" class="ui-content"> <div class="ui-grid-a"> <!-- menu-container --> <!-- FIRST ROW --> <!-- 1st elem --> <div class="ui-block-a"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/1.png"> </div> <div class="menu-text"> Elem 1.1 </div> </a> </div> </div> </div> <!-- 2nd elem --> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/2.png"> </div> <div class="menu-text"> Elem 1.2 </div> </a> </div> </div> </div> <!-- SECOND ROW --> <!-- 1st elem --> <div class="ui-block-a"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/3.png"> </div> <div class="menu-text"> Elem 2.1 </div> </a> </div> </div> </div> <!-- 2nd elem --> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/4.png"> </div> <div class="menu-text"> Elem 2.2 </div> </a> </div> </div> </div> <!-- THIRD ROW --> <!-- 1st elem --> <div class="ui-block-a"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/5.png"> </div> <div class="menu-text"> Elem 3.1 </div> </a> </div> </div> </div> <!-- 2nd elem --> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <div class="menu-img"> <img src="img/6.png"> </div> <div class="menu-text"> Elem 3.2 </div> </a> </div> </div> </div> </div> <!-- menu container --> </div> <!-- .ui-content --> <!-- Page body --> </div>
3. Add the following styles in your CSS file or include the grid-menu-style.css
in your page directly.
.ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block-b a { width: 50%; } .ui-bar-a, ui-bar { margin: 0 auto; padding: 0; height: 90%; width: 90%; max-width: 500px; text-align: center; /* Gradient set-up */ background: -webkit-linear-gradient(grey, white); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(grey, white); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(grey, white); /* For Firefox 3.6 to 15 */ background: linear-gradient(grey, white); /* Standard syntax (must be last) */ /* Border set-up */ border: 1px solid white; border-radius: 5px; box-shadow: 2px 5px 5px #000; display: table; } .menu-elem { margin: 0; display: table-cell; vertical-align: middle; } .menu-elem a { text-decoration: none; } .menu-elem .menu-text { margin-top: 5px; font-size: 0.9em; text-shadow: 1px 2px #FFF; color: #333; }
This awesome jQuery plugin is developed by charliemc. For more Advanced Usages, please check the demo page or visit the official website.