Sidenav open on default instead of OnClick

Sidenav open on default instead of OnClick - javascript

I found this Sidenav on the internet which I would like to use for my application! Link to this: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_none
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
display: none;
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
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;
}
.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;}
}
</style>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
But, the sidenav only opens when the button is activated, but I would like it to be open by default. What syntaxes would I need to change for this?

All you need to do is remove the css that is hiding the sidenav by default
.sidenav {
//display: none; - remove this line
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}

Related

How do i make my side menu push my website over?

I have created a side navigation for a website, but I don't want it to overlay on top of my website. I want it to pushover the rest of the site. For example how they do it on this website. The code i have is below.
<div id="mainbox" onclick="openFunction()">☰ </div>
<div id="menu" class="sidemenu">
Home
Shop
About
Contact
×
</div>
<script type="text/javascript">
function openFunction(){
document.getElementById("menu").style.width="400px";
document.getElementById("mainbox").style.marginLeft="400px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
</script>
CSS:
#mainbox{
position: fixed;
font-size: 40px;
cursor: pointer;
transition: all .6s;
transform: translate(3750%, -1600%);
}
.sidemenu{
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #FFEECA;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
}
.sidemenu a{
padding: 8px 8px 8px 64px;
text-decoration: none;
font-size: 20px;
color: #222;
display: block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: 0px;
right: 25px;
font-size: 36px;
margin-left: 32px;
}

laatste...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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 {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
hey
alles
oke
?
</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.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>

here you go, i hope its the thing you wanted...lol
https://codepen.io/schliflo/pen/Eawzzw

Open close sidebar clicking anywhere

I need to create a sidebar that can be able to close it clicking on the X button and clicking anywhere
I am able to close the navbar by clicking on the X button in the sidebar. How can I change my javascript to be able to close the sidebar by clicking anywhere on the page?
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;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
</body>

You can listen to clicks on your entire page through:
document.body.onclick = function () {
// Close Nav here
}
However, doing this will cause your entire page to try to close the nav when clicked – even your open button.
You can exclude certain elements from listening to events set on parent elements through the e.stopPropagation() method. See an example implementation below.
Please also note that your body will not start off 100% of your window's height due to the lack of content, and thus will not respond to clicks everywhere on the page. You can fix this by using setting the CSS property body: 100vh.
function openNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="250px";
}
function closeNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="0"
}
document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;
body {
height: 100vh;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover {
color: #F1F1F1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>
</body>

Easily you can add overlay element when the sidebar is shown.
function overlay(isShow){
var elm = document.getElementById('overlay')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openNav() {
overlay(true);
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
overlay(false);
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#overlay{
z-index: 2;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>

Child elements wrapping when animating

I want to stop child elements from wrapping when animating. I want that they should stay as it is and not dance on the screen by wrapping. Here is my jsfiddle:
https://jsfiddle.net/DTcHh/39734/
This is my CSS:
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;
}
.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;}
}
Do you know how could I potentially fix this?
Edit: I don't want hacks by compulsorily aligning all content in my sidenav as display:block
Here is the updated fiddle: https://jsfiddle.net/DTcHh/39738/
I want the UL to show up inline-block. Is this possible?

Display block on your anchors should do it.
#media screen and (max-height: 450px)
(index):82
.sidenav a {
font-size: 18px;
display: block;
}
Edit - following comments
Further to the OP's requirements where the anchors should stay inline and not 'dance' I animated the position of the sidebar instead of the width.
function openNav() {
document.getElementById("mySidenav").style.left = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}

You just need to add display:block to the anchor's style
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display:block; //this is added
}
Or you can add it those which are direct descendants of .sidenav
.sidenav > a {
display:block; //this is added
}
Demo for I don't want hack
document.getElementById("open").onclick = openNav;
document.getElementById("close").onclick = closeNav;
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
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;
}
ul {
display: block;
white-space: nowrap;
}
ul li {
display: inline-block;
}
.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;
}
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="mySidenav" class="sidenav">
<ul>
<li>I</li>
<li>don't</li>
<li>want</li>
<li>hack</li>
</ul>
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span id="open" style="font-size:30px;cursor:pointer">☰ open</span>
Edit
Just add this line to your ul's css
ul {
white-space: nowrap;
}

Margin-top in css for menu icon not working for particular px

If I try to make icon go up using margin top : -35px; under #menu, when I click on it the icon side navigation doesn't work ,but when i give upto -15px the side navigation bar gets displayed. I am not able to figure out the mistake!
Thanks in advance!
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
#menu{
float: right;
margin-top: -15px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
opacity:0.5;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 90px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #808080;
}
.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;}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="material-icons material-spec-icon" title="Show navigation">menu</i></span>
<div id="mySidenav" class="sidenav">
×
About
Services
Process
Portfolio
</div>

Try changing the display from block to inline on your a tags:
.sidenav a {
display: inline;
}
Then you can remove the margin top.

Overlay with auto display on page load

I have been trying for days to get this to work, I am looking to have this overlay as is but simply initiate on page load instead of having to click the link in order to have it open. Can anyone suggest what i can do to have it auto overlay when someone visits?
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
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.6);
overflow-y: 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 {overflow-y: auto;}
.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">
About
Services
Clients
Contact
</div>
</div>
<h2></h2>
<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>

Just add document.addEventListener('DOMContentLoaded', openNav()); inside your <script>
Shorthand : document.ready(openNav());
For more information check out: js document.ready()

add openNav()
openNav()
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
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.6);
overflow-y: 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 {overflow-y: auto;}
.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">
About
Services
Clients
Contact
</div>
</div>
<h2></h2>
<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>

Develop Reference

JavaScript is the programming language of the Web.

Sidenav open on default instead of OnClick - javascript

All you need to do is remove the css that is hiding the sidenav by default .sidenav { //display: none; - remove this line height: 100%; width: 250px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 60px; }

Related

How do i make my side menu push my website over?

Open close sidebar clicking anywhere

Child elements wrapping when animating

Margin-top in css for menu icon not working for particular px

Overlay with auto display on page load

Categories

Resources