Google Nexus Website Menu

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.

Google Nexus Menu

Today I want to show you how to reconstruct the sidebar menu of the Google Nexus 7 page. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices.

So let’s get started!

The Markup

Our menu will consist of two main parts: a main menu, the one that you can see at the top like a header, and the sidebar menu. We’ll give the class “gn-menu-main” to the first one and wrap the second one in a nav element. You could of course use any structure that you prefer.
The first menu item will contain the menu icon anchor and the nav element:

<ul id="gn-menu" class="gn-menu-main">
	<li class="gn-trigger">
		<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
		<nav class="gn-menu-wrapper">
			<!-- ... -->
		</nav>
	</li>
	<li><a href="http://tympanus.net/codrops">Codrops</a></li>
	<li><!-- ... --></li>
	<!-- ... -->
</ul>

Inside of the nav element we’ll add another wrapper that will help us with hiding the nasty scrollbar for Windows browsers. The heart of this submenu is the unordered list with the class “gn-menu”. It will consist of list items, some of which will have a sublist. The first item will be the special search input:

<div class="gn-scroller">
	<ul class="gn-menu">
		<li class="gn-search-item">
			<input placeholder="Search" type="search" class="gn-search">
			<a class="gn-icon gn-icon-search"><span>Search</span></a>
		</li>
		<li>
			<a class="gn-icon gn-icon-download">Downloads</a>
			<ul class="gn-submenu">
				<li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
				<li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
			</ul>
		</li>
		<li><a class="gn-icon gn-icon-cog">Settings</a></li>
		<li><!-- ... --></li>
		<!-- ... -->
	</ul>
</div><!-- /gn-scroller -->

Now, let’s style everything.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

Let’s start by setting border-box for all the box-sizing:

*,
*:after,
*::before {
    box-sizing: border-box;
}

Since we’ll be using an icon font for the icons, we’ll head over to IcoMoon and select some nice icons from Matthew Skiles’ Eco Ico set.

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'ecoicons';
    src: url("../fonts/ecoicons/ecoicons.eot");
    src: url("../fonts/ecoicons/ecoicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ecoicons/ecoicons.woff") format("woff"), url("../fonts/ecoicons/ecoicons.ttf") format("truetype"), url("../fonts/ecoicons/ecoicons.svg#ecoicons") format("svg");
}

Later we’ll use a pseudo element to add the icons to the anchors.

But let’s style all the lists before:

.gn-menu-main,
.gn-menu-main ul {
    margin: 0;
    padding: 0;
    background: white;
    color: #5f6f81;
    list-style: none;
    text-transform: none;
    font-weight: 300;
    font-family: 'Lato', Arial, sans-serif;
    line-height: 60px;
}

These are some general (reset) styles for the lists and the sublists.

Now, let’s specify the styles for the main list. It will be fixed to the top of the page and we’ll give it a height of 60 pixels:

.gn-menu-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    font-size: 13px;
}

The general style for all the links in our menu and submenus will be the following:

.gn-menu-main a {
    display: block;
    height: 100%;
    color: #5f6f81;
    text-decoration: none;
    cursor: pointer;
}

Let’s also define some hover styles where we invert the colors. For the first sidebar menu item which will have a search input, we’ll need a special hover style. There we won’t have an anchor that fills all the item, so let’s define the hover on the li and control what happens to the icon (the anchor) and the li itself:

.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
    background: #5f6f81;
    color: white;
}

The list item childen will float left and they’ll have a right border:

.gn-menu-main > li {
    display: block;
    float: left;
    height: 100%;
    border-right: 1px solid #c6d0da;
    text-align: center;
}

The first list item will be the special trigger item and because we will hide the text and use a pseudo element for the menu icon, we will set the user-select to none and the width to be the same as the items’ height.

.gn-menu-main li.gn-trigger {
    position: relative;
    width: 60px;
    user-select: none;
}

The last item in our main list will be floated right and we’ll swap the border:

.gn-menu-main > li:last-child {
    float: right;
    border-right: none;
    border-left: 1px solid #c6d0da;
}

The anchors for the main menu will have some padding and we’ll style the text a bit differently:

