Use jQuery to hide or show a sidebar or a navigation menu of a site
This simple example shows how to use jQuery to hide or show a sidebar of a website.
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Use jQuery to hide/show a sidebar or nav menu - MdmSoft</title>
<style type="text/css">
body {
font-family: Verdana;
margin: 0px;
padding: 0px;
}
#panel-container {
border: 1px solid #999;
width: 100%;
}
#panel-menu {
border: 1px solid #999;
float: left;
width: 180px;
margin: 10px;
padding: 10px;
}
#panel-content {
border: 1px solid #999;
float: left;
width: 600px;
margin: 10px;
padding: 10px;
}
div.right {
text-align: right;
}
div.clear-fix {
clear: both;
float: none;
}
ul {
line-height: 22px;
list-style: none;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
$("#open").hide();
$("#close").click(function () {
$("#panel-menu").width(24);
$("#nav-menu").hide();
$("#open").show();
$("#close").hide();
});
$("#open").click(function () {
$("#panel-menu").width(180);
$("#nav-menu").show();
$("#open").hide();
$("#close").show();
});
});
</script>
</head>
<body>
<div id="panel-container">
<div id="panel-menu">
<div class="right">
<span id="close">[-]</span>
<span id="open">[+]</span>
</div>
<nav id="nav-menu">
<ul>
<li><a href="#" title="Dashboard">Dashboard</a></li>
<li><a href="#" title="Customers">Customers</a></li>
<li><a href="#" title="Products">Products</a></li>
<li><a href="#" title="Orders">Orders</a></li>
<li> </li>
<li><a href="#" title="Settings">Settings</a></li>
</ul>
</nav>
</div>
<div id="panel-content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat
facer possim assum. Typi non habent claritatem insitam; est
usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius. Claritas est etiam processus dynamicus,
qui sequitur mutationem consuetudium lectorum. Mirum est notare
quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima. Eodem modo typi, qui nunc nobis
videntur parum clari, fiant sollemnes in futurum.
</p>
</div>
<div class="clear-fix"></div>
</div>
</body>
</html>
If our work has been of help, you can help us with a small donation...
Our programmers will thank you!
Related code snippets posted in
jQuery:
The best
jQuery
recommended books:
All information contained in this web site are the property of MdmSoft.
The information is provided "as is", MdmSoft will not be liable for any misuse of the code contained in these pages,
nor can it be for inaccuracies, grammatical errors or other factors that may have caused damage or lost earnings.
MdmSoft is not responsible for the content of comments posted by users.
The examples in this area have the educational and demonstration purposes only,
and may be copied only for your reference, but cannot be used for commercial purposes,
or for any other purpose, without the express written consent of MdmSoft.
MdmSoft also reserves the right to change, without notice, to your liking this web site,
the pages and its sections, and may suspend temporarily or definitely the various services included on this site.
While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.