Menyer
Historia
Ursprungligen betraktades navigeringsdelen som en lista av länkar. Därför är de flesta navigeringsmenyer byggda med en oordnad (ul) lista i botten och sedan fyller listelement (li) upp den. I varje listelemnet ligger en länk som man ändrar grundtyp på från inline till block, så länken fyller upp hela listelementet.
Här på w3school visas tekniken med en ul.
Även BestOnline's äldre version med ul går att studera.
De flesta exempel på Internet är byggda med en lista i botten. Det finns massor av olika sätt att bygga på. Jag kommer nedan demonstrera ett av dessa som jag tycker är förhållandevis enkelt att starta med. Vi håller oss till att bygga med HTML+CSS och blandar inte in någon javascript.
3 Exempel
Jag kommer här visa hur man bygger 3 olika menyer. Varje meny kan byggas på många olika sätt. Syftet här är att ge grunderna så att du kan utveckla egna menyer och ta till dig tips på internet om hur man kan göra.
Vertikal meny
Börjar med lite stilmall och htmlkod. Självklart ligger de i olika filer.
width:200px;
padding:10px;
background-color:#0F3;
border:1px black solid;
}
********************************************
<nav>
<a href="">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
Vårt startläge ser ut på följande sätt :
Nu ska vi designa om vår meny. Vi börjar med länkarna:
/* Meny design */
nav a
{
display: block;
padding: 5px 10px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
text-decoration: none;
}
********************************************
<nav>
<a href="">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
Alla länkar som ligger i ett nav-element ska visas som block (det vill säga fylla upp omgivande block-element som är list-element, li). Anledningen är att musen ska se ut som en hand då musen förs över hela block-elementet och inte bara länk-texten som vi brukar ha på länkar. Det medför också att hela ytan är klickbart som en länk.
Vi bygger på med inbäddning, 5px uppe och nere samt 10px till vänster och höger. Lite bakgrundsfärg och textfärg samt inställningen att länkarna inte ska ha streck under länktexten.
Nu ska vi designa om när vi för musen över en länk och den som är "aktuell":
/* Meny design */
nav a
{
display: block;
padding: 5px 10px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
text-decoration: none;
}
nav a:hover
{
background-color: #fff;
}
nav a#current
{
background-color: #f66;
}
********************************************
<nav>
<a href="" id="current">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
Vi lägger till pseudoklassen hover till selektorn a(länk) och ställer in bakgrundsfärg som visas då musen förs över länken (som täcker hela li-elementet).
Vi samma sätt lägger vi till id:et "current" till selektorn a(länk) och ställer in bakgrundsfärg som visas då visa för länken med just det unika id:et i html-koden.
Horisontell meny
Nu ska vi designa om vår punktlista. Vi börjar med:
.container {
background-color:#fff;
padding:10px;
width:400px;
margin:auto;
}
nav {
padding:10px;
background-color:#0F3;
}
********************************************
<div class="container">
<nav>
<a href="">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
<div>
Vi skapar en centrerat div-element på 400px på sidan.
Sätter lite inbäddning och bakgrundsfärg på nav-elementet.
Först:
nav {
padding:10px;
background-color:#0F3;
}
/* Länk design */
nav a {
text-align: center;
padding: 10px 15px;
text-decoration: none;
font-size: 15px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
}
********************************************
<div class="container">
<nav>
<a href="">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
<div>
Vi får lite oväntat och oönskat glapp mellan länkarna. Det beror på att de är "inline-block". Webbläsarna tolkar detta väldigt underligt och lägger in ett blanksteg mellan varje länk. Det finns flera sätt att kringå detta.
Till exempel
- skriv alla länkar på samma rad i html-koden
- dela upp länk-koden i html-filen på två rader
- negativt värde på margin
- använda float
Vi börjar med att skriva alla länkar på samma rad och lägger till lite design. Samma finess som i vertikala menyn, lite "hover"-effekt och så en egen färg till aktuell ("current") länk.
...
...
nav a:hover
{
background-color: #fff;
}
nav a#current
{
background-color: #f66;
}
********************************************
<div class="container">
<nav>
<a href="" id="current">Sida 1</a><a href="">Siiiiiiida 2</a><a href="">Sidaaa 3</a>
</nav>
</div>
Att det blir dubbla linjer mellan länkarna lämnar jag till läsaren att fixa :) .
Horisontell meny med brutna länkar på flera rader
Vi byter bara lite i htmlkoden. Länkarna avslutas inte på en och samma rad utan slut-taggen skrivs på raden under.
...
...
********************************************
<div class="container">
<nav>
<a
href="" id="current">Sida 1
</a><a href="">Siiiiiiida 2
</a><a href="">Sidaaa 3
</a>
</nav>
</div>
Horisontell meny med negativ "margin"
Vi har våra ordinarie länkar i html-filen för en snygg struktur.
För att få dessa sen att ligga snyggt intill varandra så ställer vi in "margin" i stilmallen. Tyvärr beror denna margin på aktuell textstorlek, så den måste testas.
...
...
nav a {
margin:0px -3px;
text-align: center;
********************************************
<div class="container">
<nav>
<a
href="" id="current">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
</div>
Horisontell meny med "float"
nav {
padding:10px;
background-color:#0F3;
overflow:hidden;
}
/* Länk design */
nav a {
float: left;
text-align: center;
padding: 10px 15px;
text-decoration: none;
font-size: 15px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
}
********************************************
<div class="container">
<nav>
<a href="">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
<div>
Sätter egenskapen overflow:hidden i css:en för nav på grund av att a-elementen placeras som flytande element inuti vårt nav-element.
Att det blir dubbla linjer mellan länkarna lämnarjag till läsaren att fixa :) .
Använder float:left för att länkarna (a-elementen) ska lägga sig tätt ihop.
...
...
nav a:hover
{
background-color: #fff;
}
nav a#current
{
background-color: #f66;
}
********************************************
<div class="container">
<nav>
<a href="" id="current">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
</div>
Till slut samma finess som i vertikala menyn, lite "hover"-effekt och så en egen färg till aktuell ("current") länk.
Flik meny
Nu ska vi designa om vår horisontella meny. Lägg till lite html-element och lite design på dessa. Vi börjar med:
body {
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
}
.container {
width:400px;
padding:10px;
margin:auto;
background-color:#fff;
}
article {
background-color: #f66;
color: white;
padding:30px;
border-top:1px solid #333;
}
h1 {
margin:0px;
padding:0px;
}
nav {
padding:20px;
background-color:#0F3;
}
/* Länk design */
nav a {
margin:0px -3px;
text-align: center;
padding: 10px 15px;
text-decoration: none;
font-size: 15px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
}
nav a:hover
{
background-color: #fff;
}
nav a#current
{
background-color: #f66;
}
********************************************
<div class="container">
<nav>
<a href="" id="current">Sida 1</a>
<a href="">Siiiiiiida 2</a>
<a href="">Sidaaa 3</a>
</nav>
<article>
<h1>HEEEEEEEEEEEEJ!</h1>
</article>
<div>
Inga konstigheter i inledningen. Vi skapar ett centrerat div-element med en div med nav-element i samt article-element också inuti.
Vi behöver justera några fler små designdelar.
Anpassa nu height i nav så länkarnas nedre kantlinje ligger på article-elementets toppkantlinje. Samt se till att den aktuella flikens nedre kantlinje blir i samma färg som ytan nedanför, så det ser ut som de sitter ihop.
Fixa lite avstånd mellan flikarna.
(margin-left:10px;)
...
...
nav {
padding-top:20px;
background-color:#0F3;
height:30px;
}
...
...
nav a {
margin:0px -3px;
...
margin-left:10px;
}
...
...
nav a#current
{
background-color: #f66;
border-bottom: 1px solid #f66;
}
Bättre lösning med flexbox
...
...
nav {
display:flex;
/* align-items:flex-end; //Blir automatiskt */
padding-top:20px;
background-color:#0F3;
}
...
...
nav a {
margin:0px -3px;
...
margin-left:10px;
position:relative;
top:1px;
}
...
...
nav a#current
{
background-color: #f66;
border-bottom: 1px solid #f66;
}
Mer exempel
w3schools vertikala och horisontella css-designade menyer
w3schools-meny-exempel
w3schools flikmeny med lista
Äldre exempel med listor
Olika avancerade menyer
Mellanrum mellan inline-block element
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
http://privat.bahnhof.se/wb638236/nybeunia/ninetnet/websidor/css/css_menyer.html#hmf
Filmer
Andra "äldre" lösningar:
film - vertikal meny
film - horisontell meny
film - horisontell meny ver2