Membuat Menu Float Responsive Di Blog ~ TUGOBLOG

Kamis, 16 Juli 2015

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/AVvXsEgnRzSKAl_OQtaICh8HKRq1AFEpStOux1jxDh2flX5QuGTaknYJAFh2gmMTK7-iDHmtGuRmehwVxHqSGSNiuCC3xec9SHIJXAAytZi_rWnX_08H37NbujE3D3fnAb-cRgRagXlieCyDuUs/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.

Membuat Menu Float Responsive Di Blog

Kategori