Membuat Menu Droupdown Vertikal Slide Responsive

Membuat Menu Droupdown Vertikal Slide Responsive | Pada kesempatan kali ini saya akan membagikan tips membuat menu navigasi vertikal di blog, menu yang cantik ini akan memberikan kesan indah pada blog kamu.

Result

menu kali ini menurut saya sangat indah entah bagaimana menurut kamu, jika kamu tertarik Memasang Menu Droupdown Vertikal Slide Responsive ini di blog kamu, kamu bisa ikuti tutorialnya di bawah ini.

Membuat Menu Droupdown Vertikal Slide Responsive

Pastikan Di Blog Kamu Sudah Terpasang CSS Font Awesome, Karena Menu Ini Menampilkan Icon Dari Awesome

1. Silahkan masuk ke blogger>Template>Edit Html tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>, Untuk mempercepat pencarian silahkan anda tekan

CTRL

+

F

pada keyboard.

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css)}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);.logo{}
.settings{height:79px;float:left;background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG);background-repeat:no-repeat;width:250px;margin:0;text-align:center;font-size:20px;font-family:'Strait',sans-serif}
/* ScrolBar  */
.scrollbar{height:90%;width:100%;overflow-y:hidden;overflow-x:hidden}
.scrollbar:hover{height:90%;width:100%;overflow-y:scroll;overflow-x:hidden}
/* Scrollbar Style */
 

#style-1::-webkit-scrollbar-track{border-radius:2px}
#style-1::-webkit-scrollbar{width:5px;background-color:#F7F7F7}
#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#BFBFBF}
/* Scrollbar End */
 
.fa-lg{font-size:1em}
.fa{position:relative;display:table-cell;width:60px;height:36px;text-align:center;top:12px;font-size:20px}
.main-menu:hover,nav.main-menu.expanded{width:260px;overflow:hidden;opacity:1}
.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;width:55px;overflow:hidden;-webkit-transition:width .2s linear;transition:width .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow:1px 0 15px rgba(0,0,0,0.07);opacity:1}
.main-menu>ul{margin:7px 0}
.main-menu li{position:relative;display:block;width:250px}
.main-menu li>a{position:relative;width:255px;display:table;border-collapse:collapse;border-spacing:0;color:#8a8a8a;font-size:13px;text-decoration:none;-webkit-transform:translateZ(0) scale(1,1);-webkit-transition:all .14s linear;transition:all .14s linear;font-family:'Strait',sans-serif;border-top:1px solid #f2f2f2;text-shadow:1px 1px 1px  #fff}
.main-menu .nav-icon{position:relative;display:table-cell;width:55px;height:36px;text-align:center;vertical-align:middle;font-size:18px}
.main-menu .nav-text{position:relative;display:table-cell;vertical-align:middle;width:190px;font-family:'Titillium Web',sans-serif}
.main-menu .share{}
.main-menu .fb-like{left:180px;position:absolute;top:15px}
.main-menu>ul.logout{position:absolute;left:0;bottom:0}
.no-touch .scrollable.hover{overflow-y:hidden}
.no-touch .scrollable.hover:hover{overflow-y:auto;overflow:visible}
/* Logo Hover Property */
.settings:hover,settings:focus{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG);-webkit-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0}
.settings:active,settings:focus{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG

selanjutnya kamu pastekan code berikut bebas di area (sesudah) kode <body> atau <body

<nav class="main-menu">


  
 <div>
    <a class="logo" href="#">
  </div> 
<div class="settings"></div>
<div class="scrollbar" id="style-1">
      
<ul>
  
<li>                                   
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>   
   
<li>                                 
<a href="#">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>   

    
<li>                                 
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>   
  


 
<li>
<a href="#">
<i class="fa fa-heart-o fa-lg"></i>
                                        <span class="nav-text">
                        </span>
                        
                    </a>

</li>
                            

  
  
</li>
<li class="darkerlishadow">
<a href="#">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Shopping</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>

<li class="darkerli">
<a href="#">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>

<li class="darkerli">
<a href="#">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>  
</ul>
        </nav>
        
  

Silahkan Kamu Ganti Kode Yang Sudah Saya Tandai Dengan Url: Image, Link Tujuan Kamu Dan Jangan Lupa Untuk Backup Template Sebelum Mamasang Tutoril Di Atas

Artikel Terkait