Web Design & Development

Logo / Corporate Identity

Seach Engine Optimization

eCommerce

Sunday, August 9, 2009

9Aug
2009




Navigation Menu Dengan Kotak teaser

Teknik ini ialah kombinasi navigation menu dan juga kotak teaser iaitu ia berfungsi sebagai navigation menu dan dengan masa yang sama dapat menunjukkan ringkasan sesuatu rencana. Kod yang digunakan ialah "pure CSS" tanpa menggunakan javascript atau jQuery dan ianya mudah untuk dibuat. Sila klik "Live Demo" untuk melihat bagaimana ia berfungsi..

Kembali ke Jom Kita Blog

Dapatkan kod di bawah ini




<html>
<head>
<style type="text/css">
body {
background: #222;
font: 10px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
a:focus {
outline: none;
}
ul.sidenav {
font-size: 1.2em;
float: left;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: #005094;
border-bottom: 1px solid #3373a9;
border-top: 1px solid #003867;
}
ul.sidenav li a{
display: block;
color: #fff;
text-decoration: none;
width: 155px;
padding: 10px 10px 10px 35px;
background: url("http://mfm6009.googlepages.com/ArrowButton1.gif") no-repeat 5px 7px;
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;
}
ul.sidenav li a:hover {
background: #003867 url("http://mfm6009.googlepages.com/ArrowButton1.gif") no-repeat 5px 7px;
border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
</style>
</head>
<body>
<ul class="sidenav">
<li>
<a href="#">Home
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>

</a>
</li>
<li>
<a href="#">Blog
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
<li>
<a href="#">Tutorials
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
<li>
<a href="#">Forum
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
<li>
<a href="#">Services
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
<li>
<a href="#">Portfolio
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
<li>
<a href="#">Contact
<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
</a>
</li>
</ul>
</body>
</html>


Kod-kod berwarna merah ialah kod CSS dan yang berwarna biru ialah kod HTML. Kod CSS hendaklah diletakkan di dalam "main code area" iaitu dengan mengedit html dan paste di bahagian atas </head>. Dan kod html pula dimasukkan di bahagian sidebar.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)