Copy this content to your HTML or PHP page and modify according to your requirement.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#toggle-view {
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:200px;
background:#999;
border-radius:15px;
border:1px solid #CCC;
}
#toggle-view li {
position:relative;
cursor:pointer;
list-style:none;
font-size:18px;
padding:9px 0px 9px 0px;
border-bottom:1px solid #ccc;
text-align:center;
`
}
#toggle-view ul{
background:#FFFFFF;
padding:0px;
margin:0;
}
#toggle-view h3 {
margin:0;
font-size:20px;
border-bottom:1px solid #ccc;
padding:5px;
background:#344da1;
color:#FFFFFF;
}
#toggle-view h3:hover {
background:#1f2e60;
}
#toggle-view h3:active {
background:#1f2e60;
}
#toggle-view h3:visited {
background:#1f2e60;
}
#toggle-view h3:focus {
background:#1f2e60;
}
</style>
</head>
<body>
<div id="toggle-view">
<h3 class="grow-link">Categories</h3>
<ul class="grow" style="display: none;">
<li value="best-seller">Best Seller</li>
<li value="charger">Charger</li>
<li value="memory">Memory</li>
</ul>
<h3 class="grow-link">Brands</h3>
<ul class="grow" style="display: none;">
<li value="Naztech">Naztech</li>
<li value="Spider">Spider</li>
<li value="Gemini">Gemini</li>
<li value="Reactor">Reactor</li>
<li value="Kingston">Kingston</li>
<li value="sandisk">sandisk</li>
</ul>
</div>
<script>
// toggle
menu on sidebar and main nav
jQuery('ul.grow').hide();
jQuery('.grow-link').click(
function() {
jQuery(this).next().slideToggle('slow');
return false;
}
);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#toggle-view {
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:200px;
background:#999;
border-radius:15px;
border:1px solid #CCC;
}
#toggle-view li {
position:relative;
cursor:pointer;
list-style:none;
font-size:18px;
padding:9px 0px 9px 0px;
border-bottom:1px solid #ccc;
text-align:center;
`
}
#toggle-view ul{
background:#FFFFFF;
padding:0px;
margin:0;
}
#toggle-view h3 {
margin:0;
font-size:20px;
border-bottom:1px solid #ccc;
padding:5px;
background:#344da1;
color:#FFFFFF;
}
#toggle-view h3:hover {
background:#1f2e60;
}
#toggle-view h3:active {
background:#1f2e60;
}
#toggle-view h3:visited {
background:#1f2e60;
}
#toggle-view h3:focus {
background:#1f2e60;
}
</style>
</head>
<body>
<div id="toggle-view">
<h3 class="grow-link">Categories</h3>
<ul class="grow" style="display: none;">
<li value="best-seller">Best Seller</li>
<li value="charger">Charger</li>
<li value="memory">Memory</li>
</ul>
<h3 class="grow-link">Brands</h3>
<ul class="grow" style="display: none;">
<li value="Naztech">Naztech</li>
<li value="Spider">Spider</li>
<li value="Gemini">Gemini</li>
<li value="Reactor">Reactor</li>
<li value="Kingston">Kingston</li>
<li value="sandisk">sandisk</li>
</ul>
</div>
<script>
// toggle
menu on sidebar and main nav
jQuery('ul.grow').hide();
jQuery('.grow-link').click(
function() {
jQuery(this).next().slideToggle('slow');
return false;
}
);
</script>
</body>
</html>
No comments:
Post a Comment