jQuery Mobile - Navbars in headers

Description

You can add the navbar to the top of the page by adding the navbar container within the header block.

Example

Following example demonstrates the use of navbars in headers in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Navbars in headers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "header" style = "overflow:hidden;">
         <h2>This is Header</h2>
         <a href = "#" data-icon = "gear" class = "ui-btn-right">Options</a>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" class = "ui-btn-active">Home</a></li>
               <li><a href = "#">About Us</a></li>
               <li><a href = "#">Contact Us</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as navbar_headers.html file in your server root folder.

  • Open this HTML file as http://localhost/navbar_headers.html and the following output will be displayed.

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements