Simple Sajian Navigation Kafe Responsive

Membuat Menu Bar, Menu Navigation Responsive

Membuat hidangan kafe navigation responsive simple di blog

Malam sobat, kali ini aku akan share menu navigation kafe responsive dengan tombol search di blog. Bagi kalian yang ingin mengganti atau merubah dan memasang menu kafe / hidangan navigation menjadi responsive, silahakn coba hidangan ini cukup simple. Menu navigation ini tidak drop down jadi hanya tampil menyerupai biasa.

Nah bagi kalian yang ingin melihat tampilan dari hidangan ini, silahkan klik link dibawah ini.

Result

Baca Juga tutorial lainnya ya :)

Tutorial Blogger Lainnya :

• Membuat Mega Menu Navigation Simple

• Mentahan Mega Menu Responsive :v

• Cara Disable Supaya Gambar Tidak Bisa Di Klik Kanan

Cara Membuat Simple Navigation Bar Di Blogger.

• Login ke Blogger.com

• Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>

• Masukan CSS di bawah ini, sempurna di atasnya.

  * {   margin: 0;   padding: 0;   font: 15px "Ubuntu";   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; }  form {   position: relative;   width: 60px;   height: 51px;   overflow: hidden;   transition: width 0.5s;   margin: auto;   -webkit-backface-visibility: hidden;   background: rgba(0, 0, 0, 0);   float: right; } form.opened {   width: 330px; } form.opened:before {   position: fixed;   content: "";   top: 0;   left: 0;   width: 100%;   height: 100%;   background: rgba(0, 0, 0, 0.5); } input[type="search"] {   position: absolute;   top: 0;   right: 28px;   height: 51px;   width: 0;   float: left;   font-size: 1.5em;   border-radius: 30px;   border-top-right-radius: 0;   border-bottom-right-radius: 0;   outline: none;   border: none;   padding-left: 20px;   color: #28d7d7;   transition: width 0.5s; } form.opened input[type="search"] {   width: 300px;   transition: width 0.5s; } button {   position: absolute;   top: 0;   right: 0;   width: 60px;   height: 100%;   background: #28d7d7;   border: none;   color: #FFF;   font-size: 1.3em;   outline: none;   cursor: pointer; } form.opened button {   border-top-left-radius: 0;   border-bottom-left-radius: 0; }  nav {   position: relative;   width: 90%;   margin: 45px auto;   -webkit-border-radius: 6px;   -moz-border-radius: 6px;   -ms-border-radius: 6px;   -o-border-radius: 6px;   border-radius: 6px;   background: -webkit-linear-gradient(#111111, #222222);   background: -moz-linear-gradient(#111111, #222222);   background: -o-linear-gradient(#111111, #222222);   background: -ms-linear-gradient(#111111, #222222);   background: linear-gradient(#111111, #222222);   overflow: hidden; } @media (max-width: 1110px) {   nav {     margin: 0;     width: 100%;     height: 45px;     -webkit-border-radius: 0px;     -moz-border-radius: 0px;     border-radius: 0px;   } } nav > h3 {   display: none; } @media (max-width: 1110px) {   nav > h3 {     display: block;     color: #ffffff;     font-size: 1.3em;     background: -webkit-linear-gradient(#606c88, #3f4c6b);     background: -moz-linear-gradient(#606c88, #3f4c6b);     background: -o-linear-gradient(#606c88, #3f4c6b);     background: -ms-linear-gradient(#606c88, #3f4c6b);     background: linear-gradient(#606c88, #3f4c6b);     position: absolute;     right: 0px;     padding: 10px 13px 11px 13px;     cursor: pointer;   } } nav > ul > li {   display: inline-block; } @media (max-width: 1110px) {   nav > ul > li {     display: block;   } } nav > ul > li > a, a:visited {   display: block;   padding: 15px;   color: #777777;   font-weight: 300; } nav > ul > li > a:hover {   color: #ffffff; } @media (max-width: 1110px) {   nav > ul > li > a:hover {     background: -webkit-linear-gradient(#606c88, #3f4c6b);     background: -moz-linear-gradient(#606c88, #3f4c6b);     background: -o-linear-gradient(#606c88, #3f4c6b);     background: -ms-linear-gradient(#606c88, #3f4c6b);     background: linear-gradient(#606c88, #3f4c6b);   } } .active, .active:visited {   color: #ffffff;   background: -webkit-linear-gradient(#606c88, #3f4c6b);   background: -moz-linear-gradient(#606c88, #3f4c6b);   background: -o-linear-gradient(#606c88, #3f4c6b);   background: -ms-linear-gradient(#606c88, #3f4c6b);   background: linear-gradient(#606c88, #3f4c6b); } @media (max-width: 1110px) {   .active,   .active:visited {     background: transparent linear-gradient(#606c88, #3f4c6b) repeat scroll 0% 0%;   } } .expand {   height: 100%; } .hide {   display: none; }  

• Selanjutnya, cari arahan </body> kemudian masukan javascript dibawah ini sempurna diatasnya.

 <script type='text/javascript'> $(document).ready(function(){     $('nav').click(function() {         $(this).toggleClass('expand');         $(this).siblings().not(this).toggleClass('hide');     }); }); // https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie $('button').on('click', function(e) {   e.preventDefault();   $('form').addClass('opened');   $('input[type="search"]').focus(); });  $('input[type="search"]').on('focusout', function(e) {   $('form').removeClass('opened'); }); </script> 

• Langkah terakhir copy HTML dibawah ini kemudian masukan arahan ini di bawah <body>. Atau terserah kalian mau ditaro dimana.

 <nav>   <h3>&#9776;</h3>   <ul>     <li><a class="active" href="#">MS.Tamvan</a></li>     <li><a href="#">Desktop</a></li>     <li><a href="#">Phone</a></li>     <li><a href="#">Tablet</a></li>     <li><a href="#">TV</a></li>     <li><a href="#">Server</a></li>     <li><a href="#">Cloud</a></li>     <li><a href="#">Management</a></li>     <li><a href="#">Download</a></li>       <form>   <input type="search" placeholder="Search">   <button>     <span class="fontawesome-search"></span>   </button> </form>   </ul>  </nav> 

Langkah terakir simpan template dan lihat hasilnya.

Cukup sekian dan terimakasih, smeoga artikel perihal Menu kafe navigation responsive ini bermanfaat, jangan lupa komentarnya apabila ada yang tidak dimengerti.