Change the drop down you built in jquery to burger

Question

How can I change my drop down menu from a text selection to a burger drop down menu?

I'll include home page, js and css:

<!DOCTYPE html>
<html>
  <head>
    <title>Bull and Bear</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Learn to trade</span>
      <h1>Bull and Bear Trading</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
    </header>

        <div class="primary-content t-border">
            <p class="intro">
                Pull and Bear Trading is a company that aims to provide high quality signals at a low cost and running a trading academy in order to teach all the skills necessary to be able to trade on your own and understand and predict markets.
            </p>
            <a class="callout" href="info.html">Find out more</a>

      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->

            <a class="callout" href="#wildlife">See the Wildlife</a>
        </div><!-- End .primary-content -->

        <div class="secondary-content t-border group"> 
      <div class="resorts">
        <img src="img/resort.jpg" alt="Resort">
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>       
      </div>

      <div class="tips">
        <img src="img/mtn-landscape.jpg" alt="Mountain Landscape">
        <h3>Pack Accordingly</h3>
        <p>
          One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
        </p>
        <ol>
          <li>Bring layers of clothing</li>
          <li>Pack sunscreen</li>
          <li>Carry extra water just in case</li>
          <li>Pack light</li>
        </ol>
      </div>
        </div><!-- End .secondary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background: #fff;
}

#menu {
    background: #384047;
    height: 60px;
    padding: 0 5px 0;
    text-align: center;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    width: 84px;
    text-align: center;
}

ul li a {
    color: #fff;
    width: 100%;
    line-height: 60px;
    text-decoration: none;
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

select {
    width: 94%;
    margin: 11px  0 11px 2%;
    float: left;
}

/**button {
    display: inline-block;
    line-height: 18px;
    padding: 0 5px;
    margin: 11px 2% 11px 0;
    float: right;
    width: 10%;
} **/

h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}
p {
    text-align: center;
    color: #777;
}
/** Start Coding Here **/


@media (min-width: 320px) and (max-width: 568px){
  #menu ul{
    display: none;
  }
}

@media (min-width: 568px){
  #menu select, #menu button{
    display: none;
  }
}

// looks ugly in small devices/width
// hide text links and swap them out with a more appropriate navigation

//create select append to menu
var $select = $("<select></select>");
$("#menu").append($select);

// cycle over menu links
$("#menu a").each(function(){
  var $anchor = $(this);
  // create an option
  var $option = $("<option></option>");

  if ($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }

  // value is href
  $option.val($anchor.attr("href"));
  // text is text 
  $option.text($anchor.text());
  // append to select
  $select.append($option);

});

//create button
  //var $button = $("<button>Go</button>");
  //$("#menu").append($button);

// bind click to go to XbuttonX selected locaiton

//$button.click(function(){
$select.change(function(){
  window.location = $select.val();
});
  // go to select location
// modify css to hide links on small width and show button and select
  // also hides select and button on larger width and show's links
// deal with selected options depending on current page

Answer 1 · 2016-08-25T20:11:17Z

August 25, 2016 8:11pm

I'm a little bit confused because you don't have a drop-down menu on that html page. I don't see a menu at all.

Regardless, here is a workspace snapshot of a simple website with a sliding menu. I've made it a bit prettier than it would be default, but the jQuery is really simple - only a couple of lines. I'll also post the relevant code below.

    <div class="nav-menu">
      <!-- This h6 heading is what we'll use to trigger the menu. -->
      <h6>Home<img src="img/menu.png" alt="Menu Icon"></h6>
      <nav>
        <ul> <!-- This is the list we're going to show and hide. -->
          <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="music.html">Music</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>

// Yes, that's really it! When you click the nav-menu heading, the menu will slide down.
$(".nav-menu h6").click(function() {
  $(this).next().slideToggle(400);
});

Let me know if you have any questions, and feel free to fork and play around with the snapshot linked above. Happy coding!

Welcome to the Treehouse Community

Looking to learn something new?

Josh Keenan

Josh Keenan

Change the drop down you built in jquery to burger

1 Answer

rydavim

rydavim

Josh Keenan

Josh Keenan

rydavim

rydavim