.gn-menu-main > li > a {
    padding: 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

Let’s clear the floats with the following micro clearfix hack by Nicolas Gallagher:

.gn-menu-main:after {
    display: table;
    clear: both;
    content: '';
}

Alright, so now it just misses the style of the menu icon, but let’s leave that one for later when we define the other icon pseudo classes.

Let’s move on to the wrapper for the sidebar menu. Why do we need those extra wrappers? Well, if you don’t mind having a scrollbar visible you might as well get rid of them and simply set the menu to overflow-y: scroll. But since the scrollbar really breaks our minimal design in browsers on Windows, we’ll use a little trick to hide it. We’ll set the main wrapper to be overflow hidden, with a certain width (initially it’s just wide enough to see the icon bar). Then we’ll give the scroll wrapper a slightly larger width and a height of 100%. The scrollbar will be hidden. Our menu will then extend to the height it needs and it will be scrollable.
Initially we want to hide the menu, so we’ll give it a negative left value (of its width). Why are we not using 2D translate here?

.gn-menu-wrapper {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 60px; /* will be transitioned to 340px */
    border-top: 1px solid #c6d0da;
    background: white;
    transform: translateX(-60px); /* will be transitioned to 0px */
    transition: transform 0.3s, width 0.3s;
}

.gn-scroller {
    position: absolute;
    overflow-y: scroll;
    width: 370px;
    height: 100%;
}

.gn-menu {
    border-bottom: 1px solid #c6d0da;
    text-align: left;
    font-size: 18px;
}

Let’s add a box shadow for separating the list items. This will help us avoid double lines when hiding the submenu items:

.gn-menu li:not(:first-child),
.gn-menu li li {
    box-shadow: inset 0 1px #c6d0da
}

Let’s add a transition the the submenu list items and set their initial height to 0:

.gn-submenu li {
    overflow: hidden;
    height: 0;
    transition: height 0.3s;
}

The color will be slightly lighter than the parent menu items:

.gn-submenu li a {
    color: #c1c9d1
}

Now, let’s style the special search item and the search input specifically. We want to make it really subtle like on the Google Nexus page, so we’ll give it a transparent background colors and make the placeholders look like a normal menu item:

input.gn-search {
    position: relative;
    z-index: 10;
    padding-left: 60px;
    outline: none;
    border: none;
    background: transparent;
    color: #5f6f81;
    font-weight: 300;
    font-family: 'Lato', Arial, sans-serif;
    cursor: pointer;
}

/* placeholder */

.gn-search::-webkit-input-placeholder {
    color: #5f6f81
}

.gn-search:-moz-placeholder {
    color: #5f6f81
}

.gn-search::-moz-placeholder {
    color: #5f6f81
}

.gn-search:-ms-input-placeholder {
    color: #5f6f81
}

Most browsers will hide the placeholder when we click on the input which is much better for the user to understand that this is an input. Chrome does not have that behavior so we’ll use a little trick to emulate the same thing by setting the color of the placeholder to transparent once the user clicks on the input and focuses it:

.gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder {
    color: transparent
}

input.gn-search:focus {
    cursor: text
}

On hover we will change the color of the input text to white, just like we do to the other anchors (this is the text the user types):

.no-touch .gn-menu li.gn-search-item:hover input.gn-search {
    color: white
}

We will also do that for the placeholder text:

/* placeholder */

.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder {
    color: white
}

.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder {
    color: white
}

.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder {
    color: white
}

.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
    color: white
}

The search icon anchor will be a special one because it won’t have the text visible next to it. The whole list item is a trick box. You see, by setting the icon anchor to position absolute, we will let the search input start at the very left of our list item. But remember, we gave the input a large left padding which will make the text start only after out search icon. When clicking on the search icon we will be actually clicking on the input, focusing it.

.gn-menu-main a.gn-icon-search {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
}

Now, let’s style the ::before pseudo element for the icons. We’ll set them to inline-block and give them a width of 60 pixel. We have to reset all the font styles, because now we’ll be using our icon font that we’ve included in the beginning of the CSS:

