Membuat Menu Float Responsive Di Blog

Live Demo

Responsive adalah istilah yang digunakan untuk desain responsive yang berarti bahwa desain website/blog secara otomatis akan menyesuaikan diri sesuai dengan lebar ukuran layar sebuah perangkat. Begitu juga dengan menu float/melayang responsive ini.

Tampilan menu akan berubah sesuai lebar layar sebuah perangkat

Contoh lebar layar perangkat iPhone adalah 360px sedangkan lebar rentang normal desktop dari 1280px sampai 1600px. Oleh karena itu, ketika Anda membuka suatu web/blog dari iPhone, desain akan secara otomatis menyesuaikan diri sesuai dengan iPhone lebar layar yaitu 360px! Hal yang sama berlaku jika Anda membukanya dari desktop.

Hari ini di tutorial ini saya akan berbagi pengalaman saya tentang bagaimana saya menciptakan pertama responsive menu-bar.

Menu-bar adalah bar kecil yang biasanya ditempatkan di bagian atas website / blog. Ini berisi link navigasi seperti Home, About, Contact, dll

Tutorial
Step 1: Dasar coding HTML dari menu-bar
Letakan kode berikut di atas <body>

<div class='sticky-menu'>
    <div class='wrap1'>
    <nav class='clearfix'>
    <ul class='clearfix'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'>Technology</a></li>
    <li><a href='#'>Reviews</a></li>
    <li><a href='#'>Gadget</a></li>
    <li><a href='#'>Smartphones</a></li>
    <li><a href='#'>Lifestyle</a></li>
    </ul>
    <a href='#' id='pull'>Menu</a></nav>
    </div>
    </div>

Step 2: Menambahkan CSS
Letakan kode berikut di atas ]]></b:skin>

/* ---------- Responsive Menu-bar ------ */
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* Basic Styles */
.sticky-menu {
background: #55AFDA;
padding: 0;
margin: 0 auto;
width: 100%;
position: fixed;
z-index: 99999;
top: 0;
}
.sticky-menu nav {
height: 40px;
width: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
}
.sticky-menu nav ul {
padding: 0;
margin: 0 auto;
height: 40px;
max-width:1060px;
}
.sticky-menu nav li {
list-style: none;
float: left;
padding: 0;
margin: 0 0 0 1.5%;
}
.sticky-menu nav a {
color: #FFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
padding: 8px 10px 6px 10px;
}
.sticky-menu nav li:last-child a {
border-right: 0;
}
.sticky-menu nav a:hover, nav a:active {
background-color: rgba(54, 119, 163, 0.55);
color: #FFF;
}
.sticky-menu nav a#pull {
display: none;
}
/* Styles for Desktop and Laptop */
@media screen and (min-width:1024px)
{
.sticky-menu nav a{
padding:8px 10px 6px 10px;
width:auto;
}
.sticky-menu nav li{margin:0 10px 0 0}
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
.sticky-menu nav { height: auto;}
.sticky-menu nav ul {
width: 100%;
display: block;
height: auto;}
.sticky-menu nav li {
width: 50%;
float: left;
position: relative;
padding: 0;
margin: 0;
}
.sticky-menu nav li a {
border-bottom: 1px solid #585858;
border-right: 1px solid #585858;
padding: .51em 0;
margin: 0;
}
.sticky-menu nav a {
text-align: left;
width: 100%;
text-indent: 25px;}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
.sticky-menu nav {
border-bottom: 0;
}
.sticky-menu nav ul {
display: none;
height: auto;
}
.sticky-menu nav li {
display: block;
float: none;
width: 100%;
}
.stikcy-menu nav li a {
border-bottom: 1px solid #585858;
}
.sticky-menu nav a:hover, .sticky-emnu nav a:active {text-shadow:none}
.sticky-menu nav a#pull {
display: block;
background-color: rgba(48, 129, 204, 0.93);
width: 100%;
position: relative;
color:white;
text-shadow:none
}
.sticky-menu nav a#pull:after {
content:"";
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXqk8lxGXna2Wx8WcucUd4hXZVqf9IypvhUBnmdSAGWPDGP_Jq6rztLSqiaGWbi6RvlhvljCBahj9gTH6Bj-KsAOQT_o-EolqCMgMouw4-ejzvnOzbDxeLlc05RpwUDwneBLKw07F8GU/s1600/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
}
}

Step 3: Menambahkan kode jQuery
Langkah terakhir letakan kode berikut di atas </head>

<script type='text/javascript'>
/*<![CDATA[*/
//Responsive Menu
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/*]]>*/</script>

Lalu save template.

Jangan diam saja sampaikan pesan sobat dengan jelas di sini, kotak komentar di bawah. Saya ingin dengar, pandangan Anda tentang menu responsive ini.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Membuat Menu Float Responsive Di Blog. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.

https://kampung-bodoh.blogspot.com/2014/11/membuat-menu-float-responsive-di-blog_7.html

✚

10 comments

ardana arya February 21, 2015 at 2:33 AM

Author

Keren banget sangat responsive sekali blog anda

Obat Alami Insomnia February 25, 2015 at 5:53 PM

Mantaap sob artikel responsive nya, sangat membantu :)
Ijin share http://grosiracemaxstasik.com/obat-alami-insomnia/

pengobatan gagal jantung March 10, 2015 at 8:11 PM

thanks infonya gan

Obat Herbal ISPA April 1, 2015 at 11:10 PM

informasi yang sangat bermanfaat nih gan, terimakasih :)

Obat Herbal Kanker Serviks April 5, 2015 at 9:07 PM

mantap informasi nya sangat bermanfaat nih :)

Anonymous May 28, 2015 at 12:00 AM

kalau saya mau buat floating menu pada platform selain blogger. mana saja ya yang harus saya rubah untuk menyesuaikannya..?

Daftarcarabuat September 8, 2015 at 7:45 PM

Gan saya sudah ikutin persis tutorialnya tapi setelah saya simpan, kok g berhasilnya tolong di cek dimana salahnya di blog saya

Abah Template™ September 23, 2015 at 10:37 AM

mantaap gan

Uang dari Blog May 27, 2016 at 8:19 AM

Ijin make teknik sekaligus ngopy codenya gan. Trims sebelumnya.

Arif MS April 2, 2019 at 12:18 PM

thanks gan bermanfaat sekali

Kampung Bodoh