TUTORIAL Menu Tab Hover Part 2
Tuesday, February 09, 2016
ASSALAMUALAIKUM | SALAM SEJAHTERA
Tutorial kali ni adalah untuk navigation bar ataupun menu tab bawah header. Lebih kurang macam navigation bar aku atas tu jugak laa cuma yang ni lain sikit je. Kod di bawah ni aku ubah sikit dari kod yang original. Saje nak bagi nampak kelainan sikit hehehe. Kalau blog korang ada border, korang boleh samakan kaler navigation bar ni dgn border so dia akan nampak bercantum dgn border blog korang.
Korang boleh paste dalam html/javascript dan tarik letak bawah header korang kat layout tu.
<style>
.navi{
padding:5px;
display: inline-block;
font:14px verdana;
font-weight:bold;
text-align:center;
margin:6px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
box-shadow:inset 0px 14px 0px #97DAFB,inset 0px -14px 0px #51ABD7;
color:#fff;
color:black;
}
</style>
<center>
<div style="background: #ff7586; padding: 4px; width: 700px;">
<a class="navi" href="URL ANDA">TAJUK 1</a>
<a class="navi" href="URL ANDA">TAJUK 2</a>
<a class="navi" href="URL ANDA">TAJUK 3</a>
<a class="navi" href="URL ANDA">TAJUK 4</a>
<a class="navi" href="URL ANDA">TAJUK 5</a>
</div>
</center>
PURPLE Yang ni dah okay, tak perlu ubah tapi kalau rajin, silakan.
HIJAU Yang ni warna background tulisan tu setelah dihalakan cursor. Yang aku berikan tu adalah warna biru.
MERAH Warna background. Yang aku bagi ni warna pink.
BIRU Width, iaitu panjang mana navigation tu. Yang aku bagi ni pendek sikit. Kalau blog korang saiz dia 1060px, korang boleh besarkan sikit ikut kesesuaian blog korang untuk bagi dia sama dan cantik.
URL ANDA tu sila ubah ke page/ entry mana korang nak spesifikkan. Yang TAJUK tu pun sila ubah ikut citarasa kalian.
Kod untuk warna boleh tengok kat SINI
3 COMMENT
macam nak try je buat nanti. heheh
ReplyDeleteboleh try nanty heheehee :D Tq kongsi tutorial ni :)
ReplyDeletekak rai, kak rai tahu tak saya suka sangat blog kak rai ni. banyak tutorial blog, blog kak rai pun lawa, kemas. I really adore your blog
ReplyDeletePenghantaran sebarang komen, permintaan, cadangan ATAU komunikasi lain yg lucah, sumbang, palsu, mengancam ATAU negatif dengan niat untuk menyakiti hati, menganiayai, mengugut ATAU mengganggu orang lain dengan ATAU tanpa mendedahkan identitinya adalah suatu kesalahan boleh didenda tidak melebihi 58 ribu ringgit atau dipenjarakan selama tempoh tidak melebihi 1 tahun ATAU kedua-duanya sekali.