Membuat Menu Responsive Plus Logo

Membuat Menu Responsive Plus Logo - Melengkapi tutorial sebelumnya yang membahas Menu  CSS3 Dengan Efect Hover , untuk hari ini juga saya mencoba share kembali tentang membuat sebuah menu. Menu kali ini kelebihan nya ada pada sistem responsive dan terdapat logo serta social icon didalamnya. Mungkin banyak yang bertanya kenapa pada artikel blog ini yang terus menyuguhkan tutorial menu ?? . Saya sengaja terus memuat artikel tentang menu karena berdasarkan pada pengalaman awal bloging yang begitu susahnya mencari sebuah menu disaat saya akan modifikasi template . Mudah-mudahan dengan terus memberikan tutorial menu bisa memudahkan brada ketika kebingungan mencari menu navigasi yang pas dengan templatenya. Sebelum tau cara memasangnya kita akan cek bentuk menu pada tombol demo dibawah ini 

See Demo

Kerangka CSS 

/* MENU{ */
ul.menu {
 font-size:0.9em;
 background:#50A3AA;
 padding-bottom:0.01px;
}
ul.menu:after {
 content:"";
 display:block;
 clear:both;
 height:0;
}
ul.menu>li {
 float:left;
 margin:0.5% 1%;
 text-transform:uppercase;
}
ul.menu li.botao>a {
 color:#FFF;
 text-align:center;
 display:block;
 background-color:#2B7896;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
 white-space:nowrap;
}
ul.menu li.botao:hover>a, ul.menu li.botao>a:hover, ul.menu li.botao>a:focus {
 background-color:transparent;
}
 /* SUBMENU{ */
 ul.menu ul {
  display:none;
  top:100%;
  left:0;
  width:100%;
  background-color:#2B7896;
  z-index:1000;
 }
 ul.menu li>a+ul>li:hover>ul, li.submenu>a:focus+ul, li.submenu ul:focus {
  display:block;
 }
 ul.menu li {
  position:relative;
 }
 ul.menu ul li>a {
  display:block;
  width:100%;
  padding:0.5em 0 0.5em 1em;
  text-transform:none;
 }
 ul.menu ul li, ul.menu ul li>a {
  color:#FFF;
 }
 ul.menu ul li:hover, ul.menu ul li>a:hover, ul.menu ul li:hover>a {
  color:#000;
  background-color:#AAA;
 }
 ul.menu li>a:hover+ul, ul.menu li:hover>ul {
  display:block;
 }
 li.submenu:after {
  content:"";
  display:block;
  position:absolute;
  top:100%;
  left:50%;
  width:0;
  height:0;
  border:0 solid transparent;
  border-top-color:#2B7896;
  z-index:1000;
 }
 /*}SUBMENU*/
/* }MENU */
@media all and (max-width:500px) and (orientation:portrait), all and (orientation:landscape) and (max-width:640px) {
  /* MENU{ */
 #logo {
 display:none;
 }
ul.menu {
  font-size:1.3em;
 }
 ul.menu>li.botao {
  margin:2.5% 1% 0;
  width:98%;
 }
 ul.menu li.social {
  font-size:0;
  width:45%;
  margin:2.5% 2.5%;
  text-align:center;
  background:#6c1d1e;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
 }
 ul.menu li.social img {
  width:25%;
  height:auto;
 }
 ul.menu li.social:hover {
  top:0;
 }
 ul.menu li.botao>a {
  padding:3% 0;
 }
 #botao_galeria {
  display:none;
 }
  /* SUBMENU{ */
  ul.menu ul {
   position:relative;
  }
  ul.menu>li>ul {
   padding-top:0;
  }
  li.submenu:after {
   border:0.4em solid transparent;
   border-top-color:#2B7896;
   margin-left:-0.4em;
  }
  li.submenu:hover:after {
   display:none;
  }
    /* }SUBMENU */
