Simpel responsive menu med jQuery
Skrevet af: Redaktionen 08-08-2013 Skrevet i: JQuery
I denne artikel vil jeg vise jer, hvordan man på en meget simpel måde kan lave en responsive menu som bliver til en dropdown menu (select tag) så snart browservinduet bliver mindre end 960 px i bredden. Denne type menu kan bruges, hvis du gerne vil spare plads på din mobile side.
Menuen benytter sig udelukkende af jQuery, CSS og HTML. Det er derfor en rigtig nem menu at implementere på sin hjemmeside.
Det første du skal gøre er at inkludere følgende CSS i dit stylesheet eller i headeren på din side. Dette CSS bruges til at style din menuen, og du kan derfor style den som du vil så den passer til din egen side.
CSS
* {
margin: 0;
padding: 0;
}
h1 {
font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
width: 500px;
margin: 0 auto 15px;
}
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
background: #333;
color: white;
padding: 5px 15px;
border: 1px solid white;
text-decoration: none;
}
nav a:hover {
border: 1px solid #EF8510;
background: #EF8510;
}
nav a:active {
background: blue;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
Når du har implementeret CSS koden kan du nu inkludere følgende jQuery kodestykke i din header. Der er tilføjet kommentarer i koden som forklarer hvad de enkelte stykker kode gør.
jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
// Vi linker som altid til jQuery biblioteket som vist ovenfor
<script>
// DOM ready
$(function() {
// Laver basen for vores dropdown
$("<select />").appendTo("nav");
// Laver standard muligheden "Gå til..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Gå til..."
}).appendTo("nav select");
// Udfylder vores dropdown menu med menupunkter
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
// Det næste får dropdown menuen til rent faktisk at virker
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
Det sidste du skal gøre er at indsætte følgende html det sted på din side hvor du ønsker menuen placeret.
HTML
<nav>
<ul>
<li><a href="#Hjem" class="active">Hjem</a></li>
<li><a href="#Boger">Bøger</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Omos">Om os</a></li>
<li><a href="#Support">Support</a></li>
</ul>
</nav>
Du kan se en demo af menuen her: DEMO
Prøv at gøre dit browservindue mindre, og så skulle menuen gerne blive til en drop-down liste.
