javascript dropdown class in toggla

Question

Guys I’m having trouble with my Nav. I was following a tutorial on how to make the navbar responsive and disappear when it comes off the top. However its drop-down menu does not work, I tried to edit the class of js running this function and it is no use, I broke my HTML page several times trying to do this. here the code:

.logo{
    
    position:fixed;
    float:left;
    margin: 16px 36px;
    color: #fff;
    font-weight:bold;
    font-size: 24px;
}

.preheader{
    
    position:fixed;
    width:100%;
}

.preheader ul{
    
    list-style:none;
    background: rgba (0,0,0,0);
    overflow:hidden;
    color:#fff;
    padding: 0;
    text-align:center;
    margin 0;
    transition: 1s;
}

.preheader.black ul{
    
    background: #000;
}

.preheader ul li{
        display: inline-block;
        padding: 20px;

}

.preheader ul li a{
    
    text-decoration: none;
    color:#fff;
    font-size:20px;
}

.menu-icon{
    width:100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    display:none;
}

@media(max-width:580px){
    .logo{
        position: fixed;
        top: 0;
        margin-top:16px;
    }
    .preheader ul{
        max-height:0px;
        background: #000;
    }
    .preheader.black ul{
        background: #000;
    }
    .showing{
        max-height: 20em;
    }
    .preheader ul li{
        box-sizing:border-box;
        width:100%;
        padding: 24px 0;
        text-align: center;
    }
    .menu-icon{
        display:block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preheader">
    <div class="wrapper">
    <div class="menu-icon">
    <i class="fa fa-bars fa-2x"></i>
    </div>
    <div class="logo">
    Plug | Seu celular na moda
    </div>
    <div class="menu">
      <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Facebook</a></li>
      </ul>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".menu-icon").on("click", function(){
          $(".preheader ul").toggleClass("showing");
      });
    });

      $(window).on("scroll", function(){

        if($(window).scrollTop()){
          $('.preheader').addClass('black');
        }
        else{
          $('.preheader').removeClass('black');
        }
      });
    </script>

the problem is that when I am in mobile-view, the navbar does not disappear as in the case of the desktop and as I said before the dropdown does not work as much as mobile as desktop.

Answer 1

Add ul to class .showing:

ul.showing{
  max-height: 20em;
}

The selector .preheader ul with max-height:0px; is stronger than class .showing alone, therefore the max-height will always stay in 0. Putting ul.showing, this class will have more strength and will apply the max-height.

In the example below I changed the @media(max-width:580px){ for @media(max-width:780px){ only so that it can be illustrated in the snippet:

$(document).ready(function(){
      $(".menu-icon").on("click", function(){
          $(".preheader ul").toggleClass("showing");
      });
    });

      $(window).on("scroll", function(){

        if($(window).scrollTop()){
          $('.preheader').addClass('black');
        }
        else{
          $('.preheader').removeClass('black');
        }
      });

.logo{
    
    position:fixed;
    float:left;
    margin: 16px 36px;
    color: #fff;
    font-weight:bold;
    font-size: 24px;
}

.preheader{
    
    position:fixed;
    width:100%;
}

.preheader ul{
    
    list-style:none;
    background: rgba (0,0,0,0);
    overflow:hidden;
    color:#fff;
    padding: 0;
    text-align:center;
    margin 0;
    transition: 1s;
}

.preheader.black ul{
    
    background: #000;
}

.preheader ul li{
        display: inline-block;
        padding: 20px;

}

.preheader ul li a{
    
    text-decoration: none;
    color:#fff;
    font-size:20px;
}

.menu-icon{
    width:100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    display:none;
}

@media(max-width:780px){
    .logo{
        position: fixed;
        top: 0;
        margin-top:16px;
    }
    .preheader ul{
        max-height:0px;
        background: #000;
    }
    .preheader.black ul{
        background: #000;
    }
    ul.showing{
        max-height: 20em;
    }
    .preheader ul li{
        box-sizing:border-box;
        width:100%;
        padding: 24px 0;
        text-align: center;
    }
    .menu-icon{
        display:block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="preheader">
 <div class="wrapper">
 <div class="menu-icon">
 <i class="fa fa-bars fa-2x"></i>
 </div>
 <div class="logo">
 Plug | Seu celular na moda
 </div>
 <div class="menu">
   <ul>
         <li><a href="#">Inicio</a></li>
         <li><a href="#">Sobre</a></li>
         <li><a href="#">Contato</a></li>
         <li><a href="#">Facebook</a></li>
   </ul>
 </div>
 </div>
 </div>

Answer 2

I think I can help you! Here’s an example code of what you might be wanting:

HTML:

<div class="menu2">
       <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
                <li><a href="#">O que fazemos?</a>
                    <ul>
                          <li><a href="#">Web Design</a></li>
                          <li><a href="#">SEO</a></li>
                          <li><a href="#">Design</a></li>                    
                    </ul>
                </li>
            <li><a href="#">Fotos</a></li>
            <li><a href="#">Contato</a></li>                
          </ul>

      </div>

CSS:

         *{margin: 0; padding: 0;}
      body, html{
        background:#000;
        font-family: arial, helvetica, sans-serif;
        font-size: 12px;
        color:#fff;
      }
      .menu2{
        padding:1px 2px 1px;
        width:100%;
        position:fixed;
        top:0px;
        left:0px;
        background:#fff;
      }


    .menu{list-style:none; border:1px solid #c0c0c0; float:left; }

    .menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }

    .menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

    .menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

    .menu li   ul{position:absolute; top:25px; left:0; background-color:#fff; display:none; }

    .menu li:hover ul, .menu li.over ul{display:block;}

    .menu li ul li{border:1px solid #c0c0c0; display:block; width:150px;}

Javascript(Optional):

  var menu = $('.menu2');

   $(window).scroll(function () {
       if ($(this).scrollTop() > 300) {
           menu.css({
               'background': '#009688'});

       } else {
           menu.css({
             'background': '#fff'
           });
       }
   });

In operation: http://jsbin.com/bimojahupi/edit?output

Edit1: You are forcing it to close the height(max-height:0px), see:

@media(max-width:580px){

.preheader ul{
    max-height:0px;
    background: #000;
 }

 }

Trade your code for that and see where it goes:

 var menu = $('.preheader');

   $(window).scroll(function () {
       if ($(this).scrollTop() > 300) {
           menu.css({
               'display': 'none'});

       } else {
           menu.css({
             'display': 'block'
           });
       }
   });  

And remove @media portability(max-width:580px)!