Avtor: -primož- 03.08.09

Slika v meniju se zamenja, ko greste z miško čez povezavo.

V tem vodiču boste spoznali kodo preprostega menija, ki ima slike na levi ali na desni strani povezav.

Ne se ustrašit kode ! Skopirajte si jo in jo malo preizkušajte. Boste videli, da ni tako grozna, kakor izgleda. Preden se lotite menija vas pozivam, da si pogledate CSS povezave, CSS ozadje in položaj ozadja. Lažje vam bo !

Primer 1:

No Frames

Primer 2:

No Frames

CSS in HTML koda za meni s slikami na levi strani

<html><head>
<style type="text/css">
 
#menu {width:120px; margin:20px 0 0 20px;}
 
 
#menu a, #menu a:visited {display:block; width:100%;
height:20px; line-height:20px; text-decoration:none; color:#000;
background:url(normalno.gif); background-repeat:no-repeat;}
 
#menu a span {padding-left:25px;} 
 
 
#menu a:hover {display:block; width:100%; height:20px;
text-decoration:underline; color:#FF0000; background:url(miska_cez.gif);
background-repeat:no-repeat;}

</style>
</head><body>
<div id="menu">
<a href="#"><span>Povezava 1</span></a>
<a href="#"><span>Povezava 2</span></a>
<a href="#"><span>Povezava 3</span></a>
<a href="#"><span>Povezava 4</span></a>
<a href="#"><span>Povezava 5</span></a>
</div>
</body></html>

CSS in HTML koda s slikami na desni strani

<html><head>
<style type="text/css">
#menu {width:120px; margin:20px 0 0 20px; text-align:right;}
 
 
#menu a, #menu a:visited {display:block; width:100%; height:20px;
line-height:20px; text-decoration:none; color:#000;
background:url(normalno.gif); background-repeat:no-repeat;
background-position:right;}
 
#menu a span {padding-right:25px;} 
 
 
#menu a:hover {display:block; width:100%; height:20px;
text-decoration:underline; color:#FF0000; background:url(miska_cez.gif);
background-repeat:no-repeat; background-position:right;}
</style>
</head><body>
<div id="menu">
<a href="#"><span>Povezava 1</span></a>
<a href="#"><span>Povezava 2</span></a>
<a href="#"><span>Povezava 3</span></a>
<a href="#"><span>Povezava 4</span></a>
<a href="#"><span>Povezava 5</span></a>
</div>
</body></html>

RAZLAGA KODE:

#menu - width: določa širino okvirja oz. diva. Širina okvirja mora ustrezati dolžini besedila (povezav). Če bo širina premajhna bodo besede skakale v nove vrste.

margin: določa zunanji odmik od robov

*odmiki si sledijo v takem sosledju: zgoraj, desno, spodaj, levo (20px 0 0 20px)

#menu a, #menu a:visited - pomembna je višina in višina vrstice (obe naj bosta iste vrednosti)

background-position: določa položaj ozadja (več o tem tukaj). Pri meniju s slikami na desni strani mora biti nujno vrednost right (glej kodo 2)

#menu a span - padding-left: določa notranji odmik besedila (povezav) od roba okvirja, pri meniju s slikami na levi strani.

*Pri meniju s slikami na desni strani mora biti padding-right:25px;

#menu a:hover - določa stil povezave, ko ste z miško nad povezavo. Igrajte se z vrednostjo height:, saj boste morda s tem našli boljši efekt (poizkusite vstaviti 40px)!

background-position:right mora biti nujno pri meniju s slikami na desni strani!

href="#" - namesto # vpišite povezavo (npr. http://moje-mesto.com)

To bi bilo od razlage vse. Meni je namenjen vsem, začetnikom in tistim, ki CSS že malo bolje poznate.

Namesto teh slik uporabljajte svoje slikice, da bo meni bolj zanimiv. Priporočam puščice, ki spremenijo smer ali položaj, ko greste z miško čez povezavo.

Upam, da vam bo meni prišel prav in, da ste se s tem vodičem naučili kaj več o CSSju.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
CSS galerija 650 Urejanje obrazcev s CSSjem list-style Vodoraven CSS meni 6 CSS namigov	hover oblaček za namig CSS trik s scrollanjem in dvema ozadjema Velike črke, male črke in velika začetnica s CSSjem Meni s slikami + HOVER Poseben CSS za Internet Explorer

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči