I made a side navigation bar which will when the screen is resized below 662px display a button, which will when clicked display the same navigation bar over the entire screen.
(I've done the navigation disappear, and button appear thing, I just need to make it so the button will display the navigation button when clicked. I will as well need a close button too for it (obviously). ).
This is what I have so far:
nav {
position: fixed;
top: 0px;
left: 0;
width: 400px;
height: 100%;
background: #fff;
color: #111;
text-align: center;
padding-top: 25px;
border: none;
border-right: 5px solid #0088ff;
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
flex-direction: column;
align-items: center;
}
nav h1, h2, h3, h4, h5, h6 {
color: #111;
}
.show-nav {
background: #0088ff;
color: #fff;
border: none;
margin-left: none;
top: 200px;
margin-top: 200px;
display: none;
left: 50px;
}
.show-nav i {
color: #fff;
}
.show-nav a {
color: #fff;
}
@media screen and (max-width: 662px) {
nav {
display: none;
}
.show-nav {
display: block;
}
.show-nav:target nav {
display: inline;
width: 100%;
}
}<button class="show-nav"><a href="">Navigation</a></button>
<nav>
<h1>Navigation:</h1>
<br>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<br>
</nav>Is that possible?
Add position and index to your btn and and use the js Code:
btn.onclick= function(e){
var nav = document.querySelector("nav");
if (nav.style.display=="inline-block") return nav.style.display = "none";
else return nav.style.display="inline-block";
btn.style.display = "block"
};nav {
position: fixed;
top: 0px;
left: 0;
width: 400px;
height: 100%;
background: #fff;
color: #111;
text-align: center;
padding-top: 25px;
border: none;
border-right: 5px solid #0088ff;
z-index: 1;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
flex-direction: column;
align-items: center;
}
nav h1, h2, h3, h4, h5, h6 {
color: #111;
}
.show-nav {
background: #0088ff;
color: #fff;
border: none;
margin-left: none;
top: 200px;
margin-top: 200px;
display: none;
left: 50px;
z-index: 2;
position:relative;
}
.show-nav i {
color: #fff;
}
.show-nav a {
color: #fff;
}
@media screen and (max-width: 662px) {
nav {
display: none;
}
.show-nav {
display: block;
}
.show-nav:target nav {
display: inline;
width: 100%;
}
}<button id="btn" class="show-nav">Navigation</button>
<nav>
<h1>Navigation:</h1>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
</nav>First, I would remove the anchor tag from the button. Semantically, a button is used for triggering an event while an anchor tag is used to link the user to another location. Then you need to add a js handler to the button so you can toggle classes on the elements you want to show/hide.
<!-- let's give that button a class -->
<button class="nav-open-button">Navigation</button>
<!-- let's make a close button -->
<button class="nav-close-button">X</button>
var openButton = document.querySelector('.nav-open-button'),
closeButton = document.querySelector('.nav-close-button'),
nav = document.querySelector('nav'),
navIsOpen = false;
openButton.addEventListener('click', function(e) {
e.preventDefault();
toggleNav();
});
closeButton..addEventListener('click', function(e) {
e.preventDefault();
toggleNav();
});
var toggleNav = function() {
if (navIsOpen) {
navIsOpen = false;
nav.classList.remove('open');
} else {
navIsOpen = true
nav.classList.add('open');
}
};
Then you can update your css according to the 'open' class on the <nav> element.