Jquery Mobile NavBar reflow

Question

Hi i have this navbar :

<div data-role="navbar" data-theme="c" >
            <ul>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
            </ul>
      </div>


</div>

I need to add a button "menu" if the screen of the device is to small for shows three button.

Something like this : http://img30.imageshack.us/img30/8634/o6c5.png

I know that I need to add a rule to the css but i don't how Please,Thanks you

Answer 1

You can check out how they do it in Twitters bootstrap. Basically you would have a media-query for a specific screen size, and format the page in that manner.

In fact, why don't you just integrate Twitter's Bootstrap and you'll get everything else you could run into: http://getbootstrap.com/

Check it out, it has everything you want/need.