/* }MENU */
}
@media all and (max-width:300px) {
  /* MENU{ */
  ul.menu {
  font-size:1em;
 }
/* }MENU */
}
@media all and (orientation:landscape) and (min-width:641px), all and (orientation:portrait) and (min-width:501px) {
  /* MENU{ */
  #logo {
  width:6%;
 }
 #logo, #logo>a>img {
  transition: transform 0.5s;
  -webkit-transition:-webkit-transform 0.5s;
  -moz-transition:-moz-transform 0.5s;
 }
 #logo:hover, #logo>a:focus>img {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
 }
  ul.menu>li.botao {
  width:14%;
  margin:1.5% 1% 0;
 }
  ul.menu li.social {
  width:4%;
  margin:1.5% 1% 0;
 }
 ul.menu li.social:hover, li.social>a:focus  {
  position:relative;
  top:-0.3em;
  transition: top 0.3s;
  -webkit-transition: top 0.3s;
  -moz-transition: top 0.3s;
 }
 ul.menu li.botao>a {
  padding:7.5% 0;
  transition:background-color 0.5s;
  -webkit-transition:background-color 0.5s;
  -moz-transition:background-color 0.5s;
 }
 #logo img, img.social{
  width:100%;
  height:auto;
 }
  /* SUBMENU{ */
  ul.menu ul {
   position:absolute;
  }
  ul.menu ul li>a {
   transition:background-color 0.5s;
   -webkit-transition:background-color 0.5s;
   -moz-transition:background-color 0.5s;
  }
  ul.menu li>a+ul>li>ul {
   display:none;
   position:absolute;
   left:100%;
   top:0;
   color:#FFF;
  }
  li.submenu:after {
   border-width:0.6em;
   margin-left:-0.6em;
   transition:border-color 0.5s;
   -webkit-transition:border-color 0.5s;
   -moz-transition:border-color 0.5s;
  }
  li.submenu:hover:after {
   border-top-color:#2B7896;
  }
  ul.menu>li>ul {
   padding-top:10%;
  }
  /* }SUBMENU */
 /*}MENU*/
}
@media all and (orientation:portrait) and (min-width:501px) and (max-width:640px), all and (orientation:landscape) and (min-width:641px) and (max-width:780px) {
 /* MENU{ */
 #logo {
 display:none;
 }
 ul.menu li.botao {
  text-transform:none;
  width:20%;
  margin:1.6% 0 0;
 }
 ul.menu li.botao >a {
  border-radius:0;
  -webkit-border-radius:0;
  -moz-border-radius:0;
 }
 ul.menu li.social {
  font-size:0;
  width:45%;
  margin:2.5% 2.5%;
  text-align:center;
  background:#6c1d1e;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
 }
 ul.menu li.social img {
  width:10%;
  height:auto;
 }
 /*}MENU*/
}

Kerangka HTML 

<nav>
<ul class="menu">
<li id="logo"><a href="#" hreflang="pt-br" tabindex="1"><img src="http://icons.iconarchive.com/icons/hamzasaleem/stock-style-2/96/Game-Center-icon.png" alt="Wow-Wew-Wiw" width="37" height="34" draggable="false" /></a></li>
<li class="botao"><a href="#" hreflang="pt-br" tabindex="2">Home</a></li>
<li class="botao submenu"><a href="#" hreflang="pt-br" tabindex="3">Kategori</a>
<ul>
<li><a href="#" hreflang="pt-br">Wekdor</a>
                <ul>
                  <li><a href="#">Submenu</a></li>
                  <li><a href="#">Submenu</a></li>
                  <li><a href="#">Submenu</a></li>
                  <li><a href="#">Submenu</a></li>
                </ul>
              </li>
<li><a href="#" hreflang="pt-br">Brewek</a></li>
</ul></li>
<li class="botao"><a href="#" hreflang="pt-br" tabindex="4">CSS</a></li>
<li id="botao_galeria" class="botao"><a href="#" hreflang="pt-br"tabindex="5">JAVASCRIPT</a></li>
<li class="botao"><a href="#" hreflang="pt-br" tabindex="6">HTML</a></li>
<li class="social"><a href="#" target="_blank" tabindex="7"><img class="social" src="http://imageshack.us/a/img593/7079/n8b.gif" alt="Link para página do Facebook" title="Abrir em nova aba" width="40" height="40" draggable="false" /></a></li>
<li class="social"><a href="#" hreflang="pt-br" tabindex="8"><img class="social" src="http://imageshack.us/a/img20/1566/1srb.gif" alt="Link para Twitter do Abrigo" title="Abrir em nova aba" width="40" height="40" draggable="false" /></a></li>
</ul>
</nav>

Kustomisasi 

  • CSS ditempatkan diatas kode ]]></b:skin>  atau  </style>
  • HTML ditempatkan bebas  
 Catatan : 
- http://icons.iconarchive.com/icons/hamzasaleem/stock-style-2/96/Game-Center-icon.png 
Silahkan rubah dengan logo brada
# Silahkan rubah dengan link brada

Source Dasar : niallthompson

51 komentar

yes responsive betuul

hehe .. sip atuh sob

wahh lagi seru ni kang... Kang, saya mau nany fungsi > pada css apa ya kang?
contoh kyk di css yg satu ini:#logo>a>img
Mohon pnjlasannya kang. Trmkasih :)

Itu mungkin sekedar atribut untuk menentukan seleksi saja sob ...

wah mas ruly benar2 jago css. ^^

wkwkwk dibilang jago ... yg jago2 bentar lagi pada muncul sob .. saya bener2 super newbie .. tapi amien mudah-mudahan kenyataan hehe

kalau bukan jago mah.. bikang atuh :)

asli keren kang rul.. beuki mangstab lah

tah ieu jagona hehe ..
waduh bikang .. moal disada kang bikang mah heuheu

ehhmm prikitiw ... bener yeuh kang hehe

waaah kang, panjang pisan kodenya...saya sampai lieur hehe.
kerenz lah...thx kang sudah share

silahkan duduk he

Gak akan terlalu lama load'y ..css only sob

eta class na aya bahasa si Pepe Soares ning :)

Sip deh..pokoke...mah kang Rul...juaranya lah :)

nggak ada duanya si akang, sip lah :)

Keren kang Rul menu responsive plus logonya, tapi kode CSSnya panjang pisan nya kang hehe...

wah senangnya dapat tambahan ilmu css. Lagi seneng-senengnya otak-atik css ane sob.

waow.. keren, tapi kodenya serem mas :)

asli ti si nial'na kang ... teu diganggu gugat hehe

Juara makan iya mas bud ....
berarti saya ketiga dong mas eka hihi

bagi saya ga apa2 kalo cuma css pnjng'y ... asal jgn gigi z panjang hehe

ya lumayan untuk exsperiment sob ...

se'serem hantu malaya hehe

Udah keren responsive pula..
Mantap sobb.........

lumayan sob he

mantap euy. haturnuhun kang ayna tinggal praktek yeuh

Sip kang sok lah prakteken hehe

ngahaha.. super ngakak :)

asik nih kang sambil liatin sambil sruputt hehe..
kayaknya juga pas kang kalo di terapin disini

hehe ,, abis'y ko kayak takut yg panjang2 hi

iya ada rencana juga mas untuk diterapin disini ... tapi punya konsep kedepan'y template yg bener2 simple .. kita liat za

Kunjungan Malem Kang Ruly, Nih Kang Ruly
Nice Artikelnya, ijin belajr membuat menu Responsive
Yah Kang? sukses terus deh.. Kang Ruly

Tes akh di threade comments na Kang Ruly unik dan menarik nih
Apa lagi artikel Menu Responsive nya yang keren dan wow cakep deh

Mirip blogger item mas ... mau ??hehe

keren.! responsif pula.., mantap!,makasih *smile

oke silahkan mas ... sukses juga

makin keren aja kang heheheee.... :)

lumayan sob hehe

kamana wae yeh urang karawang hehe

Izin comot kodenya sob buat koleksi :)

monggo sob ...

kalo CSS..saya nyerah dech :-)

sama saya juga ampun hehe

ngopi kang ahhh, tong ngarengkol wae

iya kang saya juga sependapat.. kalo di perhatikan memang begitu, sipp kang

beki keren aja gan belognya... :)

Menu di blog saya sudah responsive, karena menu tersebut sudah bawaan dari templatenya mas sugeng :D tetapi cara ini boleh juga dipraktekan ke blog saya yang lain :)

Maksih...segera mempraktikkan...doakan saya ya (Lho?)