Cara Membuat Menu Horizontal Ala CNN.com Di Blog

Diposting oleh rizalfauzan's blog di 04.32
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.


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.
Sumber artikel:
Recreating CNN’s Beveled Navigation Buttons with Pure CSS - Impressive Webs
Label: ,