Tidak ada kerjaan nih, ya sudah mari kita membuat menu sederhana ;)) Penting sekali keberadaan menu dalam sebuah blog! Selain navigasi, tapi buat penampilan blog kita biar lebih macho b-) Menu simpel & sederhana berikut pasti berbeda dengan menu gaya punya :PJika kepingin koleksi menu yang sudah pernah Koben share, silahkan cari pada search box dengan keyword "MENU" Letakkan kode CSS berikut sebelum code ]]></b:skin>
Coded CSS Simple Menu
Sedikit banget kan kode²nya. Ya namanya juga sederhan dan so simple menu. Tapi jangan salah bos, tidak ketinggalan soal gaya mah :))/* menu euy */
.menu {
position: fixed;
left: 0;
top: 0;
margin: 0;
width: 100%;
padding: 0 10px;
background-color: rgba(30,30,30,.8);
border-bottom: solid 1px rgba(0,0,0,.1);
box-shadow: 0 0 20px rgba(0,0,0,1);
z-index: 100;
}
.menu ul {
width: 900px;
font-size: 16px;
margin: 0 auto;
}
.menu ul li {
display: block;
float: left;
}
.menu ul li.kidd a {
color: #f00;
font-weight: bold;
}
.menu ul li a, .menu ul li.kidd {
float: left;
display: block;
text-decoration: none;
}
.menu ul li a {
padding: 10px;
color: #aaa;
}
.menu ul li a:hover {
background-color: rgba(255,255,255,.05);
color: #fff;
}
Kemudian sisipkan HTML ini didalam tag <body> ... </body>
HTML Simple Menu
<div class="menu">
<ul>
<li class="kidd"><a href="/">Home</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-1</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-2</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-3</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-4</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-5</a></li>
</ul>
</div>
SAVE. Kabuuurrr...<ul>
<li class="kidd"><a href="/">Home</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-1</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-2</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-3</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-4</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-5</a></li>
</ul>
</div>
Urusan padding, margin, color, width, height silahkan atur-atur sesuai keperluan, bahkan jika kalian mau menambahkan variabel lainnya pada CSS bisa saja kok ;)
Happy menu \m/
Tidak ada komentar:
Posting Komentar