.gn-icon::before {
    display: inline-block;
    width: 60px;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'ecoicons';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

Let’s define the content for all the icons:

.gn-icon-help::before {
    content: "e000"
}

.gn-icon-cog::before {
    content: "e006"
}

.gn-icon-search::before {
    content: "e005"
}

.gn-icon-download::before {
    content: "e007"
}

.gn-icon-photoshop::before {
    content: "e001"
}

.gn-icon-illustrator::before {
    content: "e002"
}

.gn-icon-archive::before {
    content: "e00d"
}

.gn-icon-article::before {
    content: "e003"
}

.gn-icon-pictures::before {
    content: "e008"
}

.gn-icon-videos::before {
    content: "e009"
}

Normally, we want the text of the anchor to show next to the icon but sometimes, we only want to show the icon. But we don’t just want an empty anchor, the text should still be in the HTML. So we will wrap those special cases into a span which we will simply hide by setting the width and height to 0 and the overflow to hidden. Why not simply using display: none? Hiding the content like that would make it inaccessible to screen readers, so let’s make sure that we don’t “erase” anything so important for them:

.gn-icon span {
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}

Let’s not forget about our little menu icon in the main menu. So, we won’t use an icon from the icon font here, although you of course could. Instead we’ll create it with a box shadow that will use alternating colors (background and blue) to create the three lines. You could also use a gradient here if you prefer.

.gn-icon-menu::before {
    margin-left: -15px;
    vertical-align: -2px;
    width: 30px;
    height: 3px;
    background: #5f6f81;
    box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81;
    content: '';
}

On hover, we will invert the box shadow colors:

.no-touch .gn-icon-menu:hover::before,
.no-touch .gn-icon-menu.gn-selected:hover::before {
    background: white;
    box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;
}

And when it’s selected (our side menu is open), we’ll make it more blue:

.gn-icon-menu.gn-selected::before {
    background: #5993cd;
    box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd;
}

The last thing we need to do is to define our two classes for opening the menu for showing the icons only and for showing the whole menu. When we hover over the menu icon, we will show the icons only. Let’s call this class gn-open-part. The other class, gn-open-all will be applied either if we click on the main menu icon or if we hover over the icon part shown (the menu sidebar menu itself).
In both cases, we’ll need to reset the translate to 0:

.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
    transform: translateX(0px);
}

If we want to open the whole menu, we’ll need to set the right width:

.gn-menu-wrapper.gn-open-all {
    width: 340px;
}

Opening the whole menu, should also expand the submenu items:

.gn-menu-wrapper.gn-open-all .gn-submenu li {
    height: 60px;
}

Last, but not least, our precious media query that will make the menu use the whole width of the screen:

@media screen and (max-width: 422px) { 
    .gn-menu-wrapper.gn-open-all {
        transform: translateX(0px);
        width: 100%;
    }

    .gn-menu-wrapper.gn-open-all .gn-scroller {
        width: 130%;
    }
}

And we’ll also adjust the width of the scroll wrapper to be larger than the 100%. This is probably not too important as we don’t see scrollbars on most devices of that size.

Alright, now that we’ve styled everything, we’ll use some JavaScript for the logic of opening and closing the menu (i.e. applying the classes).

The JavaScript

So let’s create a small script that will take care of the menu functionality. When we hover over the menu icon, we want the first part of the menu to slide out so that we can see the icons. If we hover over the sidebar menu area or if we click on the main menu icon, then the rest of the menu should slide out. Clicking the menu icon again or clicking on any other part of the body should make the whole menu slide back in. So let’s see how we can pull all that off.

We start by caching some elements and initializing some variables. The bodyClickFn function defines what happens when the menu is open and we click somewhere else on the document. We should also take care of touch events.

    _init : function() {
        this.trigger = this.el.querySelector( 'a.gn-icon-menu' );
        this.menu = this.el.querySelector( 'nav.gn-menu-wrapper' );
        this.isMenuOpen = false;
        this.eventtype = mobilecheck() ? 'touchstart' : 'click';
        this._initEvents();

        var self = this;
        this.bodyClickFn = function() {
            self._closeMenu();
            this.removeEventListener( self.eventtype, self.bodyClickFn );
        };
    }

Let’s take a look at the events that need to be initialized.
We want to open the first part of the menu (let’s call it icon menu) when the main menu icon (trigger) is hovered. When we move the mouse out this same menu should slide back in.

    this.trigger.addEventListener( 'mouseover', function(ev) { self._openIconMenu(); } );
    this.trigger.addEventListener( 'mouseout', function(ev) { self._closeIconMenu(); } );

Once the icon menu is in the viewport, hovering over it will make the rest of the menu slide out. After it slides out, and we click somewhere on the body then the menu should slide back in. We need to bind the respective event (click or touchstart) to the document.

    this.menu.addEventListener( 'mouseover', function(ev) {
        self._openMenu(); 
        document.addEventListener( self.eventtype, self.bodyClickFn ); 
    } );

Finally if we click the menu icon, we want the whole menu to slide out or slide in if it’s already in the viewport. We will also bind (or unbind) the respective event (click or touchstart) to the document.

    this.trigger.addEventListener( this.eventtype, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        if( self.isMenuOpen ) {
            self._closeMenu();
            document.removeEventListener( self.eventtype, self.bodyClickFn );
        }
        else {
            self._openMenu();
            document.addEventListener( self.eventtype, self.bodyClickFn );
        }
    } );

