用户单击栏图标时如何隐藏/显示导航栏？

Question

How do I hide my navbar when the user clicks on the "bar-icon"?

I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays

. Can you do that with JavaScript ? Or do you need jQuery for that?

HTML

<div class="banner">
    <header class="header">
        <i class="fa fa-bars"></i>
      <nav class="nav">
      </nav>
    </header>
    <div class="bannerContainer">
        <h1>Heading 1</h1>
    </div>
</div>

 nav { height: 60px; width: 100%; background-color: #ccc; } 

 <div class="banner"> <header class="header"> <i class="fa fa-bars"></i> <nav class="nav"> </nav> </header> <div class="bannerContainer"> <h1>Display like that above!</h1> </div> </div> 

I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least). If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.

Answer 1

Here is how to control that with a simple show and hide with basic javascript:

function openMenu(e){
    document.getElementById('menu').style.display = 'block';
}

function closeMenu(e){
    document.getElementById('menu').style.display = 'none';
}

https://jsfiddle.net/7xo87kz6/

Answer 2

You may use jQuery for this purpose. Make sure to include jQuery in your project.

Jquery Part

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#bar").click(function(){ $(".bannerContainer").toggle(); }); }); </script> 

HTML Part

 nav { height: 60px; width: 100%; background-color: #ccc; } 

 <div class="banner"> <div id = "bar"> <i class="fa fa-bars"></i> <nav class="nav"> </nav> </div> </div> <div class="bannerContainer"> <h1>Display like that above!</h1> </div> 

Answer 3

I dont 100% understand your question but, you could use something like this,

 //JS var button = document.querySelector("button"); var body = document.querySelector("body"); button.addEventListener("click",function() { body.style.background = "red"; }); 

 <!--HTML--> <button>Try Me!</button> 

basically it uses addEventListener to run a function on a click. And you can add if statements around that to test css attributes as well