Menyer
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:130px;
padding:10px;
background-color:#0F3;
border:1px black solid;
}
********************************************
<nav>
<ul>
<li><a href="">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
Vårt startläge ser ut på följande sätt :
Nu ska vi designa om vår punktlista. Vi börjar med:
/* Meny design */
nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
********************************************
<nav>
<ul>
<li><a href="">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
Vi bygger på med lite mer stilmallskod.
För en oordnad lista som ligger i ett nav-element så sätter vi listans utseende till att inte ha några punkter framför listelementen samt inbäddningen och marginalerna är noll.
Nu ska vi designa om vår punktlista. Vi börjar med:
/* Meny design */
nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
nav a
{
display: block;
padding: 5px 10px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
text-decoration: none;
}
********************************************
<nav>
<ul>
<li><a href="">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</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 li-elementet och inte bara länk-texten som vi brukar ha på länkar. Det medför också att hela ytan i list-elementet ä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 vår punktlista. Vi börjar med:
/* Meny design */
nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
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>
<ul>
<li><a href="">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</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).
Nu ska vi designa om vår punktlista. Vi börjar med:
/* Meny design */
nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
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>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
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.
Nu ska vi designa om vår punktlista. Vi börjar med:
/* Meny design */
nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
nav a
{
display: block;
padding: 5px 10px;
border: 1px solid #333;
background-color: #ccc;
color: #000;
text-decoration: none;
background-image:url("bilder/bg1.png");
}
nav a:hover
{
background-color: #fff;
background-image:url("bilder/bg2.png");
}
nav a#current
{
background-color: #f66;
background-image:url("bilder/bg3.png");
}
nav ul li {
margin-bottom:10px;
}
********************************************
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
Om man vill ha bakgrundsbilder så är det bara att komplettera med det.
Här lägger jag dessutom till så att alla listelement som finns i oordnade listor som i sin tur finns i nav-elementet ska lite marginal nertill.
Bilderna bg1.png, bg2.png och bg3.png . (När du klickat på bilden och det blivit ny sida, förstora till 500% så ser ni bilderna, de är nämligen 1px breda.)
Andra sätt
Horisontell meny
Nu ska vi designa om vår punktlista. Vi börjar med:
.container {
width:400px;
margin:auto;
background-color:#ccc;
}
nav {
padding:10px;
background-color:#0F3;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</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;
overflow:hidden;
}
/* Meny design */
nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid #000000;
background-color: #ccc;
float:left;
}
nav li {
display: inline;
float:left;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
</div>
Sätter egenskapen overflow:auto (eller hidden) för att oordnade listan placeras som flytande element inuti vårt nav-element.
Ingen bredd, för då blir listan lika bred som alla li-element tillsammans. En kantlinje runt hela ul-elementet.
Och så alla list-element i nav-elementet sätts om till "inline" så de visas efter varandra på en rad.
...
...
nav a
{
display:block;
padding: 5px 10px;
border-right: 1px solid #000;
background-color: #ccc;
color: #000;
text-decoration: none;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
</div>
Float för att länkarna ska trycka ut padding(inbäddning) och fortfarande befinna sig inuti listelementen.
Kantlinje till höger på varje länk, vilket gör en dubbel längst till höger men de får ni fixa själva ;-).
...
...
nav a:hover
{
background-color: #fff;
}
nav a#current
{
background-color: #f66;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
</div>
Till slut samma finess som i vertikala menyn, lite "hover"-effekt och så en egen färg till aktuell ("current") länk.
Andra sätt
Flik meny
Nu ska vi designa om vår punktlista. Vi börjar med:
body {
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
}
.container {
width:400px;
margin:auto;
background-color:#ccc;
}
nav {
padding:10px 0 0 0;
background-color:#0F3;
border-bottom:1px #000 solid;
}
article {
padding:10px;
background-color:#F9F;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
<article>
<h1>Sida 1</h1>
</article>
</div>
Inga konstigheter i inledningen. Vi skapar ett centrerat div-element och ett nav-samt article-element under varandra.
Nu ska vi designa om vår punktlista. Vi börjar med:
...
...
/* Meny design */
nav ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
nav li {
display: inline;
}
********************************************
<div class="container">
<nav>
<ul>
<li><a href="" id="current">Sida 1</a></li>
<li><a href="">Sida 2</a></li>
<li><a href="">Sida 3</a></li>
</ul>
</nav>
</div>
Som tidigare så tar vi bort punkterna i listan, men denna gång sätter vi inbäddning i ul-elementet till 5px uppe och nere medan vänster och höger får 0px.
List-elementen får dispaly:inline för att de ska hamna på en och samma rad.
/* Meny design */
nav ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
nav li {
display: inline;
}
nav a
{
text-decoration: none;
margin-left: 5px;
border: 1px solid #000000;
border-bottom-width: 0px;
padding: 5px 10px;
background-color: #006699;
color: #ffffff;
}
På länkarna tar vi som vanligt bort strecket under. Vi sätter marginalen till vänster till 5px så att första fliken kommer 5px in från vänster.
Först sätter vi kantlinje runt hela på 1px heldragen svart men sen tar vi bort kantlinjen nertill
med "0px".
Vi sätter också padding i länken 5px uppe och nere samt 10px till vänster och höger.
OBS! Nu kommer länken trycka sig utanför li-elementet och och fylla upp ul-elementet. Poängen här är att den precis stannar ovanför nav-elementets nedre kantlinje. Eventuellt får man justera genom att ändra 5px(den röda markeringen) någon pixel (kanske 6px). Det beror på om du använder sans-serif eller serif teckensnitt.
/* Meny design */
nav ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
nav li {
display: inline;
}
nav a
{
text-decoration: none;
margin-left: 5px;
padding: 5px 10px;
border: 1px solid #000000;
border-bottom-width: 0px;
background-color: #006699;
color: #ffffff;
}
nav a:hover
{
background-color: #fff;
color:#000;
}
nav a#current
{
background-color: #F9F;
color:#000;
border-bottom: 1px solid #F9F;
}
Till slut samma finess som i tidigare menyer, lite "hover"-effekt så den byter färg och så en egen färg till aktuell ("current") länk.
Till aktuell länk lägger vi också till en kantlinje i nederkant i samma färg som "article"s bakgrundsfärg. Den kantlinjen ligger då ovanpå nav-elementets kantlinje och det ser ut som fliken och området unde hänger ihop.
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 lösningar:
film - vertikal meny
film - horisontell meny
film - horisontell meny ver2