Menu berezia CSS erabiliz
8
Gaur, menu berezi bat aurkeztera natorkizue. Blog honen eskuineko gunean adibide bat ikus dezakezue (kolore ezberdinez osaturiko karratu multzoa). Firefox eta Web developer erabili!!!
Menu hori egiteko eman beharreko pausoak hiru dira:
Hasteko, CSSan azpiko kodea txertatu beharko dugu, baina ez ahaztu doikuntzak egin beharko dituzula, bertan agertzen diren datuak blog honen neurrietara egokituta baitaude. Doikuntza lan hori oso erraz burutu daiteke Firefox eta Web developer gehigarria erabiliz gero. Hori egin ezean, oso lan zaila, korapilatsu eta neketsua izango da. Nik ez nuke asmatuko horiek erabili gabe.
#info ul {padding:0; margin:0px auto 115px auto; list-style-type:none; width:158px; height:158px; position:relative;}
#info img {border:0;}
#info li {display:block; height:50px; width:50px; float:left; margin:1px;}
#info a {display:block; width:48px; height:48px; border:1px solid #000; line-height:48px; text-align:center; text-decoration:none; color:#fff;}
a#link1 {background:#FA1605;}
a#link2 {background:#1C05FA;}
a#link3 {background:#000; color:#000;}
a#link4 {background:#10FA05;}
a#link5 {background:#F7FA05; color:#000;}
a#link6 {background:#FA05EC; color:#000;}
a#link7 {background:#FA057E; color:#000;}
a#link8 {background:#f58220;}
a#link9 {background:#05FAE0;}
a:hover#link1 {background: #fff url(’/irudia1.jpg’) no-repeat;}
a:hover#link2 {background: #fff url(’/irudia2.jpg’) no-repeat;}
a:hover#link3 {background: #fff url(’/irudia3.jpg’) no-repeat;}
a:hover#link4 {background: #fff url(’/irudia4.jpg’) no-repeat;}
a:hover#link5 {background: #fff url(’/irudia5.jpg’) no-repeat;}
a:hover#link6 {background: #fff url(’/irudia6.jpg’) no-repeat;}
a:hover#link7 {background: #fff url(’/irudia7.jpg’) no-repeat;}
a:hover#link8 {background: #fff url(’/irudia8.jpg’) no-repeat;}
a:hover#link9 {background: #fff url(’/irudia9.jpg’) no-repeat;}
#info img {border:0;}
#info li {display:block; height:50px; width:50px; float:left; margin:1px;}
#info a {display:block; width:48px; height:48px; border:1px solid #000; line-height:48px; text-align:center; text-decoration:none; color:#fff;}
a#link1 {background:#FA1605;}
a#link2 {background:#1C05FA;}
a#link3 {background:#000; color:#000;}
a#link4 {background:#10FA05;}
a#link5 {background:#F7FA05; color:#000;}
a#link6 {background:#FA05EC; color:#000;}
a#link7 {background:#FA057E; color:#000;}
a#link8 {background:#f58220;}
a#link9 {background:#05FAE0;}
a:hover#link1 {background: #fff url(’/irudia1.jpg’) no-repeat;}
a:hover#link2 {background: #fff url(’/irudia2.jpg’) no-repeat;}
a:hover#link3 {background: #fff url(’/irudia3.jpg’) no-repeat;}
a:hover#link4 {background: #fff url(’/irudia4.jpg’) no-repeat;}
a:hover#link5 {background: #fff url(’/irudia5.jpg’) no-repeat;}
a:hover#link6 {background: #fff url(’/irudia6.jpg’) no-repeat;}
a:hover#link7 {background: #fff url(’/irudia7.jpg’) no-repeat;}
a:hover#link8 {background: #fff url(’/irudia8.jpg’) no-repeat;}
a:hover#link9 {background: #fff url(’/irudia9.jpg’) no-repeat;}
Ondoren, menu hori kokatu nahi dugun tokian, honako kodea txertatu beharko dugu:
<div id=”info”>
<ul>
<li><a id=”link1″ href=”http://ikteroak.blogsome.com” title=”IKTeroak”></a></li>
<li><a id=”link2″ href=”http://www.sustatu.com” title=”Sustatu”></a></li>
<li><a id=”link3″ href=”http://euskaljakintza.blogsome.com” title=”euskaljakintza”></a></li>
<li><a id=”link4″ href=”http://www.aurki.com” title=”Aurki”></a></li>
<li><a id=”link5″ href=”http://ordizia.blogsome.com” title=”Ordizia”></a></li>
<li><a id=”link6″ href=”http://www.jakinstein.com” title=”Jakinstein”></a></li>
<li><a id=”link7″ href=”http://jakinmin.blogsome.com” title=”Jakinmin”></a></li>
<li><a id=”link8″ href=”http://www.jakintza.net” title=”Jakintza Ikastola”></a></li>
<li><a id=”link9″ href=”http://jakintzabideoak.blogsome.com” title=”Jakintza Bideoak”></a></li>
</ul>
</div>
Iruzkinik ez »
URI mezu honen TrackBack-entzat: http://ordizia.blogsome.com/2006/01/29/menu-berezia-css-erabiliz/trackback/
Iruzkinik ez, oraingoz.
RSS jarioa mezu honen iruzkinentzat.
Iruzkina utzi