LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
Menu

The Skip the Subnav

From Complex Navigation Patterns for Responsive Design:

Sub-navigation typically includes items that are also included on the parent category’s landing page. Because that content is accessible on the landing pages, it’s perfectly viable to simply take small screen users straight to the landing page and let them make their next move from there.

Pros

  • Avoids having to deal with sub-navigation altogether – Simply taking the user to a new page removes the headaches that arise from dealing with sub-nav. While it may feel like cheating, remember that tap means intent for devices without hover states. So when a user taps on “clothing” and then gets taken to the clothing landing page, they’re getting what they wanted.
  • Simple – Links to other pages. Web design 101.

Cons

  • Requires a full page refresh to access sub-navigation items. – This is a pretty big con. Having to go to an entirely separate page isn’t terribly efficient for quick navigation.
  • Small screen users still download sub-nav content – This can also be a pretty big con. It’s a classic case of mobile users downloading elements that they won’t ever use. However, it doesn’t have to be this way. Sub-navs, especially huge fucking mega menu monstrosities stuffed to the fucking gills with a bunch of shit and images nobody wants anyways……where was I? Ah yes, can (read: should) be conditionally-loaded so that small-screen users don’t have to download unused crap content.

Resources

In the Wild

CSS
a.menu-link {
        float: right;
  	    display: block;
		    padding: 1em;
		}
		.menu, .menu > ul ul {
			clear: both;
			-webkit-transition: all 0.3s ease-out;  
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		.js .menu, .js .menu > ul ul {
			overflow: hidden;
			max-height: 0;
			background: rgba(0,0,0,0.1);
		}
		.menu.active, .js .menu > ul ul.active {
			max-height: 55em;
		}
		.menu > ul {
			border-top: 1px solid #808080;
		}
		.menu li a {
			color: #000;
			display: block;
			padding: 0.8em;
			border-bottom: 1px solid #808080;
			position: relative;
		}
		.menu li.has-subnav > a.active:after {
			content: "-";
		}
		
		
		@media screen and (min-width: 48.25em) {
			.pattern {
				overflow: visible;
			}
			a.menu-link {
			   display: none;
			}
			.js .menu, .js .menu > ul ul {
				max-height: none;
				overflow: visible;
				background: none;
			}
			.js .menu > ul ul {
				background: #808080;
				display: none;
			}
			.js .menu > ul li:hover > ul {
				display: block;
			}
			.menu ul {
				margin: 0 0 0 -0.25em;
				border: 0;
			}
			.menu li a {
				border: 0;
			}
			.menu li.has-subnav > a {
				padding-right: 2em;
			}
			.menu li.has-subnav > a:after {
				content: ">";
				font-size: 1em;
				padding: 0.8em 0.5em;
			}
			.menu .level-1 > li.has-subnav > a:after {
				content: "▼";
			}
			.menu > ul li {
				margin: 0 0.25em;
			}
			.menu > ul > li {
				display: inline-block;
				position: relative;
			}
			.menu > ul ul {
				position: absolute;
				top: 0;
				left: 12em;
				width: 12em;
			}
			.menu > ul ul li {
				position: relative;
			}
			.menu > ul ul.level-2 {
				top: 3em;
				left: 0;
			}
		}
JS
$(document).ready(function() {
      $('body').addClass('js');
      var $menu = $('#menu'),
  	  	  $menulink = $('.menu-link'),
		  	  $menuTrigger = $('.has-subnav > a');
		
		$menulink.click(function(e) {
			$menulink.toggleClass('active');
			$menu.toggleClass('active');
		});
});

Description

Sub-navigation typically includes items that are also included on the parent category’s landing page. Because that content is accessible on the landing pages, it’s perfectly viable to simply take small screen users straight to the landing page and let them make their next move from there.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv