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