Zero-Info: Cara Membuat Menu Horizontal ala Website Kantor Berita CNN.com

Diposting oleh Rizal date

Senin, 27 Juni 2011

Ketika CNN.com baru-baru ini didesain ulang situs web mereka, mereka membuat bagian header yang tepatnya menu horizontal yang sangat indah, dan itu dilakukan dengan murni menggunakan CSS. Saya rasa ini sangat bagus apabila menu horizontal ini di terapkan pada blog/blogger, apalagi blog yang mencangkup blog berita dengan menggunakan template magazine. Silahkan lihat demo dibawah.

• Live Demo •

Untuk membuatnya kita tidak pelu menggunakan javaScript, ini 100% menggunakan CSS.
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan CSS dibawah sebelum kode ]]></b:skin>:

#navigation {  
     list-style: none;  
     background: #b60002;  
     overflow: hidden;  
     width: 922px;  
 } 
#navigation li {
 float: left;
 border-right: solid 1px #ca0002;
 height: 35px;
}
#navigation li a:link, #navigation li a:visited {
 text-decoration: none;
 display: block;
 height: 35px;
 color: #fff;
 line-height: 35px;
 padding: 0 9px 0 9px;
 border-right: solid 1px #990000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
}
#navigation li a:hover {
 background: #990000;
 color: #fff;
 list-style: none;
}
#navigation li.first {
 border-left: solid 1px #ca0002;
}

3. Dan ini adalah code HTML-nya.

<ul id="navigation">
 <li class="first"><a href="#">Home</a></li>
 <li><a href="#">Video</a></li>
 <li><a href="#">NewsPulse</a></li>
 <li><a href="#">U.S.</a></li>
 <li><a href="#">World</a></li>
 <li><a href="#">Politics</a></li>
 <li><a href="#">Justice</a></li>
 <li><a href="#">Entertainment</a></li>
 <li><a href="#">Tech</a></li>
 <li><a href="#">Health</a></li>
 <li><a href="#">Living</a></li>
 <li><a href="#">Travel</a></li>
 <li><a href="#">Opinion</a></li>
 <li><a href="#">iReport</a></li>
 <li><a href="#">Money</a></li>
 <li><a href="#">Sports</a></li>
</ul>

4. Simpan template.
:: catatan:
- Untuk code CSS bisa anda rubah warnanya sesuai keinginan.
- Untuk code HTML simpan dan sesuaikan dengan template anda masing-masing.