Hitta nått kul:
13 Pixlar   /   Artiklar   /   Enkel mobil slide-in-meny

Enkel mobil slide-in-meny

Bygg en reponsive mobilmeny för mindre skärmar med CSS och lite jQuery

22 April, 2014

När man bygger responsiva webbsidor är en vanligt förekommande utmaning navigeringen. Oftast vill man försöka minimera ytan som en meny tar upp men ändå göra den lättåtkomlig. I denna artikel bygger vi en snygg och enkel responsiv meny som går att använda i många olika projekt.

Förutsättningar

  • Menyn vi bygger ska glida ut från sidan och inte ta upp någon onödig yta.
  • Menyn skall lämna en liten del av skärmen synlig.
  • JavaScript/jQuery får endast användas måttligt.
  • Vi använder font-ikoner (i detta fallet Font Awesome) som menyknappar

Eftersom nästan alla webbsidor använder någon form av js-biliotek, i många fall jQuery, kommer även denna meny att göra det. Med jQuery kan vi enkelt ta bort och lägga till klasser till olika element samt förhindra scrollning när menyn är utfäld.

Vill du se ett exempel på hur vår respons mobil-meny kommer att se ut när den är färdig kan du titta uppe i högra hörnet på denna site (eller förminska webbläsarfönstret om du sitter i desktop).

Kod

Nedan följer koden för menyn. Det går bra att kopiera denna om du vill följa med i programmeringen.

HTML

Vår html-kod innehåller ett element för hela menyn, ett inre element samt en un-ordered list, ul. Vi har även en knapp som man klickar på för att öppna och stänga menyn. För att göra det hela lite snyggare lägger vi även till en logga i menyn som fejdar in efter att menyn öppnats.

<div class="mobile-menu-btn"></div>
<div class="mobile-menu">
	<div class="inner">
		<img src="/img/top-logo-mobile.png" class="top-logo-mobile">
		<ul>
			<li><a href="#">Hem</a></li>
			<li><a href="#">Artiklar</a></li>
			<li><a href="#">Om oss</a></li>
			<li><a href="#">Kontakt</a></li>
		</ul>
	</div>
</div>

CSS

De viktigaste CSS-deklarationerna är enkla. Vi sätter vår meny till position:fixed, ger den ett topbottom och width av 0 samt placerar den längst till höger på skärmen.

Det viktiga här är hur vi döljer menyn när den är stängd och hur vi animerar fram den när den skall visas. Genom att låta menyn ta upp hela höjden, ge den en bredd på 0 pixlar och placera den längst till höger syns den inte.

.mobile-menu {
	background: #323a41;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 0;
	transition: .3s;
	overflow: hidden;
}
.mobile-menu.open {
	width: 90%;
}

När användaren sedan öppnar menyn animerar vi bredden till 90%. På så vis syns fortfarande en liten del av innehållet. En lagom tid för animationen är 0.3 sekunder: transition:.3s;

jQuery

Det jQuery skall hjälpa oss med är fyra olika saker.

  1. Lägga till och ta bort klassen .open från vår meny
  2. Ge menyn en bredd på 90% av skärmens bredd
  3. Hindra användaren att scrolla när menyn är öppen
  4. Räkna om bredden på menyn om användaren byter mellan vertikalt och horisontellt läge

Det första är lätt.

$('.mobile-menu-btn').click(function(e) {
	$('.mobile-menu').toggleClass('open');
});

Det andra vi skall göra är att ge vår inre container samma bredd som skärmen, minus 10%. Anledning till att vi behöver göra detta är att menyn skall glida in utan att det ser konstigt ut.

Vi skapar därför en funktion som mäter skärmens bredd, drar bort 10% och applicerar värdet på .inner innan menyn öppnas.

function getWidth(){
	var width = $(window).width();
	width = width * 0.9; // 90%
	$('.mobile-menu .inner').css({
		width: width
	});	
}

