CODEWITHSUNDEEP
layoutmenujquery-mobilecordova
Alon Gubkin
Alon Gubkin

Reputation: 57139

Menu Grid in jQuery Mobile

What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?

I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.

UI Example

Upvotes: 6

Views: 8768

Answers (3)

ms rafi
ms rafi

Reputation: 1

Use data grid "a"

Use the below one

    <div data-role="navbar" data-grid="a">

Upvotes: 0

Priyeshj
Priyeshj

Reputation: 1345

Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:

<div data-role='header' data-position='inline' role='banner' data-theme='f' >

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>

    <div data-role="navbar" data-theme='c'>
        <ul>
            <li><a href="" >
                Camera 
            </a></li>

            <li><a href="" >
                Wave 
            </a></li>

            <li><a href="" >
                Lock
            </a></li>


            <li><a href="" >
                Pencil
            </a></li>


            <li><a href="" >
                Star
            </a></li>


            <li><a href="" >
                Friends
            </a></li>

        </ul>
    </div><!-- /navbar -->
</div><!-- header -->

Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;

For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.

Upvotes: 0

Eddie Monge Jr
Eddie Monge Jr

Reputation: 12730

You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)

Upvotes: 0

Related Questions