Shared publicly  - 
 
I released a new version of my website, Adventures in Responsive Navigation after my recent talk at WordCamp Atlanta. Love to hear any feedback!
Tutorials on navigation patterns in responsive web design. Includes code examples of how to handle menus on responsive websites.
5
2
Pyromancer Jack's profile photoCarmine Baratta's profile photoTim Willis's profile photoErick Arbé's profile photo
36 comments
 
From my phone...Looking good - I'm a fan of the multi-toggle and always off canvas methods. Now to incorporate your tips in my design!
 
Are you going to document the kind of navigation you have implemented for your site?
I just saw it for the first time, therefore I don't know whether the Hamburger menu is new …
 
+Norbert Rittel The actual hamburger in the top left is new - yes. But great suggestion - I should keep a change log for this site! Danke!
 
+Erick Arbé After going through a lot of sample material in the last days I've come to the conclusion that we really need a standard navigation bar scheme to apply to all websites. Today's situation is really just terrible.

For me the best solution today is the hamburger menu on google.com/nexus which probably inspired your design change as well.

For Wordpress all I found so far is highfxmedia.com/blog/hamburger-menu-wordpress/ which also references the original source from +Codrops.

We really need this as a plug & play solution for Wordpress or Blogger to spread the word …
 
True, there are a lot of different ways to call out a menu button.  I like using the word "Menu" in combination with the hamburger most times. A lot of "average" web users just don't know what 3 bars mean. I hate to categorize people, but you are correct - there is no standardized icon that means "menu" or "navigation". 
 
+Erick Arbé I've read those studies as well, but they don't say much about the actual implementation of the navigation icon or bar.
If you make a navigation bar like on google.com/nexus which does not scroll out of the view, then I'm sure that a lot more users will understand its purpose and try to click or touch the hamburger icon.

Also note that most talk about responsive design talks about adapting to smaller screens but not about bigger screens! I do have a 23" Dell Touchscreen here (attached to a Google Chromebook) on which I test sites in fullscreen mode. For example to use them in Kiosk mode. And there most sites fail miserably, too. That Nexus site being a notable exception, too.
 
The site is interesting but for someone new to responsive it's a bit confusing.  Without seeing your HTML markup, it's so of useless.

I can identify the classes and IDs and how they'd be used, but it's a lot of trial and error to get it to work right.

Seeing just the CSS and being able to play with it is nice, but useless w/out the markup.

Maybe you could add this?
 
+Chris Shaffer - thanks for the remarks. I might just put these examples on codepen so users in your position could easily edit the markup, css, and js. I'll put that on list for the next round of updates. I appreciate the feedback!
 
Your stuff is terrific. One question: how can I change multi-toggle from mouseover or hover to click to open the child items?
 
Hi Erick. I tried to put your multi-toggle menú in a local wordpress site I use for code practice. The menu runs ok, but I can't get it work when the viewport makes it shrink (the accordion does not show below the menu bar). Is there something more to add? (javascript or jquery code, stuff like that). BTW, I loved your entire site with examples, I wanna get it all ;)
 
Jorge - I think what you're describing needs another @media screen in the CSS.  Take a look at the existing CSS for this menu.  @media adjusts the drop-down menu size based on viewing resolution.  You should be able to basically copy some of the existing CSS and edit it for a lower resolution.

Here is what I'm using, though of course you'll need to remove/edit some of the classes as these won't be applicable in your CSS.  Hope this helps:

[--


@media screen and (max-width:1024px)
{
      
        nav
            {
             height:auto;   
            }
        
        nav ul
            {
                width:100%;
                display:block;
                height:auto;
                
            }
        
        nav li
            {
                width:50%;
                float:left;
                position:relative;
            }
        
               
        nav a
            {
                text-align:left;
                width:100%;
                text-indent:25px;
            }
        
        .topbanner #bannerimg
            {
                max-width:1024px;
            }

}


@media only screen and (max-width:1024px)
{
        
        nav
            {
                border-bottom:0;
            }
        
        nav ul
            {
                display:none;
                height:auto;
            }
        
        nav a#pull
            {
                display:block;
                background-color:#7f7fff;
                width:100%;
                position:relative;
                
            }
        
        nav a#pull:after
            {
                content:" ";
                background:url('nav-icon.png') no-repeat;
                width:30px;
                height:30px;
                display:inline-block;
                position:absolute;
                right:15px;
                top:10px;
            }
        
        nav li:nth-child(odd) a
            {
                border-bottom:1px solid white;
                border-right:1px solid white;
            }
        
        nav li:nth-child(even) a
            {
                border-right:none;
                border-bottom:1px solid white;
            }
        
        
        .article #left
            {
                width:auto;
                min-width:320px;
                max-width:1024px;
                padding-top:10px;
                float:center;
                clear:both;
                
            }
        
        .article #right
            {
                width:auto;
                min-width:320px;
                max-width:1024px;
                padding-top:5px;
                float:center;
                clear:both;
                
            }
        
        .article #center
            {
                width:100%;
                min-width:320px;
                max-width:1024px;
                padding-top:5px;
                float:none;
                clear:none;
            }
        
        .topbanner
            {
                margin-bottom:5px;
            }
    
        .topbanner #bantext
            {
                font-size:4em;
            }
    
        .article #leftlist
            {
                
                margin-left:10%;
                
                
            }
}        
       
        

@media only screen and (max-width:480px)
{
        
        nav li
            {
                display:block;
                float:none;
                width:100%;
                border-right:none;
            }
        
        nav li:nth-child(odd) a
            {
                border-right:none;
                
            }
        .topbanner #bantext
            {
                font-size:3em;
            }
        
    .topbanner
            {
                
                background-repeat:no-repeat;
                background-size:auto;
                background-position:center;
            }
      
        
        
}

--]
 
