The panel is created for menus documentation on a webpage for mobile. The opened panel can be closed by a left or right slide.
data attributes for panel
| data-role="value" | Value | Description |
|---|---|---|
| data-role="panel" | panel | Used for creating panel container |
| data-display="overlay" | overlay and push | When overlay value is defined then the panel will display the above content. When push then it will push the content in the left or right direction. |
| data-position="right" | left and right | Defines the direction of the panel. When the value is right the panel comes from the right side to open |
| data-swipe-close="false" | true and close | The panel can be closed by a swipe action. To disable swipe-close action give a false value. |
| data-theme="b" | "a" and "b" | a is for a classic theme and b is for an inverse (dark) theme. |
| data-dismissible="false" | true and false | After opening the panel, when you click outside of it on screen, it will be closed. To prevent it use false value. |
To make the panel opened when you click on the menus icon. Give an id value to the panel and use it in the menu icon's anchor.
Panel Code:-
<div data-role="panel" id="menu" data-display="overlay">
<nav>
<ul>
<a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
<a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
<a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
<a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
</ul>
</nav>
</div>Insert Footer in Panel
<div data-role="panel" id="menu" data-display="overlay">
<nav>
<ul>
<a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
<a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
<a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
<a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
</ul>
</nav>
<div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
</div>Insert custom icon to close panel
Insert it just after panel container.
<div data-role="panel" data-theme="b" id="menu" data-display="overlay" data-swipe-close="false">
<a href="#menu" data-relation="close" class="ui-icon-delete ui-btn-right ui-btn-icon-notext">Close</a>
<nav>
<ul>
<a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
<a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
<a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
<a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
</ul>
</nav>
<div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
</div>Final code for panel
<!DOCTYPE html>
<html>
<head>
<title>Tabs - Jquery Mobile | Jaischool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#page{background:white;}
#header{background:purple;}
#header .ui-btn{
background:inherit;
color:white;
text-shadow:none;
border:none;
padding:8px;
}
#header .ui-btn:focus{
-webkit-box-shadow:inherit;
-moz-box-shadow:inherit;
box-shadow:inherit;
}
#header .nav-icon{font-size:20px;}
#header #brand-name{
font-size:20px;
margin-left:5px;
}
#toolbar i{
font-size:18px;
color:white;
-webkit-text-shadow:none;
-moz-text-shadow:none;
text-shadow:none;
}
#menu .ui-link{
text-align:left;
}
#menu .ui-btn{
background-color:inherit;
border:none;
box-shadow:none;
padding:8px !important;
margin-bottom:10px;
}
#menu .ui-btn:focus{
box-shadow:none;
}
#menu ul{padding:0;}
</style>
</head>
<body>
<div data-role="page" id="page">
<!--start panel coding-->
<div data-role="panel" data-theme="b" id="menu" data-display="overlay" data-swipe-close="false">
<a href="#menu" data-relation="close" class="ui-icon-delete ui-btn-right ui-btn-icon-notext">Close</a>
<nav>
<ul>
<a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
<a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
<a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
<a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
</ul>
</nav>
<div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
</div>
<!--end panel coding-->
<div data-role="header" id="header">
<div class="ui-grid-solo">
<div class="ui-block-a">
<a href="#menu" data-role="button"><i class="fa fa-bars nav-icon"></i> <span id="brand-name">Jaischool</span></a>
</div>
</div>
<!--start toolbar grid-->
<div class="ui-btn-right" id="toolbar">
<div class="ui-grid-c">
<div class="ui-block-a"><a href="#" data-role="button"><i class="fa fa-bell"></i></a></div>
<div class="ui-block-b"><a href="#" data-role="button"><i class="fa fa-search"></i></a></div>
<div class="ui-block-c"><a href="#" data-role="button"><i class="fa fa-id-badge"></i></a></div>
<div class="ui-block-d"><a href="#" data-role="button"><i class="fa fa-shopping-bag"></i></a></div>
</div>
</div>
<!--end toolbar grid-->
</div>
</div>
</body>
</html>
Publish A Comment