Sidenav Push Example
Click on the element below to open the side navigation menu, and push this content to the right.☰ close
<style>
.side_nav_left{
height:400px;
width:200px;
background-color:black;
color:white;
transition:0.5s;
overflow-x:hidden;
position:absolute;
}
.open_nav{
font-size:30px;
cursor:pointer;
}
#top_container {
margin-left: 200px;
transition:0.5s;
}
.side_nav_menu{
/*height:50px;*/
width:100%;
font-size:30px;
text-align:center;
transition:0.5s;
cursor:pointer;
}
.side_nav_submenu{
height:30px;
width:100%;
font-size:20px;
text-align:center;
display:none;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="side_nav_left" id="side_nav">
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 1
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 2
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 3
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
</div>
<div id="top_container">
<h2>
Sidenav Push Example</h2>
Click on the element below to open the side navigation menu, and push this content to the right.<br />
<span class="open_nav" id="sandwich_bar" onclick="toggleNav()">☰ close</span>
</div>
<script>
var open = true;
function toggleNav() {
if (open) {
open = false;
$(".side_nav_left").css("width", 0);
$(".side_nav_menu").css("display", "none");
$("#top_container").css("margin-left", 0);
$("#sandwich_bar").html("☰ open");
}
else {
open = true
$(".side_nav_left").css("width", "200px");
$(".side_nav_menu").css("display", "block");
$("#top_container").css("margin-left", "200px");
$("#sandwich_bar").html("☰ close");
}
}
function toggle_submenu() {
$(".side_nav_submenu").slideToggle("slow");
}
</script>
.side_nav_left{
height:400px;
width:200px;
background-color:black;
color:white;
transition:0.5s;
overflow-x:hidden;
position:absolute;
}
.open_nav{
font-size:30px;
cursor:pointer;
}
#top_container {
margin-left: 200px;
transition:0.5s;
}
.side_nav_menu{
/*height:50px;*/
width:100%;
font-size:30px;
text-align:center;
transition:0.5s;
cursor:pointer;
}
.side_nav_submenu{
height:30px;
width:100%;
font-size:20px;
text-align:center;
display:none;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="side_nav_left" id="side_nav">
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 1
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 2
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
<div class="side_nav_menu" onclick="toggle_submenu()">
menu 3
<div class="side_nav_submenu">
sub 1</div>
<div class="side_nav_submenu">
sub 2</div>
</div>
</div>
<div id="top_container">
<h2>
Sidenav Push Example</h2>
Click on the element below to open the side navigation menu, and push this content to the right.<br />
<span class="open_nav" id="sandwich_bar" onclick="toggleNav()">☰ close</span>
</div>
<script>
var open = true;
function toggleNav() {
if (open) {
open = false;
$(".side_nav_left").css("width", 0);
$(".side_nav_menu").css("display", "none");
$("#top_container").css("margin-left", 0);
$("#sandwich_bar").html("☰ open");
}
else {
open = true
$(".side_nav_left").css("width", "200px");
$(".side_nav_menu").css("display", "block");
$("#top_container").css("margin-left", "200px");
$("#sandwich_bar").html("☰ close");
}
}
function toggle_submenu() {
$(".side_nav_submenu").slideToggle("slow");
}
</script>
No comments:
Post a Comment