One last thing: we don’t want the menu to slide back in if we click somewhere inside the menu area. Since we are binding the click/touchstart event to the document (so that the menu closes) we need to do the following:

    this.menu.addEventListener( this.eventtype, function(ev) { ev.stopPropagation(); } );

And here is the final _initEvents function and the methods to open and close the menu.

    _initEvents : function() {
        var self = this;

        if( !mobilecheck() ) {
            this.trigger.addEventListener( 'mouseover', function(ev) { self._openIconMenu(); } );
            this.trigger.addEventListener( 'mouseout', function(ev) { self._closeIconMenu(); } );
        
            this.menu.addEventListener( 'mouseover', function(ev) {
                self._openMenu(); 
                document.addEventListener( self.eventtype, self.bodyClickFn ); 
            } );
        }
        this.trigger.addEventListener( this.eventtype, function( ev ) {
            ev.stopPropagation();
            ev.preventDefault();
            if( self.isMenuOpen ) {
                self._closeMenu();
                document.removeEventListener( self.eventtype, self.bodyClickFn );
            }
            else {
                self._openMenu();
                document.addEventListener( self.eventtype, self.bodyClickFn );
            }
        } );
        this.menu.addEventListener( this.eventtype, function(ev) { ev.stopPropagation(); } );
    },
    _openIconMenu : function() {
        classie.add( this.menu, 'gn-open-part' );
    },
    _closeIconMenu : function() {
        classie.remove( this.menu, 'gn-open-part' );
    },
    _openMenu : function() {
        if( this.isMenuOpen ) return;
        classie.add( this.trigger, 'gn-selected' );
        this.isMenuOpen = true;
        classie.add( this.menu, 'gn-open-all' );
        this._closeIconMenu();
    },
    _closeMenu : function() {
        if( !this.isMenuOpen ) return;
        classie.remove( this.trigger, 'gn-selected' );
        this.isMenuOpen = false;
        classie.remove( this.menu, 'gn-open-all' );
        this._closeIconMenu();
    }

And that’s all! Thank you for reading and I hope you enjoyed this tutorial and find it useful!

Check out this in-depth video tutorial by Mike Deluxy that will guide you through the creation of the menu:

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 140

