Creating A Mobile Menu Grid with jQuery and jQuery Mobile - Grid Menu

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.