CSS menu horizontala
6
CSSarekin jarraituz, gaur webaren goiburuan jar daitekeen menu horizontal batekin gatozkizue. Menu honek duen berezitasunik handiena bere “slide” da eta bere inplementazioak ez du inongo zailtasunik. Hementxe doakizue adibide bat.
Lehenik eta behin Javascript hau instalatu beharko duzu. Ondoren, CSSan honako kode hau idatzi beharko duzu:
#mContainer {
position:relative;
margin:0 auto;
width:404px;
height:25px;
border-top:1px solid #638DA1;
border-bottom:1px solid #638DA1;
background-color:#F2F5F6;
padding:5px 0 0 0;
z-index:0;
}
#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font:0.8em arial,verdana;
padding:0;
z-index:20;
}
#mContainer li a {
text-decoration:none;
color:#638DA1;
}
#slider {
position:absolute;
background-color: #98B4C1;
border:1px solid #78919B;
width:74px;
height:20px;
padding:0;
z-index:1;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
}
#description {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
position:relative;
margin:0 auto;
width:404px;
height:25px;
border-top:1px solid #638DA1;
border-bottom:1px solid #638DA1;
background-color:#F2F5F6;
padding:5px 0 0 0;
z-index:0;
}
#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font:0.8em arial,verdana;
padding:0;
z-index:20;
}
#mContainer li a {
text-decoration:none;
color:#638DA1;
}
#slider {
position:absolute;
background-color: #98B4C1;
border:1px solid #78919B;
width:74px;
height:20px;
padding:0;
z-index:1;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
}
#description {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
Ondoren, ondorengo HTML kodea jarri beharko duzu:
<head> <script type=”text/javascript” src=”focus_slide.js”></script> </head> <body>
<ul id=”mContainer”>
<li><a href=”#” title=”Esteka 1″> Esteka 1</a> </li>
<li><a href=”#” title=”Esteka 2″> Esteka 2</a> </li>
<li><a href=”#” title=”Esteka 3″> Esteka 3</a> </li>
<li><a href=”#” title=”Esteka 4″> Esteka 4</a> </li>
<li><a href=”#” title=”Esteka 5″> Esteka 5</a> </li>
</ul>
Menu horren adibide bat funtzionamenduan hemen: Euskaljakintza
Technorati etiketak: CSS, MENU, SLIDE
Iruzkinik ez »
URI mezu honen TrackBack-entzat: http://ordizia.blogsome.com/2006/01/10/css-menu-horizontala-2/trackback/
Iruzkinik ez, oraingoz.
RSS jarioa mezu honen iruzkinentzat.
Iruzkina utzi