Retros Retros - 2 months ago 20
CSS Question

Side Navigation always open/open on load

I know this might sound simple to some of you, but I'm a beginner and I'm trying to tackle JS.

Anyway, I have a html, css, jquery sidebar I want to edit so it doesn't open/close onclick.
Instead I want it to open (and stay opened) when the page loads.
But I have no idea how to do this. I've looked everywhere, but couldn't find an answer. Maybe I just don't know what exactly I should be looking for.

Someone, please help. And please make it as simple as possible because, like I said, I'm a beginner and this is all still very confusing to me.
Thank you.

html:

<div id="mySidenav" class="sidenav" >
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<span onclick="openNav()">open</span>


js:

<script type="text/javascript">
function openNav() {
document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

Answer

Remove the following lines from your HTML:

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>

and

<span onclick="openNav()">open</span>

Alternately, if you want to still have those display (not a good idea from a user interface point of view) remove onclick="closeNav()" and onclick="openNav()".

In addition, you may want to change

<div id="mySidenav" class="sidenav" >

to

<div id="mySidenav" class="sidenav" style="width:200px;">