CSS Menu

Deze tutorial zal ik laten zien hoe je een css menu maakt..
We maken (un-typical) list menu met behulp van de position waarde.

Hier is een overzicht van het menu (je kunt het downloaden als rar bestand).

Achtergrond:

Open de Photoshop-bestand. Schakel alle layers uit behalve de achtergrond en logo en sla de achtergrond op als menu-bg.jpg.

Buttons:

Zet de achtergrond en logo layer uit en laat alleen de menu teksten zichtbaar.
Maak een rechthoekige selectie van de “home” knop, ga naar menu Edit > Copy Merged.

Maak een nieuw bestand en kijk naar de bestands dimensie (bxh), in mijn geval is “home” 82 x 40px.
Verdubbel de hoogte van het nieuwe bestand dus 82 x 80px.
Plak nu de afbeelding en plaats deze aan de onderkant. Dupliceer nu de laag en plaats dit aan de bovenkant.
Wis nu de omlijsting van de bovenste laag.

Herhaal deze stap voor de andere knoppen.

HTML code

We beginnen met het maken van een un-ordered list

• wijzen we een id=”menu” toen
  een unieke class naam wordt aan elke link toegewezen
  een lege tag (dit is om de Mouseover effect)

  <ul id="menu">
  	<li><a href="#" class="home">Home<span></span></a></li>
  	<li><a href="#" class="over">About<span></span></a></li>
  	<li><a href="#" class="diensten">Diensten<span></span></a></li>
  	<li><a href="#" class="rss">RSS<span></span></a></li>
  	<li><a href="#" class="mail">E-mail<span></span></a></li>
  </ul>
  

  #menu

  Reset het menu met no padding, no margin en no list-style.
  Geef de breedte en hoogte aan van de menu-bg.jpg. Voeg dan de menu background image toe.
  Belangrijkste is om de position op relative te zetten.

  #menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 800px;
  height: 180px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
  }
  

  #menu span
  Geef het span element de waarde display:none (zodat het default niet wordt weergegeven).
  Zet position:absolute, zodat we het mouseover GIF bestand op een exacte positie kunne zetten.

  #menu span {
  display: none;
  position: absolute;
  }
  
  

  #menu a
  Het belangrijkste punt hier is de text-indent waarde.
  We geven aan de text-indent een negatieve waarde (-900%), zodat de tekst wordt verborgen.

  #menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
  }
  

  #menu a:hover

  Wanneer de cursor over de link gaat, willen we een verschuiving van de achtergrond afbeelding van boven naar beneden.

  #menu a:hover {
  background-position: left bottom;
  }
  

  #menu a:hover span
  Wanneer de cursor over de link gaat, willen we span element een waarde geven van display:block.

  #menu a:hover span{
  display: block;
  }
  

  #menu .home

  Geef de breedte, hoogte, van de home achtergrond afbeelding.
  Aangezien we al aangegeven hebben in een vorige stap dat element postition: absolute is, hoeven we nu alleen maar aan te geven waar de home image moet komen.
  Hiervoor moeten we de left and top waarde specifeceren van de Home knop.

  #menu .home {
  	width: 82px;
  	height: 40px;
  	background: url(images/home.png) no-repeat;
  	left: 250px;
  	top: 63px;
  }
  
   
  
  #menu .home span
  
  Geef de  breedte, hoogte, background , en positie van het span element van .home (mouseover GIF image)
  #menu .home span {
  	width: 66px;
  	height: 8px;
  	background: url(images/huis.png) no-repeat;
  	left: 28px;
  	top: -20px;
  }
  
   
  
  Doe dit zelfde nu voor alle anderen buttons/knoppen.
  Totale css
  
  (heb voor email en rss button geen mouse over gebruikt in het voorbeeld)
  
  
  
  #menu {
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	width: 800px;
  	height: 180px;
  	background: url(images/menu-bg.jpg) no-repeat;
  	position: relative;
  }
  #menu span {
  	display: none;
  	position: absolute;
  }
  #menu a {
  	display: block;
  	text-indent: -900%;
  	position: absolute;
  	outline: none;
  }
  #menu a:hover {
  	background-position: left bottom;
  }
  #menu a:hover span{
  	display: block;
  }
  #menu .home {
  	width: 82px;
  	height: 40px;
  	background: url(images/home.png) no-repeat;
  	left: 250px;
  	top: 63px;
  }
  #menu .home span {
  	width: 66px;
  	height: 8px;
  	background: url(images/huis.png) no-repeat;
  	left: 28px;
  	top: -20px;
  }
  #menu .over {
  	width: 82px;
  	height: 40px;
  	background: url(images/over.png) no-repeat;
  	left: 350px;
  	top: 57px;
  }
  #menu .over span {
  	width: 32px;
  	height: 14px;
  	background: url(images/wie.png) no-repeat;
  	left: 44px;
  	top: -24px;
  }
  #menu .diensten {
  	width: 121px;
  	height: 41px;
  	background: url(images/diensten.png) no-repeat;
  	left: 450px;
  	top: 34px;
  }
  #menu .diensten span {
  	width: 40px;
  	height: 14px;
  	background: url(images/wat.png) no-repeat;
  	left: 26px;
  	top: -30px;
  }
  #menu .rss {
  	width: 26px;
  	height: 25px;
  	background: url(images/rss.png) no-repeat;
  	left: 650px;
  	top: 20px;
  }
  #menu .mail {
  	width: 27px;
  	height: 19px;
  	background: url(images/mail.png) no-repeat;
  	left: 650px;
  	top: 60px;
  }
  
  
  

Download Bestanden Bekijk Demo