Langsung ke konten utama

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
Label:

Komentar

  1. abang ichalMinggu, Oktober 20, 2013

    yes responsive betuul

    BalasHapus
  2. UnknownMinggu, Oktober 20, 2013

    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 :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Oktober 20, 2013

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

      Hapus
    2. AnonimMinggu, Oktober 20, 2013

      wah mas ruly benar2 jago css. ^^

      Hapus
    3. Sopala MultapaMinggu, Oktober 20, 2013

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

      Hapus
    4. Kang IsmetSenin, Oktober 21, 2013

      kalau bukan jago mah.. bikang atuh :)

      Hapus
    5. Sopala MultapaSenin, Oktober 21, 2013

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

      Hapus
    6. UnknownRabu, Oktober 23, 2013

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

      Hapus
    7. Sopala MultapaRabu, Oktober 23, 2013

      Mirip blogger item mas ... mau ??hehe

      Hapus
  3. Kang IsmetSenin, Oktober 21, 2013

    asli keren kang rul.. beuki mangstab lah

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 21, 2013

      ehhmm prikitiw ... bener yeuh kang hehe

      Hapus
    2. Kang IsmetSenin, Oktober 21, 2013

      eta class na aya bahasa si Pepe Soares ning :)

      Hapus
    3. Sopala MultapaSelasa, Oktober 22, 2013

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

      Hapus
  4. AnonimSenin, Oktober 21, 2013

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

    BalasHapus
  5. Staff AdministratorSenin, Oktober 21, 2013

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

    BalasHapus
    Balasan
    1. UnknownSelasa, Oktober 22, 2013

      nggak ada duanya si akang, sip lah :)

      Hapus
    2. Sopala MultapaSelasa, Oktober 22, 2013

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

      Hapus
  6. AnonimSelasa, Oktober 22, 2013

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

    BalasHapus
  7. AnonimSelasa, Oktober 22, 2013

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

    BalasHapus
  8. AdminSelasa, Oktober 22, 2013

    waow.. keren, tapi kodenya serem mas :)

    BalasHapus
  9. GupitanSelasa, Oktober 22, 2013

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

    BalasHapus
  10. M. Alex JoenaediSelasa, Oktober 22, 2013

    mantap euy. haturnuhun kang ayna tinggal praktek yeuh

    BalasHapus
  11. Mas AndesSelasa, Oktober 22, 2013

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

    BalasHapus
    Balasan
    1. Sopala MultapaRabu, Oktober 23, 2013

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

      Hapus
    2. Mas AndesSabtu, Oktober 26, 2013

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

      Hapus
  12. AnonimRabu, Oktober 23, 2013

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

    BalasHapus
  13. Rohis FacebookKamis, Oktober 24, 2013

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

    BalasHapus
  14. Eka IkhsanudinKamis, Oktober 24, 2013

    makin keren aja kang heheheee.... :)

    BalasHapus
  15. Hariyanto WijoyoJumat, Oktober 25, 2013

    kalo CSS..saya nyerah dech :-)

    BalasHapus
  16. Pamanah RasaRabu, Oktober 30, 2013

    beki keren aja gan belognya... :)

    BalasHapus
  17. AnonimRabu, Oktober 30, 2013

    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 :)

    BalasHapus
  18. Ione NasitionKamis, Maret 13, 2014

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

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya