Entri Populer

Showing posts with label Modifikasi. Show all posts
Showing posts with label Modifikasi. Show all posts

Membuat Navigasi Menu Keren Responsive

Cara membuat Navigasi Blogger Keren Responsive. Membuat Navigasi Menu Keren Responsive sangatlah mudah. berikut anda kopikan kode dibawah ini

Membuat Navigasi Menu Keren Responsive
Membuat Navigasi Menu Keren Responsive
DEMO
CSS
Letakkan kode berikut tepat di atas ]]

 nav {
text-transform:uppercase;
position:relative;
font:bold 12px Arial,Sans-Serif;
background: #e74c3c;
}
nav * {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
nav ul {
overflow: hidden;
    background:rgba(231, 76, 60, 0.84);
    float:left;
}
nav li {
float:left;
display:inline;
}
nav li a {
padding:3px 15px;
line-height:40px;
color:#fff !important;
display:block;
text-decoration:none;
}
nav li a:hover {
background:rgba(231, 76, 60, 0.84) !important;
}
nav li ul {
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
transition:all 0.26s ease-out 0.2s;
}
nav li li {
display:block;
float:none;
width:100%;
}
nav li:hover > ul {
visibility:visible;
width:200px;
opacity:1;
}
nav li li ul {
left:200px;
margin-top:
-40px;
}
nav li.sub > a {
position:relative;
padding-right:30px;
}
nav li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:20px;right:10px;
}
nav li.sub li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:16px;
right:10px;
}

Kemudian untuk membuatnya responsive, anda juga perlu menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda. Atau letakkan bisa letakkan kode berikut tepat di atas ]]

 @media screen and (max-width:600px){
#nav2{display:inherit;margin:5px;float:left;padding:8px;}nav ul{display:none;}
}
@media screen and (max-width:380px){
#nav2{padding:3px;}#search-top{padding:5px;}input[type="text"]{padding:5px;width: 90px;}#search-button-top{background-image: url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");
background-repeat: no-repeat;
transition: all 0.7s ease 0s;
height: 26px;
width: 29px;
background-color: #34495e;
background-position: 7px -247px;
border: none;
float: right;
cursor: pointer;}
}
}
HTML
Kemudian letakkan kode berikut suka-suka anda, kalau saya meletakannya di bawah header







Kemudian simpan template anda. Sebelumnya anda harus membuat backup template lama anda.

Powered by Blogger.