How can I make a button which will display an item when clicked in HTML-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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.