Navigation en faux select

Système de navigation pour mobile où l'élément représentant la page en cours est visible au niveau du "Trigger".

by oilvier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<nav class="landing-nav" data-landing-nav="nav">
  <ul class="landing-nav__nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li class="is-current"><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</nav>

SCSS

$base-font-size: 16px;
$vertical-spacing: 20px;
$landing-nav-height: 42px;
$boulder: #777; 
$gallery: #eee;
$crimson: crimson;

@function rem($value, $base: $base-font-size) {
	@return $value / $base * 1rem;
}
 
@function em($px, $base: $body-font-size) {
    @return ($px / $base) * 1em;
}

@mixin sr-only {
  border:0!important; 
  clip:rect(1px, 1px, 1px, 1px)!important; 
  clip-path:inset(50%)!important; 
  height:1px!important; 
  overflow:hidden!important; 
  padding:0!important; 
  position:absolute!important; 
  width:1px!important; 
  white-space:nowrap!important;
}


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

[type="submit"], 
[type="button"], 
[type="reset"],
button {
  cursor: pointer;
  border: 0;
  overflow: visible;
}

.sr-only {
	@include sr-only;
}


.landing-nav {
	position: relative; 
	margin-bottom: rem($vertical-spacing); 
	background-color: $boulder; 
	color: white;
}
	
	.landing-nav__trigger {
		display: block; 
		padding: 0; 
		width: rem(40px); 
		height: rem($landing-nav-height); 
		background-color: $boulder; 
		color: white; 
		transition: box-shadow .25s, color .25s, background .25s;
		& > svg {
			fill: currentColor; 
			vertical-align: middle; 
			transform: rotate(90deg); 
			transition: transform 0.25s;
		}
		
		&:hover {
			background-color: white; 
			color: $boulder;
		}
		&:focus {
			box-shadow: inset 0 0 0 3px rgba(white,.5);
		}

		.is-active & > svg {
			transform: rotate(-90deg);
		}
	}

	.landing-nav__nav {
		margin-bottom: 0; 
		
		& > li {
			position: relative; 
			display: block; 
			border: 0 solid $gallery; 
			background-color: $boulder; 
			z-index: 1; 
			transition: margin .25s, color .25s;

			& > a,
			& > span {
				display: block; 
				padding: rem(10px) rem(15px); 
				height: rem($landing-nav-height); 
				font-size: rem(18px); 
				text-decoration: none; 
				transition: background 0.15s ease-out;
			}

			& > a {
				&:hover,
				&:focus {
					background-color: $crimson;...

JavaScript

$('body').removeClass('no-js').addClass('js');

if ($('[data-landing-nav="nav"]').length) {

  var $landingNavTrigger  = $('[data-landing-nav="trigger"]'),
  		$landingNavLinks 		= $('[data-landing-nav="nav"]').find('a');

  enquire.register("only screen and (max-width: 480px)", {
    match: function() {
      $landingNavTrigger = $('<button type="button" class="landing-nav__trigger" data-landing-nav="trigger"><svg class="svg-icon" viewBox="0 0 20 20"><path fill="currentColor" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"></path></svg><span class="sr-only">Accéder à  la navigation</span></button>').prependTo('[data-landing-nav="nav"]');

      $landingNavTrigger.on('click', function(e) {
      	e.preventDefault();
        $('[data-landing-nav="nav"]').toggleClass('is-active');
      });
      
      $landingNavLinks.on('click', function(e) {
      	var $this = $(this);
        e.preventDefault();
        $landingNavLinks.parent('li').removeClass('is-current');
        $this.parent('li').addClass('is-current');
        $('[data-landing-nav="nav"]').removeClass('is-active');
      });

    },
    unmatch: function() {
      $landingNavTrigger.remove();
    }
  });


}