Enkel mobil slide-in-meny
Bygg en reponsive mobilmeny för mindre skärmar med CSS och lite jQuery
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 top
, bottom
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.
- Lägga till och ta bort klassen
.open
från vår meny - Ge menyn en bredd på 90% av skärmens bredd
- Hindra användaren att scrolla när menyn är öppen
- 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