Create Navbar (Menus) in Jquery Mobile

by

Creating menus in Jquery mobile is very simple. The thing we have to do is, a simple documentation and use some data attributes.

Jquery Mobile Menu Example

  • Create a DIV container to list menu items in it. Add data-role=”navbar” attribute to design and convert its items on the menu. And another attribute to use is data-grid for the grid system for menus. Give its value according to the number of menu items.
    <div data-role="navbar" data-grid="a"></div>
  • Now, Use UL or OL tag to list items in it. The menus text should be in an anchor tag.
    <div data-role="navbar">
    <ul>
    <li><a href="#" class="ui-btn">Home</a></li>
    <li><a href="#" class="ui-btn">About</a></li>
    </ul>
    </div>

Example:-

<div data-role="footer" data-position="fixed">
      <!--start menu coding-->

        <div data-role="navbar" data-grid="b">
          <ul>
            <li><a href="#" class="ui-btn">Home</a></li>
            <li><a href="#" class="ui-btn">Menu</a></li>
            <li><a href="#" class="ui-btn">Next</a></li>
          </ul>
        </div>

      <!--end menu coding-->
    </div>

Insert icons in menus

Use data-icon attribute to insert an icon name in the anchor tag and data-iconpos attribute in the main container (navbar) for icon position.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery Mobile</title>
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>


  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
    <div data-role="main" class="ui-content">
    

    </div>
    <div data-role="footer" data-position="fixed">
      <!--start menu coding-->

        <div data-role="navbar" data-grid="b" data-iconpos="bottom">
          <ul>
            <li><a href="#" class="ui-btn" data-icon="home">Home</a></li>
            <li><a href="#" class="ui-btn" data-icon="grid">Menu</a></li>
            <li><a href="#" class="ui-btn" data-icon="arrow-r">Next</a></li>
          </ul>
        </div>

      <!--end menu coding-->
    </div>
  </div>

</body>
</html>

Leave a Comment