|
CSS vodiči
|
|
|
|
 Uporabite CSS meni s slikicami
Meni, ki ga lahko vidite spodaj sem uporabil pri izdelavi spletne strani mmservis.si, ki se ukvarja s prodajo in popravilom kavnih avtomatov. So edini zastopnik aparatov Saeco v Sloveniji.
Meni sem vstavil v HTML kodo s pomočjo iframea. Več o njih si preberite tukaj. Meni ni težko vključiti v spletno stran, saj ima prozorno ozadje. Le slikice morajo biti v .png formatu.
HTML in CSS koda:
| Hover meni s slikicami |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html lang="sl">
<head>
<style type="text/css">
#meni {width:100px; margin:0px;}
#meni ul {list-style:none; padding:0; margin:-15px 0px 0px -25px; width:180px;
position:relative; float:right;}
#meni ul li {display:inline; width:200px; height:19px; float:left;
margin:2px 0px 0px 20px; padding: 0;}
#meni ul li img {display:block; width:0px;height:0px; border:0px;}
#meni ul li a {display:block; height:10px; color:#191997; text-decoration:none;
font-family:Trebuchet MS; font-size:10pt;}
#meni ul li a:hover {font-weight:bold;}
#meni ul li a:hover img {position:absolute; left:82px; top:0px; width:auto;
height:auto; border:0px solid #000; }
</style>
</head>
<body bgcolor="transparent">
<div id="meni" style="width: 153px; height: 288px" align="center">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li><a target="_parent" href="#">nescafe Mini
<img src="majhne/nescafe_mini_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Odea Go
<img src="majhne/saeco_odea_go_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Odea Giro
<img src="majhne/saeco_odea_giro_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Odea Orange
<img src="majhne/saeco_odea_giro_orange_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Talea Giro
<img src="majhne/saeco_talea_giro_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Talea Ring
<img src="majhne/saeco_talea_ring_majhna.gif" title="" alt="" /></a></li>
<li><a target="_parent" href="#">saeco Primea Ring
<img src="majhne/saeco_primea_ring_majhna.gif" title="" alt="" /></a></li>
</ul>
</div>
</body>
</html>
|
PRIKAZ menija s slikicami
Razlaga CSS kode:
#meni – določa širino (width) in odmike (margin) okvirja, v katerem je meni
#meni ul – margin nadzira odmike od zgornjega (-15px) in levega (-25px) odmika;
#meni ul li – height določa višino vrstice (19px), v kateri je povezava
#meni ul li img – width in height skrbita za to, da so slikice skrite, medtem, ko nismo z miško nad povezavo.
#meni ul li a – določa stil povezave
#meni ul li a:hover – določa stil povezave medtem, ko je miška nad povezavo
#meni ul li a:hover img – nadzira odmik slike od levega in zgornjega roba, medtem, ko ste z miško nad povezavo
Razlaga HTML kode:
<body bgcolor="transparent"> - ko boste meni uvozili prek iframea na stran vam ne bo treba skrbeti za ozadje, saj je to nastavljeno na prozorno. Več o iframeih.
4x <li></li> - določajo višino prostora, kjer se prikazujejo slike.
target="_parent" – stran, na katero kaže povezava se bo odprla v največjem oknu, se pravi NE v tem iframeu!
<img src="/majhne/nescafe_mini_majhna.gif" /> - določite slikico, ki se bo prikazala, ko boste šli z miško čez povezavo
To bi bilo od razlage vse. Upam, da boste ta meni uspešno uporabili na kakšni vaši spletni strani, ki jo izdelujete, seveda z drugimi slikicami  .
|
