CSS Tabbed menu navigation

menu tabbed navigation

hasil akhir nya seperti ini

akhir

untuk itu butuh dua buah source:

tabbed sebelah kiri tableft8

tabbed sebelah kanantabright8

save-as saja gambar-gambar source diatas

buat sebuah file html baru dan masukan kode html berikut

  1. <html>
  2. <head><title>Tabbed Navigation</title>
  3. <link href=“tabbed8.css” rel=“stylesheet” type=“text/css”>
  4. <body>
  5. <div id=“tabs8”>
  6. <ul>
  7. <li><a href=“1.php”><span>1</span></a></li>
  8. <li><a href=“2.php”><span>second</span></a></li>
  9. <li><a href=“3.php”><span>third ketiga</span></a></li>
  10. <li><a href=“long.php”><span>looooooong text</span></a></li>
  11. <li><a href=“5.php”><span>Ipsum</span></a></li>
  12. </ul>
  13. </div>
  14. </body>
  15. </html>

buat sebuah file css baru beri nama tabbed8.css dan masukan kode-kode berikut:

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

#tabs8
{
float:left;
background:#fcf1cc;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #E276A7;
}

#tabs8 ul {
margin:0px; /* membuang jarak */
padding:10px 10px 0 50px; /* posisi list */
list-style:none; /* membuang dooted list*/

}

#tabs8
li {
display:inline; /* membuat list menjadi horizontal */
margin:0px;
padding:0px;
}

#tabs8
a {
float:left;
background:url(tableft8.gif) no-repeat left top; /*gambar tabbed kiri */

margin:0;
padding:0 0 0 4px;
text-decoration:none; /* membuang underline */
}

#tabs8
a span {
float:left;
display:block;
background:url(“tabright8.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */

#tabs8 a:hover span {
color:#591333;
}


#tabs8
a:hover {
background-position:0% -42px;
}

#tabs8
a:hover span {
background-position:100% -42px;
}

rahasia tabbed ini adalah

memindahkan posisi background gambar

saat mouse berada diatas objek (hover)

pada html jangan lupa untuk menambahkan <span> (lihat kode html) sehingga gambar source tabbed kanan dapat ditampilkan

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s