Mobile menu

Question

I made a menu that shows on small widths. The problem:

1) I resize the page - http://port-80-x4s5t1z04x.treehouse-app.com/ 2) open the menu drop down, 3) close the drop down 4) make the page big again and the menu disappears....

jQuery(document).ready(function($){

    /* prepend menu icon */
    $('#nav-wrap').prepend('<div id="mobileMenu">Menu</div>');

    /* toggle nav */
    $("#mobileMenu").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });
});

#mobileMenu {
    display: none; 
}

#nav li {
  list-style: none;
  margin-left: 1em;
  float: left;  
}

/* Hidden menu */
#nav ul { 
  overflow: hidden
  position: absolute; */
  display: none;
  padding:0;

}

#nav ul li {    
  float: none;
  margin: 0;
  padding: 0;
}

#nav a {
  padding: 5px;
  display: block;
  text-decoration: none;
}

#nav a:hover {
    background: #f8f8f8;
}

#nav li:hover > ul {
    display: block; /* show dropdown on hover */
}

<nav id="nav-wrap">
    <ul id="nav">
      <li><a href="#">Home</a></li>
          <li><a href="#">Sites
            </a>
            <ul>
              <li><a href="http://webdesignerwall.com">Web Designer Wall</a></li>
              <li><a href="http://themify.me">Themify</a></li>
              <li><a href="http://icondock.com">IconDock</a></li>
              <li><a href="http://ndesign-studio.com">N.Design Studio</a></li>
              <li><a href="http://bestwebgallery.com">Best Web Gallery</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Another Button</a></li>
    </ul>
</nav>

Answer 1 · 2015-03-08T15:49:46Z

March 8, 2015 3:49pm

EDIT: see the full code working here with a little extra styling http://codepen.io/Limey_88/pen/xbaPeK

Hey,

I finally read this correctly and get what is going on. Try this for your code

You may want to change the style to suit your own site, but that should help you out.

Any questions, please feel free to ask and I will take a shot at them.

$(document).ready(function(){

    /* prepend menu icon */
    $('#nav-wrap').prepend('<div id="mobileMenu">Menu</div>');
    $('#nav').hide();

    /* toggle nav */
    $("#mobileMenu").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

     /* hide if not needed */
  if ($(window).width() > 750) {
    $("#nav").show(); 
    $("#mobileMenu").hide();
    }
});

/* display  mobile click area on resize up */
$(window).resize(function() {
    if ($(window).width() >= 750) {
    $("#nav").show(); 
    $("#mobileMenu").hide();
    } 
 }); 

/* show click area on resize down */
$(window).resize(function() {
    if ($(window).width() < 750) {
    $("#mobileMenu").show();
    $("#nav").hide(); 
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>

</header>
<section>
<nav id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a>Sites
        </a>
            <ul>
                <li><a href="http://webdesignerwall.com">Web Designer Wall</a></li>
                <li><a href="http://themify.me">Themify</a></li>
                <li><a href="http://icondock.com">IconDock</a></li>
                <li><a href="http://ndesign-studio.com">N.Design Studio</a></li>
                <li><a href="http://bestwebgallery.com">Best Web Gallery</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Another Button</a></li>
    </ul>
</nav>
</section>
<footer>
</footer>

* {
  -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
  -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
  box-sizing: border-box;         /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
}

body {
  width: 100%;
  background: #3b3b3b;
  color: #eee;
  margin: 0 auto;
}


header, footer {
  height: 60px;
  background: black;
}

section {
  width: 90%;
  min-height: 80.1vh;
  margin: 0 auto;
}

nav {
  width: 100%;
  background: #222;
  text-align: center;
  position: relative;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  list-style: none;
  width: 100%;
  position: relative;
}

nav li > ul {
  display: none;
}

nav a {
  padding: 15px 0;
  margin-bottom: 5px;
  border-radius: 1px;
  display: block;
  color: #e84d5b;
  outline: 0;
}

nav a:hover {
  background: #eee;

}

nav a {
  text-decoration: none;
  font-weight: bold;
}
#nav li:hover > ul {
  background: #333;
  display: block; /* show dropdown on hover */
  text-align: center;
}

#nav li> ul li a {
  width: 100%;
}
/* media query */

@media (min-width: 33em) {

  nav {
    position: static;
    font-size: 0.8em;
}

  nav li {
    display: inline-block;
    width: auto;
    padding: 0 5px;
  }
#nav li:hover > ul {
    position: absolute;
    display: block; /* show dropdown on hover */
    top: 40px;
    left: 0;
}

#nav li> ul li {
  width: 200px;
}

Hope this helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Alexey Tseitlin

Alexey Tseitlin

Mobile menu

1 Answer

Liam Maclachlan

Liam Maclachlan

Alexey Tseitlin

Alexey Tseitlin

Liam Maclachlan

Liam Maclachlan

Alexey Tseitlin

Alexey Tseitlin

Liam Maclachlan

Liam Maclachlan