Hi Erick,

I love the multi toggle responsive example you show http://responsivenavigation.net/examples/multi-toggle/  

I am using it for a site, and when viewed through mobile device, it works ok if all the files are at the top level on the server. However, for my drop down menu, the files are in a sub folder - as would be usual. Once I have navigated down the subfolder tree, this multi toggle menu doesn't work. Eg. If I have navigated to /Subfolder/subpage1.php, then clicking the menu icon, it goes to /Subfolder/subpage1.php#menu

 Do you know what could be wrong? Many thanks
 
David,

This seems like it would be a problem with JS not loading on your sub pages. You might not be calling in the JS relative to your root. That make sense? 
 
Matthew - yes of course. Just view the source code and take what you need!
 
I think you had better to give a simple HEIGHT  to your div.box cause of large screens
best regards
 
Jaques,

Thanks for that - I obviously hadn't tested it on a large enough monitor! 
 
HI. I would like to use your sidebar Allways off canvas, however,  i can not find any source and the  css example is so confusing . plz help me... thank u!!!!!!!!!!
 
Hi Eric,
I'm writing because I love the left hand side menue with the icons, which you used on your website and I would like to use it but I have trouble finding the class for defining how it hides or overlays because I would like to define the whole navi visible at a min-width of 1024px with visible content. I hope I didn't write too confusing and look forward to your answer =)
Del
 
Re the Toggle menu, Is there a way to put the information for the menu on an external style sheet?  I plan to have a few hundred entries so it would be good if the external can be done rather than have a very long page along with the other coding.

Thanks

Del
 
Del,

I assume you want to just put the CSS for the toggle menu into a separate style sheet? Not sure if that is what you are asking or not. If so, you can definitely do this!
 
Love the Multi-Dropdown! All of your work is inspiring and makes me wish I knew more. I have a question on it though. Is there a way to cancel out the preventdefault on desktop view ports for links with dropdowns, but when resized to mobile, it enables the preventdefault for the clickable drop down. 

For instance, I have a link that says Cars, and the drop down has various models. The way it is now, I can't click on cars to go to a page with all the models, but can only click the drop down items to go to those pages.

I tried adding a window resize "if statement", which works when the page is loaded, but when resized on desktop to reponsive, the preventdefault is staying or acting up.

Any help on this would be much appreciated because I love the simple jQuery of this menu. But like I said, I am not familiar enough with jquery to perfectly add to it like you could.

Thanks in advance for your help!!!!! Also, do you have a donations page?
 
Matthew,

Using enquire.js would probably be a good way to go. It's a pretty lightweight JS library that lets you run events based on media queries. http://wicky.nillia.ms/enquire.js/ 

So this way you could say "if the browser is X" then run this... and "if browser is X" then do this other thing.... Make sense? 

And no I don't have a donate page, but thanks for the kudos!

Cheers.
 
I love your site! However on the tinyNav page you have sub-menus and for the life of me I can not figure out how you get them to work. What's the secret?
 
Kenneth,

The sub-menus on that page are simply controlled via CSS. The magic lies here:

ul.dropdown ul { display: none; position: absolute; top: 100%; }
ul.dropdown li:hover > ul { display: block;  }

So when you hover, the drop-down appears. Make sense?
 
Hi. I'm a newby and have just tried the "Menu Overlay" Navigation on your website. But for some reason the clicking on the anchor-link 'Menu' the navigation won't open. (I just copied the CSS and the navigation of your website. see here: www.katzers.de/Navtest.html). Can you help?
 
Hi. I'm a newby and have just tried the adventures in responsive design, im trying to move the panel to the right and i cant seem to find the right css to do it. can you help
 
Hi Erick, sry for my english ;-) I have a problem with the Multi Toggle Menu. How can I set it up, that already the first point has a link. So the same as the first one in the submenu.
 
Rebecca - Not sure exactly what you mean. Can you be more precise? Maybe post an example to CodePen?
 
Absolutely brilliant tutorial website. lovely clear examples.  I learned a lot, thank you.  Personally I love the "do nothing" approach, looks good on computer, looks good and works well on my phone. Thanks!
 
I love the website. I am a newbie to mobile design and would like to know how you get the home and the hamburger to change. From reading the CSS it appears that you are calling fonts from a server? The icon-home and the hamburger aren't images.
 
Carmine - I'm using an icon font - I suggest you try IcoMoon - its a wonderful free generator.
 
Hi Erick, thanks for the wonderful site and documentation. I'm trying to implement the Multi-Toggle menu and have it just about working, but I can't figure out how to add the .active class while clicking the "menu-link." I picked through the site a bit but can't find any reference to the code that's doing it! Any direction would be appreciated. Thanks!
 
+Tim Willis Yes - it's the javascript that's making it happen:

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

var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-submenu > a');

$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});

$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});

});

You'll see in the page's source code (near the bottom) this snippet above. Hope that helps!
Add a comment...