För att för hindra scrollning när menyn är öppen använder vi eventlyssnaren touchmove och .bind() respektive .unbind(). Vi använder även en variabel, preventScolling, som vi skapat för att hålla koll på om menyn är utfälld eller inte.

if (preventScrolling === false) {
	$(document).bind('touchmove', function(e) {
		e.preventDefault();      
	});
	preventScrolling = true;
}else{
	$(document).unbind('touchmove', function(e) {
		e.preventDefault();      
	});
	preventScrolling = false;
}

Slutligen använder vi eventlyssnaren orientationchange som varje gång orienteringen ändras kör vår funktion getWidth() och på så vis justerar vår meny till rätt bredd.

window.addEventListener("orientationchange", function() {
	getWidth();
}, false);

Alltihop tillsammans ser ut så här:

<script type="text/javascript">
	jQuery(document).ready(function($) {
	
	// Variabler
	var doc = $(document);
	var preventScrolling = false;
	var eventhandler = function(e) {
	   e.preventDefault();      
	}

	// Lyssna efter orientationchange
	window.addEventListener("orientationchange", function() {
		getWidth();
	}, false);

	// Sätt bredden på menyn beroende på skärmens storlek
	function getWidth(){
		var width = $(window).width();
		width = width * 0.9; // 90%
		$('.mobile-menu .inner').css({
			width: width,
		});	
	}

	// Toggla menyn och förhinda scrolling när den är öppen
	$('.mobile-menu-btn').click(function(e) {
		
		// Bestämm skärmens bredd
		getWidth();

		$('.mobile-menu').toggleClass('open');
		$(this).toggleClass('open');
		if (preventScrolling === false) {
			doc.bind('touchmove', eventhandler);
			preventScrolling = true;
			overSearch.removeClass('hidden');
		}else{
			doc.unbind('touchmove', eventhandler);
			preventScrolling = false;
		}
	});
});
</script>

OBS Koden ovan är något optimerad jämfört med våra exempel

Det sista vi skall göra är att snygga till vår meny, lägga till lite ikoner och några länkar. Den färdiga CSS:en ser ut så här


.mobile-menu {
	background: #323a41;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 0;
	text-align: right;
	padding-top: 60px;
	transition: .3s;
	overflow: hidden;
	font-family: Verdana, sans-serif;
}
.mobile-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 30px;
}
.mobile-menu ul li a{
	display: block;
	padding-right: 15px;
	color: #F49B27;
	text-decoration: none;
}
.mobile-menu.open {
	width: 90%;
}
.mobile-menu-btn {
	display: inline-block;
	position: fixed;
	top: 0;
	right: 10px;
	cursor: pointer;
	font-size: 30px;
	color: #F49B27;
	z-index: 99;
}
.mobile-menu-btn:after {
	content: "\f0c9";
	font-family: FontAwesome;
	transition: 1s;
}
.mobile-menu-btn.open:after {
	content: "\f00d";
}
.top-logo-mobile {
	position: absolute;
	top: 10px;
	left: 10px;
	opacity: 0;
	transition: .8s .3s;
}
.open .top-logo-mobile {
	opacity: 1;
}

Glöm heller inte att inkludera jQuery (om du inte redan gjort det) och Font Awesome.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Vad gör jag nu då?

Menyn är färdig. Givetvis finns det fler saker man kan stoppa in. Här på 13 Pixlar har jag en sökruta och de hetaste ämnena i menyn. Menyn visas och döljs med media queries.

Använd menyn i ditt nästa projekt. I en framtida artikel kommer vi att utveckla denna meny till en jQuery-plugin och samtidigt lära oss hur man skapar jQuery-plugins.

Det finns bättre sätt att skapa en responsiv mobil-meny

Självklart finns det en mängd olika sätta att lösa navigeringen på mindre enheten. Koden ovan är bara ett av dessa. Om du vill så får du gärna bidraga till denna kod som finns på Github och är Open Source.

Ladda ner mobil-menyn

Du kan ladda ner källkoden på Github: https://github.com/13pixlar/slide-in-meny