Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make Basic Navbar Using jQuery Mobile
A website or mobile application must have a navbar, commonly referred to as a navigation bar or menu. It is a vital component of the user experience because it enables visitors to access various areas of the website or app. In this article, we'll go through the steps for using jQuery Mobile to make a simple navigation bar.
A well-liked JavaScript library called jQuery Mobile is used to create mobile-friendly websites and applications. It's a great option for creating mobile apps because it offers a wide variety of user interface elements, like navbars.
Navbar utilizing with JQuery
A navbar widget from jQuery Mobile helps add buttons with optional icons to a bar. When the number of buttons exceeds the maxbuttons parameter, the navbar can accommodate an unlimited number of buttons by switching to several rows. As an alternative, if you select the morebutton option, the last button in the row will become a popup that includes the other buttons.
Approaches
To make a basic navbar utilizing JQuery UI the two methods
Utilizing the basic navbar in JQuery
Utilizing the basic navbar in JQuery UI with the navbar in the footer section.
Let us look into both approaches
Approach 1: Utilizing the basic navbar in JQuery
An unordered list of links enclosed in a container element with the data-role="navbar" attribute makes up a navbar. A link in the navigation bar becomes active (selected) when it is clicked. Before being added to the activated link, the ui-btn-active class is first removed from all anchors in the navbar. If this is a link to a different page, the class will be deleted after the changeover is finished.
Include class="ui-btn-active" to the matching anchor in the markup to make an item active when the navbar is initialised. To have the framework restore the active state each time the page is displayed, one can also add the class ui-state-persist.
Algorithm
To make a basic navbar utilizing JQuery UI follow these steps
Step 1 Add both the jQuery library and the jQuery UI library in the HTML section for adding data-role="navbar".
Step 2 With the help of an unordered list create navbar options. Utilize list tags and anchor tags.
Step 3 Set data-role="navbar", which can be utilized to build a basic navbar associated with JQuery UI.
Step 4 Add data-role="main" for the body part of the page, and add data-role="footer" for the footer part of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic NavBar with JQuery UI</title>
<!--Add link and scripts-->
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<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="page">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div data-role="main" class="ui-content">
<p>Body content</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Approach 2: With the help of JQuery add a navbar to the footer part
Inside the div tag with data-role as footer , place the navbar with the help of attribute data-role.
Algorithm
For representing a navbar in the footer part is given below
Step 1 Include required scripts for the jQuery library and the jQuery UI library in the section of HTML section as data-role="navbar"
Step 2 For the options in the navbar, add the contents in the unordered list with the list tags as well as anchor tags.
Step 3 Set data-role="navbar", which can be utilized to build a basic navbar associated with JQuery UI. Add navbar in footer section as under data-role="footer"
Step 4 Add data-role="main" for the body part of the page, and add data-role="header" for the header part of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic NavBar with JQuery UI</title>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--Add script for jQuery mobile-->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<!--Add header content-->
<h1>Basic Navbar using jQuery Mobile</h1>
</div>
<div data-role="main" class="ui-content">
<p>Body content</p>
</div>
<div data-role="footer" style="overflow:hidden;">
<!--Footer caption is incorporated-->
<!-- aligned text is made as center-->
<h4 style="text-align:center;">Footer Content</h4>
<div data-role="navbar">
<!--A list is encompassed in this segment -->
<!--Employ anchor tags for each items-->
<ul>
<li><a class="ui-btn-active" href="#">Home</a></li>
<!--Incorporate more items-->
<li><a href="#">Services</a></li>
<!--Incorporate more items-->
<li><a href="#">About</a></li>
<!--Incorporate more items-->
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
Conclusion
For mobile websites as well as applications, jQuery Mobile provides a speedy efficient technique to build a navigation bar. This article's instructions will help you rapidly use jQuery Mobile to build a simple navbar. Also, by utilising numerous jQuery Mobile widgets and including your own CSS styles, you may further personalise the navbar. JQuery Mobile is a great option for building mobile-friendly websites and applications because of its user-friendly interface components.
173 Views
