Using code from W3schools 'Sidenav Overlay' I'm trying to create the same effect in Bootstrap. I have the .navbar-toggle floating left and the navbar-toggle still shows when the overlay moves right. Not sure how to hide the navbar-toggle when the overlay appears. First post, Thanks
CSS
.navbar {
webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
background-color: white;
padding: 5px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 5px;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
border: none;
cursor: pointer;
float: left;
}
.navbar-toggle a:hover {
border: none;
background-color: none;
cursor: pointer;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
HTML
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle" onclick="openNav()">
<span class="sr-only" >Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Test Nav</a>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
</div>
</div>
</div>
</header>
Javascript
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Add z-index as 99 instead of 1 to .sidenav class
.sidenav {
background-color: #111;
height: 100%;
left: 0;
overflow-x: hidden;
padding-top: 60px;
position: fixed;
top: 0;
transition: all 0.5s ease 0s;
width: 0;
z-index: 99;
}
It will help you. Try this
$(".navbar-toggle").click(function(e) {
e.preventDefault();
$("#mySidenav").toggleClass("activeclass");
});
$(".closebtn").click(function(e) {
e.preventDefault();
$("#mySidenav").removeClass("activeclass");
});
.navbar {
webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
background-color: white;
padding: 5px;
}
.sidenav.activeclass{width:250px;}
.sidenav{width:0px;}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 5px;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
border: none;
cursor: pointer;
float: left;
}
.navbar-toggle a:hover {
border: none;
background-color: none;
cursor: pointer;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On s
maller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only" >Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Test Nav</a>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
</div>
</div>
</div>
</header>
Hope this might help you ! Here is the working example
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style media="screen">
/*body { padding-top: 70px; }*/
#connectLogo {
height: 60px;
padding: 15px 0 5px 0;
}
#logo {
height: 60px;
padding: 5px 0 5px 20px;
}
.share-link {
line-height: 60px;
padding: 0 1em;
font-size: 2em;
}
</style>
</head>
<body>
<nav class="navbar navbar-default NOnavbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<span class="glyphicon glyphicon-share hidden-xs pull-right share-link" aria-hidden="true"></span>
<!-- Collect the nav links, forms, and other content for toggling -->
<img class="center-block" id="connectLogo" src="http://app.talkfusion.com/connect_r/images/title-videochat.svg" alt="">
<!-- <div id="btnShare" style="display: none;"><img src="share.svg" width="22" alt="share"></div> -->
</div>
<!--
<button type="button" class="share-link hidden-xs pull-right">
<span class="sr-only">Share link</span>
<span class="glyphicon glyphicon-link"></span>
</button> -->
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Menu Toggle Script -->
<script>
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Sidebar</button>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
The sidebar opens the contents when I click the button, and it closes the sidebar when I click the
x mark placed at right to in the sidebar. However I want to close this sidebar using same button when I used to open. However I also want to keep the x mark in the sidebar. I have idea that if the sidebar is opened it can be closed by clicking same button.
try this,
Here toggleclass() used to toggle open class while clicking both of one ☰ Sidebar or x button.
Add new style in css
#mySidebar.open{ width:250px; }
#main.open{ margin-left:250px; }
Add change in html code
In both of click() event call OpenOrClose() function.
×
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>
Result:
function OpenOrClose() {
document.getElementById("mySidebar").classList.toggle("open");
document.getElementById("main").classList.toggle("open");
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
#mySidebar.open{width:250px;}
#main.open{margin-left:250px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled bg-info text-white">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed text-white">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Blog</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>
</div>
</body>
</html>
Toggle a class instead of change the style properties and doing this you only need a single function, so I called it toggleNav.
New CSS:
#mySidebar.active{
width: 250px;
}
#main.active{
margin-left: 250px;
}
New Javascript:
function toggleNav() {
document.getElementById("mySidebar").classList.toggle("active");
document.getElementById("main").classList.toggle("active");
}
Update your HTML by replacing all of your onclicks with: onclick="toggleNav()"
use js toggle function
add class toggleBtn anywhere do you want .. it will work...
document.querySelectorAll(".toggleBtn").forEach(function(el){
el.addEventListener('click',function(e){
e.preventDefault();
document.getElementById("mySidebar").classList.toggle('width');
document.getElementById("main").classList.toggle('margin');
})
})
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.width{
width: 250px;
}
.margin{
margin-left:250px;
}
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="openbtn toggleBtn" >×</a>
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn toggleBtn" >☰ Sidebar</button>
</div>
Just add a little (and easy) javascript to change the attribute.
In the openNav() function, add a line which turns the onclick to closeNav().
Also, add an id to the button so that you will be able to change the attribute, specific for the button you want.
<button id="btn123" class="openbtn" onclick="openNav()">☰ Sidebar</button>
<!-- adding id -->
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("btn123").setAttribute("onclick", "closeNav()");
// add this line to set the attribute
}
and also do the opposite: in the closeNav() function, set the onclick attribute to openNav() like this:
document.getElementById("btn123").setAttribute("onclick", "openNav()");
You can do this without the usage of a helper class in this situation, and by merging both functions into one function named manageNav(). Here is an example:
function manageNav() {
document.getElementById("mySidebar").style.width == "0px" || document.getElementById("mySidebar").style.width == 0 ? document.getElementById("mySidebar").style.width = "250px" : document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft == "0px" || document.getElementById("main").style.marginLeft == 0 ? document.getElementById("main").style.marginLeft = "250px" : document.getElementById("main").style.marginLeft = "0px";
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="manageNav()">☰ Sidebar</button>
</div>
You can do what #imvain2 said.
Or you can do what #php123 said: change the value of onclick property to "closeNav()" when it is clicked to open, and change it to "openNav()" when it is clicked to close.
Let's say your button has id="sideBarBtn"
then,
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "closeNav()");
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "openNav()");
}
The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}
So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar. I would like it to stay still while the navbar opens.
Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.nav div {
height: 4px; /*4px*/
background-color: white;
margin : 5px 0;/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;/*30px*/
display: block;
margin : 1em 0 0 1em;
}
.one {
width: 30px;/*30px*/
}
.two {
width: 25px;/*25px*/
}
.three {
width: 20px;/*20px*/
}
.nav:hover div{
width: 30px;/*30px*/
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition : 0.1s;/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul{
display: block;
}
.scroll {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" >
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false">
<div class="one" style="background-color: black;" draggable ="false"></div>
<div class="two" style="background-color: black;" draggable ="false"></div>
<div class="three" style="background-color: black;" draggable ="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class = "mainNav">
<li>Home</li>
<div >
<li>Catalog
<div class="scroll">
<div class ="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
</body>
</html>
change it like this:
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.left ="0";
}
function closeNav() {
document.getElementById("mySidenav").style.left ="-250";
}
</script>
you are changing the width while your text font is set to a static number. so while you are changing the width the html is trying to set the text of same length to a different width, and there is nothing to do with it. So instead of changing the width. just create a static "box", put it to the left so it wouldn't be seen, and bring it right after clicking on a button.
It looks like the issue you're having is because the width is gradually increased.
This means that as it grows, the text goes broken over 2 lines on your longer link names. See example in the image below:
There would be a few ways to fix this but I think the simplest would be to add a min-width: 200px; to your .sidenav a selector like so:
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
min-width: 200px;
}
See this JS Fiddle for an example
Instead of width you need to set the left position to remove the flickering text issue.
Please refer to the below demo.
Working Demo Code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<style>
/* Code du Navbar à 3 lignes*/
.nav div {
height: 4px;
/*4px*/
background-color: white;
margin: 5px 0;
/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;
/*30px*/
display: block;
margin: 1em 0 0 1em;
}
.one {
width: 30px;
/*30px*/
}
.two {
width: 25px;
/*25px*/
}
.three {
width: 20px;
/*20px*/
}
.nav:hover div {
width: 30px;
/*30px*/
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul {
display: block;
}
.scroll {
overflow: auto;
}
</style>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;">
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable="false">
<div class="one" style="background-color: black;" draggable="false"></div>
<div class="two" style="background-color: black;" draggable="false"></div>
<div class="three" style="background-color: black;" draggable="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class="mainNav">
<li>Home</li>
<div>
<li>Catalog
<div class="scroll">
<div class="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0px";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
</script>
</body>
</html>
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.
Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?
I copied the code in this fiddle
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top pids-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
<ul class="nav navbar-nav pids-navbar-nav full-height">
<li class="active">
Home 1
</li>
<li class="">
Home 2
</li>
<li class="">
Home 3
</li>
</ul>
</div>
</div>
</nav>
Thanks!
I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:
.navbar-collapse ul {
height: 100vh;
}
note: I am using bootstrap 4.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.wrap {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="wrap">
Home
Home 1
Home 2
Home 3
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>