Comments are closed.
  1. Wow Mary!!! As always absolutly amazing work! Thank you very much for this great script!

    • I would use an other css sheet for lte 8 anyway most of the things you would like to use (when making a new good website) wont work in ie 8 or less… That way you get a nice site for people who care the web and something acceptable for people who don’t care. We as designers should stop trying to bring all the magic to those who use ie and give them what they deserve.

    • Hi,

      just a workaround for ie6, ie7 and ie8 loss of support for addeventlistener.

      In the gnmenu.js, at the top, add the following code :

      (function(win, doc){
      if(win.addEventListener)return; //No need to polyfill

      function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
      function addEvent(on, fn, self){
      return (self = this).attachEvent(‘on’ + on, function(e){
      var e = e || win.event;
      e.preventDefault = e.preventDefault || function(){e.returnValue = false}
      e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
      fn.call(self, e);
      });
      }
      function addListen(obj, i){
      if(i = obj.length)while(i–)obj[i].addEventListener = addEvent;
      else obj.addEventListener = addEvent;
      return obj;
      }

      addListen([doc, win]);
      if(‘Element’ in win)win.Element.prototype.addEventListener = addEvent; //IE8
      else{ //IE < 8
      doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
      docHijack('getElementsByTagName');
      docHijack('getElementById');
      docHijack('createElement');
      addListen(doc.all);
      }
      })(window, document);

      it will bring support for old ie versions for the hover mechanisms used here.

      (found in github : https://github.com/HenrikJoreteg/ICanHaz.js/pull/54)

      Tried and it works, even though there still are css problems. But that's a beginning !

      (pardon my poor english as i'm french, dudes)

    • Hi Ole… i would add your code on top but its not work .. error message say “Uncaught SyntaxError: Unexpected token ILLEGAL” … whats wrong ?

  2. stunning tutorial Mary !!
    fresh and very detailed !!
    thanks for share, excellent work as always !!

  3. You are just amazing Mary. I just Love your work and I can see passion in your work. Lovely!!

  4. This is really slick looking, but I tend to look at things a usability and accessibility tilt. So I began trying to use it with a keyboard and it is completely inaccessible. I tried it with VoiceOver for Mac as well thinking maybe there is a landmark or link set I can grab hold of, but that doesn’t work either.

    It’s one thing to create neat and exciting new interfaces, but when we exclude 20% of the population by not making them accessible, we are limiting the real potential.

    I checked out the Google Nexus 7 page to see if they have the same issue and while it isn’t keyboard accessible in that focus shows the element, at least it is screen reader accessible and if you use the keyboard to navigate you can access all the links.

    • Hi Greg,
      I understand your concerns and I’ll definitely keep that in mind for future tutorials and demos. In the meantime feel free to fork this on GitHub and add your improvements.
      Thanks for your feedback,
      cheers, ML

  5. This is a great tutorial. We are using a similar effect for a mobile menu on our website at my full-time job, but I like this one more. It has better functionality.

    Thanks for this, as always!

  6. Very nicely done.

    I wonder if it would be easy to make the expand happen on click rather than on hover. For a user who knew they wanted to skip down to the “Settings” gear icon, the “icon only state” would have no value.

    I’m on a desktop, so it may behave differently on a touch device.

    Guess I’ll give it a fork and see what I can do, thanks ML!

  7. Stunning as always!

    BTW – if you hover over the .gn-icon-menu and press tab key, menu will break on Chrome 28 & IE10 (suprisingly not on FF)..

  8. Awesome! What a timing! I was actually thinking of coding the exact same thing for myself but you saved me a lot of trouble. Thanks

  9. You are the greatest I’ve ever seen around, keep up the good work, you are the inspiration

  10. Really good article.
    Thanks a lot for sharing.
    Does someone have this source jquery version ?
    it’s hard to apply my website. so i need jquery verison.
    someone help me..

  11. codrops is my new favorite spot on the web. I implemented this menu on my site today, but made small adjustments that others might find useful:

    When the menu opens on a small device (iPhone), there’s no way to click the document body because it’s hidden by the menu – so the menu never closes. I commented out the stopPropagation() line to fix that.

    Also, because I’m using FontAwesome, I changed the markup slightly and things worked as expected:
    <ul class="gn-menu"> <li> <a href="/#/tasks/search" > <i class="gn-icon icon-search"></i> <span>Search for Projects</span> </a>
    Question – I noticed that submenus are rendered with height of 60px rather than hiding with height 0px. Is there some missing javascript to control that?

    • i too noticed this. submenus appear to just exist in the menu with no regard to the hovered item. they should be hidden until hovered over. no?

  12. And this is why Designers SHOULD learn how to code. Interaction Design is only going to get bigger and bigger. Thanks for the inspiration!

  13. Hi:

    When you add content, and make the page larger, on ipad or any device, when you scroll down the menu stays in the top but it don´t work. You need to scroll other time to the header and then the menu work other time. Con anybody help me??

  14. Wow… great menu…
    Is there a way to have submenus to this menu? i mean menu submenu subsubmenu etc?

  15. what i meant was that the subsubmenu should be visible only when click on submenu…

  16. Is there a possibility to let the small menu Always be visible and when you mouveover the small menu you get the big menu?
    On our website that’s better.

    • on your component.css file, find .gn-menu-wrapper and edit the -60px value to 0px value in all three transform… this will answer your request.

  17. Dear Mary Lou… again congratulations on you work… you did a wonderful job so far. I am new at JQuery and JavaScript but i did my best and modified your script so that it will open sub sub menus only on request (and succeeded so far)… but i got stuck when i wanted to make the script to auto increment stuff… may i ask for your help? If so… how can i reach you?
    Thank you.

    • i would love to see your modified version. i have been trying to do this myself without much luck

    • I would love to see your version for hiding sub-menus. I need to use this, too.
      Thanks!

    • Hi, could you share how you opened sub sub menus? I’ve been working with the JavaScript and know I’m missing that one little thing to make it work. Any assistance is appreciated! Thanks!

  18. Hello Codrops… I love everything you drop here… the weeklies – tutorials – blueprints… the whole lot… Best resource for inspiration and learning for me on the web without a doubt… Please keep them coming…

    Because I know you put a lot of work in to it I hate to bother you with questions… But maybe this is 1 with an easy answer for you guys… if not please just disregard it…

    Here’s the question….
    I am trying to use the nexus menu with the slitslider but I can not seem to get the dropout menu to position over the slider… i tried z-indexes here and there with no luck… Am I missing a simple change?

    Like I said if this is an easy answer it would be much appreciated… If not thanks anyway for the great posts and resources!!!

    WKR

    RV

    • Z-indexes only work when positioning on an element are absolute or relative, if you havent specified in both elements, it will default to none and z-index is ignored. if you havent already, try adding this to slitslider:
      position: relative; z-index: 1;

      and this to the menu:
      position: relative; z-index: 150;

      if position relatave screws up element positioning for either try changing it to absolute instead.

  19. Mary Lou, I am new to CSS & HTML. I am trying to make this menu on the right side of the page. Could you please be so kind and give me some pointers? Thanks.

  20. I’m wondering what the real point of the intermediate view of the menu is (only icons showing). As soon as you mouse over any part of the intermediate menu, the full (textual) menu shows. Why not just show the full textual menu right away? You’re forcing the user to do 2 hover actions to see what’s really in the menu rather than just 1, and I don’t see any benefit to the user by doing this.

    This is more a comment on Google’s decision choices than the recreation of the effect… 🙂

    • Icons are used widely and have become a common sense. An icons is more recognizable than a description string. So I consider this better to hover the menu show available menu items’ icon and hover on the icon to show more detail. This is just design, U can modify it for your own one:)

    • To make the menus open in full, change js/gnmenu.js line 45 from:
      this.trigger.addEventListener( 'mouseover', function(ev) { self._openIconMenu(); } );
      to:
      this.trigger.addEventListener( 'mouseover', function(ev) { self._openMenu(); } );

  21. Hi, absolute great component. Well done again Mary Lou. I need this to work with ie8 and ie9 unfortunately as well as the modern browsers. Just seeing if anyone has achieved this or what would be the best way. Thanks 🙂

  22. Thanks … for all the efforts you took to make this one work.

    But I found one issue – On ipad when you click on menu icon it will not open the sidebar

    Failure conditions
    1. Page with scroll – when you scroll down the page it will fail to open (Tried by adding more content on same page as in template)

    Working Conditions
    1. On page without scroll works properly
    2. Page with scroll — scroll position top – works properly

    • Hi, I want to put a jquery slider inside the li element, but the slider doesn’t show, What Can I do?

    • Thanks for the code, absolutely amazing but fixing this for ipad would complete it.
      anybody any ideas?? I’ve tried tweaking the css but I end up breaking it
      Cheers

  23. Is it possible to make this menu multi-level?

    I’ve tried to reproduce it but styling is something else. Opinions?

  24. it does not work in HTML5 tag . menu icon goes up and only two menu items displays. UI gets messup.

  25. Just to those interested, changed the code i mentionned earlier to this :

    !window.addEventListener && (function (WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) {
    WindowPrototype[addEventListener] = DocumentPrototype[addEventListener] = ElementPrototype[addEventListener] = function (type, listener) {
    var target = this;

    registry.unshift([target, type, listener, function (event) {
    event.currentTarget = target;
    event.preventDefault = function () { event.returnValue = false };
    event.stopPropagation = function () { event.cancelBubble = true };
    event.target = event.srcElement || target;

    listener.call(target, event);
    }]);

    this.attachEvent(“on” + type, registry[0][3]);
    };

    WindowPrototype[removeEventListener] = DocumentPrototype[removeEventListener] = ElementPrototype[removeEventListener] = function (type, listener) {
    for (var index = 0, register; register = registry[index]; ++index) {
    if (register[0] == this && register[1] == type && register[2] == listener) {
    return this.detachEvent(“on” + type, registry.splice(index, 1)[0][3]);
    }
    }
    };

    WindowPrototype[dispatchEvent] = DocumentPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = function (eventObject) {
    return this.fireEvent(“on” + eventObject.type, eventObject);
    };
    })(Window.prototype, HTMLDocument.prototype, Element.prototype, “addEventListener”, “removeEventListener”, “dispatchEvent”, []);

    Works like a charm now, better than previously as it take care of addeventlistener as well as removeeventlistener.

  26. Hi Mary lou,

    Great work. I have tried to use it into one of my project but found problem in android device, whenever I have tried to scroll down/up the page the menu icon (with three horizontal lines) also scrolls down/up with the page and after scroll completed it will set at its position. Tried to modify the css but fail. Can you help me to resolve it?

  27. Thanks for the tutorial. On my old Android 2.3 phone with the stock browser, there is no way to actually close the menu. When you tap in the body area the smaller menu stays visible. Maybe a close button would be good?