Creating a menu similar to Google Plus

I’m trying to achieve a responsive menu similar to Google Plus, where the main menu options are added to or removed from the “more” drop down as the window is resized.

The menu I have currently looks like this:

  • How to apply a fixed backgound in fullpage.js
  • Determining whether a route falls within another route in Google Map
  • How to stack multiple images directly on top of each other?
  • stick element to top of page until next element of that type appears
  • How can I get calculated of each of three elements in row can have 300px width?
  • How to scroll whole visible page down to an anchor with a smooth effect (Scriptaculous or jQuery)?
  • enter image description here

    Here is the code:

    // JQuery
    $(document).ready(function() {
        $("a.drop-menu").click(function () {
            $('#drop-menu').toggle();
        });
    });
    
    <!-- HTML -->
    <ul id="navigation">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Calendar</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="javascript:;" class="drop-menu">More</a>
          <ul id="drop-menu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Contact</a></li>
          </ul></li>
    </ul>
    
    /* CSS */ 
    #navigation {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
    }
    #navigation li {
      display: inline-block;
    }
    #navigation li a:link, #navigation li a:visited, #navigation li a:active {
      display: block;
      width: 120px;
      line-height: 50px;
      text-align: center;
      font-weight: bold;
      text-decoration: none;
      background-color: #27383F;
      color: #CCC8C0;
    }
    #navigation li a:hover, #navigation li a.active {
      background-color: #2C3C53;
    }
    
    #drop-menu {
      display: none;
      position: absolute;
      padding: 0px;
      margin: 0px;
    }
    #drop-menu li {
      display: block;
    }
    

    JSFiddle

    Currently, when the browser window is re-sized the menu options collapse as follows:

    enter image description here

    However, the below image is my desired result:

    enter image description here

    I’m wondering if there is a way to accomplish this without media queries? More specifically:

    1. How can I dynamically detect whether the window size is large enough or too small to contain the li tags in the main navigation on a single line?
    2. How do I swap the li tags between one menu and the other?

  • cursor stays faraway from the tooltip of javascript graph
  • Using !important in jQuery's css() function
  • can I use console/alert/some-other-means to read out ALL CSS properties at once?
  • Uncaught reference error: $ is not defined error
  • scrollTop & scrollLeft do not work on dispay:hidden elments
  • How to change css of tag from an outside link
  • One Solution collect form web for “Creating a menu similar to Google Plus”

    By not using media-queries I think you can use jQuery $( window ).width(); which will return width of browser viewport.. It should be like this:

    $(document).ready(function() {
        $("a.drop-menu").click(function () {
            $('#drop-menu').toggle();
        });
        if($( window ).width() < $("#navigation > li").length * (120 + 5)){
            //5px is the approximation of the gap between each <li>
            var html = $("#navigation > li").last().prev().html();
            $("#navigation > li").last().prev().remove();
            $("#drop-menu").append(html);
        }
        var bigger = $("#navigation > li").length + 1;
        var smaller = $("#navigation > li").length;
        $( window ).resize(function() {
          if($( window ).width() <= smaller * (120 + 5)){
              //5px is the approximation of the gap between each <li>
              var html = $("#navigation > li").last().prev().html();
              if(html != undefined){
                  $("#navigation > li").last().prev().remove();
                  $("#drop-menu").prepend("<li>"+html+"</li>");
                  bigger = $("#navigation > li").length + 1;
                  smaller = $("#navigation > li").length;
              }
          }
          if($( window ).width() >= bigger * (120 + 5)){
              //5px is the approximation of the gap between each <li>
              var html = $("#drop-menu > li").first().html();
              if(html != undefined){
                  $("#drop-menu > li").first().remove();
                  $("#navigation > li").last().before("<li>"+html+"</li>");
                  bigger = $("#navigation > li").length + 1;
                  smaller = $("#navigation > li").length;
              }
          };
        });
    });
    

    Check out this Fiddle, I believe it’s not the perfect result.. But, I believe you can use it as your starting point.. Hope it helps..