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

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

• Tutorial


• Template
  
  
  • CSS3
  
  
  • HTML5
  
  
  • Responsive
  
  
  • SEO

HomeTutorialTemplate- CSS3- HTML5- Responsive- SEO

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

Tweet