Develop Reference

0 height navigation bar still visible?

I am designing a portfolio website and wanted to have my work slide up onto the screen when you clicked portfolio, same way a nav bar would slide over when you click a menu icon. The code I have works for nav bars on the right and left, but for the bottom it still shows the block even with the height of 0
unfortunately using display:none and changing it to display:block with jquery removes the smooth animation of it sliding onto screen.
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}

Use display: none instead of height.

Once the portfolio div is fixed, you can use the top property instead of cotroling the animation by the height. You also have to set the default height as 100vh.
So your portfolionav should be:
.portfolionav {
height: 100vh;
width: 100%;
position: fixed;
z-index: 3;
top: 100vh;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
And your JavaScript functions:
function openNav2() {
document.getElementById("portfolionav").style.top = "0";
}
function closeNav2() {
document.getElementById("portfolionav").style.top = "100vh";
}
Now, you just have to adjust the hand-button as you wish.

You can combined height and paddingTop for show and hide navigation because of padding it is showing when you set height:0px;
function openNav2() {
debugger;
document.getElementById("portfolionav").style.height = "100vh";
document.getElementById("portfolionav").style.paddingTop = "60px";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
document.getElementById("portfolionav").style.paddingTop = "0";
}
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>

How can I close menu after click outside menu?

I want to make hiding sidebar menu which will be opened whenuser click button. After that when user click outside menu - menu will be closed. How can I make this function in this case?
JsFiddle
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.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 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>

You can react on a click on the entire document element and find out whether the target is located within your menu:
document.documentElement.addEventListener("click", function(e){
if (e.button != 1) // left mouse
return; // anything else => do nothing
var target = e.target;
var navItem = document.getElementById("mySidenav");
do{
if (target == navItem)
return; // clicked within "mySidenav" => do nothing
target = target.parentNode;
}
while(target != null);
// react here
closeNav(); // must be implemented somewhere
});
It is desirable not to react at all if you detect that the click was indeed fired within your menu because otherwise you might close the menu before the click gets bubbled to the item => no menu item click detected.

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
document.addEventListener('mousedown',function(event){
var side_dom = document.getElementById("mySidenav")
if(side_dom.style.width == '250px'){
if(!side_dom.contains(event.target)){
document.getElementById("mySidenav").style.width = "0";
}
}
})
.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 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</s
</body>

Nav bar to the right

I am trying to write a simple navbar pulling from the right of the screen, and I have the below code.
var isOpen = false;
function openNav() {
if (false == isOpen) {
document.getElementById("myNewsNav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
isOpen = true;
} else {
closeNav();
}
}
function closeNav() {
document.getElementById("myNewsNav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
isOpen = false;
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.newsnav {
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;
}
.newsnav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.newsnav a:hover {
color: #f1f1f1;
}
.newsnav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myNewsNav" class="newsnav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"> open</span>
</div>
</body>
It works fine at the left side. i tried changing the margin left and adding float: right attribute to the css, but still it isn't pulling the nav bar from the right. It always shows on the left side. What is wrong here?
EDIT:
Any which way, can I make the slider start from a specific div only?
<div id="Slider_Should_begin_From_This_Point_of_screen"></div>
Like for eg: I want the slider to slide in and out only from this div onwards.

You need to do just two things.
1) Change the marginLeft to marginRight in the function "openNav"
document.getElementById("main").style.marginRight = "250px";
2) The .newsnav css has a property "left" set to 0, you have to change that to right: 0;
.newsnav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
That is all you have to do.

As per your updated request, it now slides from the right and below the span element:
var isOpen = false;
function openNav() {
if(isOpen == false) {
document.getElementById("myNewsNav").style.width = "250px";
//document.getElementById("main").style.marginRight = "250px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
isOpen=true;
} else {
closeNav();
}
}
function closeNav() {
document.getElementById("myNewsNav").style.width = "0";
//document.getElementById("main").style.marginRight = "0";
//document.body.style.backgroundColor = "white";
isOpen=false;
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.newsnav {
/*height: 100%;*/
width: 0;
position: relative; /* modified */
z-index: 999; /* changed to a higher number */
background-color: #111;
overflow-x: hidden;
transition: .5s;
padding-top: 60px;
}
.wrapper {
position: absolute; /* taken out of the document flow so that it doesn't affect other elements placed below */
right: 0; /* positioned at the right side of the screen */
z-index: 999; /* just in case */
}
.newsnav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: .3s;
}
.newsnav a:hover {
color: #f1f1f1;
}
.newsnav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
/*transition: margin-left .5s;*/
padding: 16px;
}
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">open</span>
<div class="wrapper">
<div id="myNewsNav" class="newsnav">
×
About
Services
Clients
Contact
</div>
</div>
<p>Lorem ... so that you can see that this element isn't affected ...</p>
</div>
Noticeable changes:
Moved the #myNewsNav div below the span element because of the document flow.
Wrapped the #myNewsNav div with an additional div
Commented out unnecessary things

You have position fixed left:0 that will keep it on the left side.
function closeNav() {
document.getElementById("myNewsNav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
document.body.style.backgroundColor = "white";
isOpen=false;
}
var isOpen = false;
function openNav() {
if(false == isOpen) {
document.getElementById("myNewsNav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
isOpen=true;
}else{
closeNav();
}
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.newsnav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.newsnav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.newsnav a:hover {
color: #f1f1f1;
}
.newsnav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div id="myNewsNav" class="newsnav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"> open</span>
</div>
<script>
</script>
</body>
</html>

Bro - right:0 :)
.newsnav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0; // !here should right:0
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
And replace marginLeft to marginRight in openNav() and in closeNav() functions:
document.getElementById("main").style.marginLeft = "250px";

javascript priority inside a function

I am trying to get overlay opened first than the alert box to be opened after it. Alert box comes first even if i have written it after the overlay one.So i need to know what problem is here in my code
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
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 a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
alert("hello");
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>

Your javascript code is not going to wait at your
document.getElementById("myNav").style.width = "100%";
line while the css transition happens. It is going to immediately start executing whatever lines of javascript come next.
If you want an action to happen after a transition you need to add an event listener for transitionend (or animationend if using keyframe animations).
So if you want your alert to happen after your transition you need to change your code to something like
var nav = document.getElementById("myNav");
nav.addEventListener("transitionend",function(){
//this callback is called when transition ends
alert("hello");
});
nav.style.width = "100%";
Demo
var nav = document.getElementById("myNav");
var btn = document.querySelector("button");
function openNav() {
nav.addEventListener("transitionend", function() {
//this callback is called when transition ends
alert("hello");
});
nav.style.width = "100%";
}
btn.addEventListener("click", openNav);
#myNav {
display: block;
width: 0%;
height: 100px;
background: grey;
transition: width 1s;
}
<div id="myNav">
</div>
<button>Open</button>

Sidebar navigation toggle with single button

I have implemented the following sidebar navigation into a simple admin. I've got it working and moved to the right side. I would like to have it appear and disappear using a single button rather than a separate close and open button. I tried modifying the JS with an onToggle function that if isOpen was null, it would open the panel and then set isOpen to true and then the next time it ran, it would delete isOpen. I'm very new at JS and this failed so I thought I'd ask here. How do I get this puppy appearing and disappearing with a single button?
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Thank you kindly.

<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60px;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<script>
function openNav() {
var e = document.getElementById("mySidenav");
if (e.style.width == '250px')
{
e.style.width = '0px';
}
else
{
e.style.width = '250px';
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
This is the same code with little modifications in the openNav() method. For triggering the sideNavbar with a button, it needs to be visible before and after triggering the sideNavBar. So i have moved the view button to the top and i have modified the top property of sidenav to keep the trigger button visible even after activation
You can view this in action here: https://jsfiddle.net/ngohrvk1/

I know the question is tagged with JavaScript and you probably don't want to change the markup or add new elements. But if you could, here's a pure CSS solution that works.
body {
margin: 0;
}
.sidebar-toggle {
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding: 10px;
background: red;
color: white;
}
#sidebar-toggle-input {
display: none;
}
#sidebar-toggle-input+label:before {
content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
content: "❌"
}
.sidebar {
position: fixed;
width: 200px;
transition: 0.3s;
background: blue;
height: 100vh;
top: 0;
left: 0;
transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
transform: none;
}
<input type="checkbox" id="sidebar-toggle-input" />
<label class="sidebar-toggle" for="sidebar-toggle-input"></label>
<div class="sidebar"></div>

This code will help you out, I have created a function and saving data-isshown attribute on the element, to get whether the element is shown or not, we can decide this on the basis of the width as well but this is more generic approach
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
Whole code would look like this
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
body {
font-family: "Lato", sans-serif;
}
.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 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>