Membuat Menu Fixed Bar Dengan Logo Hover

Saya tengok diluar sana bumi sedang diguyur hujan cukup lebat dan di atas meja kamarku mengepul asap dari secangkir kopi arabica dengan campuran sepotong kayu manis yang membuat suasana sore ini semakin meyakinkan lalu sesekali terdengar sabetan melodi dari tangan dingin Paul Gilbert  membuat aku semakin semangat untuk berbagi sebuah tutorial
dalam membuat Menu Fixed Bar Dengan Logo Hover " wkwkwk aku tertawa sendiri dengan sambutan kata pada postingan kali ini " super lebaaaaaaayyy .. tapi gak apa-apa hanya sekedar impropisasi saja untuk memberi tahu kalian dalam membuat postingan haruslah dengan suasana yang benar-benar enak biar dapat pahalanya. walah malah ngalor ngidul nih .. mending lihat dulu demonya gih .... 


Komposisi 

CSS
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #e3e3e8;
}
#logo {
  float: left;
  font-size: 3em;
  margin: 0;
  padding: .4em;
  text-decoration: none;
  color: #333;
  border-right: 1px solid #e3e3e8;
  transition: .5s all;
}
#logo:hover {
  color: #fafafa;
  background-color: #333;
}
nav {
  float: left;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 2.2em 2em;
}
nav ul li {
  display: inline;
  padding: 0 .4em;
}
nav ul li a {
  color: #333;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6em;
  padding-bottom: 1.3em;
  transition: .5s color;
}
nav ul li a:hover {
  border-bottom: 3px solid #333;
}
#current {
  color: #ff4629;
  border-bottom: 3px solid #333;
}
#fb:hover {
  color: #3b5998;
}
#twitter:hover {
  color: #00acee;
}
HTML 
<header>
   <a id="logo" href="#">Action-Blog</a>
  <nav>
    <ul>
      <li><a href="#" id="current">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#" id="fb">Facebook</a></li>
      <li><a href="#" id="twitter">Twitter</a></li>
    </ul>
  </nav>
</header> 
Saya tidak akan menjelaskan secara detail tentang langkah-langkah dalam menerapkanya tapi lihatlah warna-warna pada kode CSS dan HTML yang harus diperhatikan untuk langkah kreatifitas selanjutnya.

44 komentar

Cocok buat blog-blog yang lebar nya kang... :D kantun ditambihan comro janten pedo tah menu na hehhehe

can waktosna ngomentaran kang haha ..apal wae yeuh kang ady mah

Hihi Mantap sobat, hehehe.

lumayan sob .. untuk ukuran sebuah kerangka hehe

wah kang aku dah lama nggak edit" lg hehe lg g da waktu na

tp artikel na meng inspirasi sesuatu yg nanti ane terapin :-) hehe

eta sabetan melodi kang Paul Gilbert hehe..... bagus mas intro nya
wah boleh juga nih, ntar deh ane terapin di blog yang lain....tuk sementara disimpan dl dlm kulkas.
btw tampilan blognya makin keren mas Ruly

mau komen apa ya..??

pegen sh bahasa sunda tp gk bs.., btw sahabat gw waktu SMA jg org sunda lho, jd klo dialek/logat sunda aq bs dikit2.., mf klo 3NG = Ngomong Ngalor Ngidul *smile

iya siap sob ...

haha ...
tapi jgn biarkan terlalu membeku ea ..
makasih - makasih hehe

Bebas mas ...
memang kita syk sendiri nih ... tlp tuh temen mas rohisnya

Saya ikutan komen dalam suasana yg benar2 enak..biar dapet pahala juga kayak kang Ruli...hehe

Keren kang... :)

Jujur saya nggak paham dengan kode2 yang beginian

iya mas kalau gitu kan mantapzzz

step by step saja brow

pastinya, biar adem.... sm2 mas

mangstab atu iyeumah kang,,,,

Utk saat ini saya nyimak dulu kang,, mau pelajari dahulu hehe :D

Selamat siang Akang Ruly anu Pangkasepna nya.? hhh ijin simak artikel na Kang
Sae pisan euy, perlu di coba nih Kang, buat di blog saya, ngiring diajar Abi nya,..?
Pinter pisan yeuh ide na Kang Ruly aya wae gak ada down nya, salam hormat buat
Kang Ruly dan semu Sobat Blogging Senior saya :)

Ngiring ngareureuwah artikelna Kang Ruly, sambil simak dengan seksama
Cara membuat Menu Fixed bar, acan uninga ieu teh Kang, di cobian Kang :)

Yoi deh ki .. yg adem-adem bikin gimana gitu hehe

Ngareuah reuah meren kang hehe
mangga gera cobian atuh kang ...

mnateuuup kangbro. cocok kanggo nu full width mh. :)
kunjungan perdata, eh perdana kangbro. :D

Ah lumayan we kang ...

silahkan sob ...

wilujeng siang oge kang ...
Mulai lieur ieu ge kang

untung teu kunjungan pidana ge haha

Jebrag kacida kang,,, jang nu ukuran jumbo ieu mah. di pake ku sayah mah logor :)

hadir lg tebar pesona *smile

jiakakakakak.. hampura lur nembe nyimpang.. rada riweuh kamari2.. asa maca wiro sableng narasina :-d

wkwkwk naha atuh meni letik letik taing gagaduhan teh :D

haha monggo mas :)

haha nya eta kang ari nu galau mah kieu :Q

wahahaha.. eta mah benten deui atu kang. :D
Bandung oge kang?

hehe .. muhun kawit mah , mung ayena mah linggih di cianjur :)

Assalamu’alaikum,apa kabar kawan ujang Ruly anu pangkasepna di cianjur hehehe,,,, lama tak berkunjung kesini,semoga dalam keadaan sehat wal afiyat semuanya,,,,salam blogers and salam persahabatan,,waduh meni sudah banyak perubahan euy blogna,,,,,,

Waalaikum salam kang ... Meni asa ngimpi ieu teh .... na leres ieu teh urang garut tea haha .. bagja kang weya kadieu urang ngopi hideung tea gening hehe :'(

naha replyna janten misah ning ;)

hente kang ieu mah abdi we salah nga klik reply na

ngiriang ach ngareuah reuah heuheu

sayamah nggak comment ach sudah kehabisan kata-kata heuheu

Pengunjung baru, siap di bookmark :D

Silahkan sob ...

Mangga kang -- mangga