Welcome to Designers Dairy blog here i have posted how to design the Drop down menu bar in
Mobile
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
function menu()
{
$('.show').hide();
$("#list-type").toggle();
}
$(function()
{
$('li').click(function(e) {
$('.show').hide();
});
$('.trigger').click(function(e) {
$('.show').hide();
$(this).next(".show").toggle();
});
});
</script>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#menu
{
background-color:#D3CCCC;
padding:8px 0px 8px 23px;
cursor:pointer;
margin:0px 0px 0px 0px;
}
#list-type
{
margin-left:23px;
display:none;
position: relative; float: left; margin-right: 50px;
}
#list-type li
{
display: block;
}
#list-type li a
{
font-size:13px;
color:#666;
line-height:30px;
padding:10px 200px 10px 0px;
border-bottom:solid 1px #ccc;
text-decoration:none;
}
.show li a
{
font-size:13px;
color:#666;
display:inline-block !important;
float:left !important;
padding:0px !important;
border:none !important;
text-decoration:none;
}
ul li
{
list-style-type:none;
}
.show
{
display:none; float: left;
margin-left: 80px;
margin-top:-30px;
width:100%;
}
</style>
</head>
<body>
<div id="menu" onClick="menu()"> Menu </div>
<div id="list-type">
<ul>
<li> <a href="#"> item1 </a> </li>
<li> <a href="#"> item2 </a> </li>
<li> <a href="#"> item3 </a> </li>
<li class="trigger"> <a href="#" > item4 </a> </li>
<ul class="show">
<li> <a href="#"> sub-item 3 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>
<li class="trigger"> <a href="#" > item5 </a> </li>
<ul class="show">
<li> <a href="#"> sub-item 5 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>
<li> <a href="#"> item6 </a> </li>
</ul>
</div>
</body>
</html>
Step3:
Output
Mobile
Step1:
We have to take backup our project files in virtual machine.
Step2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
function menu()
{
$('.show').hide();
$("#list-type").toggle();
}
$(function()
{
$('li').click(function(e) {
$('.show').hide();
});
$('.trigger').click(function(e) {
$('.show').hide();
$(this).next(".show").toggle();
});
});
</script>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#menu
{
background-color:#D3CCCC;
padding:8px 0px 8px 23px;
cursor:pointer;
margin:0px 0px 0px 0px;
}
#list-type
{
margin-left:23px;
display:none;
position: relative; float: left; margin-right: 50px;
}
#list-type li
{
display: block;
}
#list-type li a
{
font-size:13px;
color:#666;
line-height:30px;
padding:10px 200px 10px 0px;
border-bottom:solid 1px #ccc;
text-decoration:none;
}
.show li a
{
font-size:13px;
color:#666;
display:inline-block !important;
float:left !important;
padding:0px !important;
border:none !important;
text-decoration:none;
}
ul li
{
list-style-type:none;
}
.show
{
display:none; float: left;
margin-left: 80px;
margin-top:-30px;
width:100%;
}
</style>
</head>
<body>
<div id="menu" onClick="menu()"> Menu </div>
<div id="list-type">
<ul>
<li> <a href="#"> item1 </a> </li>
<li> <a href="#"> item2 </a> </li>
<li> <a href="#"> item3 </a> </li>
<li class="trigger"> <a href="#" > item4 </a> </li>
<ul class="show">
<li> <a href="#"> sub-item 3 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>
<li class="trigger"> <a href="#" > item5 </a> </li>
<ul class="show">
<li> <a href="#"> sub-item 5 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>
<li> <a href="#"> item6 </a> </li>
</ul>
</div>
</body>
</html>
Step3:
Output
No comments:
Post a Comment