Teknik Sederhana Membuat Menu Navigasi Horizontal

Melanjutkan pembahasan CSS yang pernah saya janjikan dahulu. Ternyata pada dunia CSS kita bisa menciptakan banyak hal. Termasuk merancangkan menu navigasi horizontal yang keren. Sebenarnya tidak memerlukan waktu yang lama untuk membuat menu navigasi horizontal sesuai keinginan kita. Yang diperlukan sebenarnya adalah pemahaman bahasa CSS yang kita susun. Sehingga menu navigasi tersebut sesuai dengan kondisi dan keinginan kita sendiri. Apabila kamu tertarik untuk membuat menu navigasi horizontal tersebut, maka ikuti langkah-langkah berikut:

DEMO


.menu {
height: auto; 
width: 100%;
overflow: hidden;
text-align: justify;
font: 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
border-bottom: 1px solid #cccccc;
background: rgb(235,235,235);
background: -moz-linear-gradient(center top , rgb(244, 244, 244) 0%, rgb(222, 222, 222) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(rgb(244, 244, 244)), to(rgb(222, 222, 222)));
background: -o-linear-gradient(top, rgb(244, 244, 244), rgb(222, 222, 222));
background: -ms-linear-gradient(top, rgb(244, 244, 244), rgb(222, 222, 222));
margin:0px auto;
}

#daftar-menu {
-moz-background-inline-policy:continuous;
float:left;
margin:0;
padding: 6px;
}

#daftar-menu a:link, #daftar-menu a:visit {
font-weight:bold;
text-shadow: 1px 1px rgb(255, 255, 255);
}

#daftar-menu a:hover {
text-decoration:none;
font-weight:bold;
}

#daftar-menu ul{
padding:4px;
margin:0px;
line-height:1.2 !important;
}

#daftar-menu ul li{
padding:0px;
margin:0px;
list-style: none;
display:inline;
}

#daftar-menu li a{
padding:5px;
font-weight:bold;
color: #084B8A;
}

#daftar-menu li a:hover{
font-weight:bold;
color: #424242;}

Note: Copy code diatas, lalu pastekan atau letakkan diatas ]]></b:skin> atau </style> (buat yang sudah valid CSS3).

Buat kamu yang sudah valid CSS3, maka pada css diatas kamu harus menghilangkan semua tanda yang berawalan -moz-, -ms-, -webkit-, dan -o-.


<div class="menu" id="daftar-menu">

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Berita</a></li>
<li><a href='#'>Panduan Blog</a></li>
<li><a href='#'>Gaya Hidup</a></li>
<li><a href='#'>Arsip</a></li>
</ul>
</div>

Blog Pedas

Teknik Sederhana Membuat Menu Navigasi Horizontal

Contact Form