Pada artikel kali ini Konsep Koding akan berbagi tutorial mengenai HTML dan CSS mengenai bagaimana cara nya membuat menu Navgasi Web yang keren ciamik, untuk website kamu, di sini kita menggunakan menu navigasi Slide Sliding HTML CSS yang bisa dijadikan referensi untuk webiste yang kamu buat.

Tutorial Membuat Menu Navigasi Slide Sliding Keren HTML CSS
Tutorial Membuat Menu Navigasi Slide Sliding Keren HTML CSS


Tutorial Membuat Menu Navigasi Slide Sliding Keren HTML CSS

Pada artikel ini kita akan membuat sebuah navigasi menu dengan HTML dan CSS, 

Pertama buat file baru dalam satu folder yaitu index.html dan style.css 

index.html
<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title>Side Sliding Menu CSS</title>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>
      <!-- partial:index.partial.html -->
      <!DOCTYPE html>
      <html class="menu">
         <html>
            <head>
               <meta charset="utf-8"/>
               <meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
               <meta name="google" value="notranslate"/>
               <title>Side Menu</title>
               <link rel="stylesheet" type="text/css" href="css/menu.css">
               <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
            </head>
            <body>
               </div>
               <nav class="main-menu">
                  <div>
                     <a class="logo" href="http://startific.com">
                     </a> 
                  </div>
                  <div class="settings"></div>
                  <div class="scrollbar" id="style-1">
                  <ul>
                     <li>                                   
                        <a href="http://startific.com">
                        <i class="fa fa-home fa-lg"></i>
                        <span class="nav-text">Home</span>
                        </a>
                     </li>
                     <li>                                 
                        <a href="http://startific.com">
                        <i class="fa fa-user fa-lg"></i>
                        <span class="nav-text">Login</span>
                        </a>
                     </li>
                     <li>                                 
                        <a href="http://startific.com">
                        <i class="fa fa-envelope-o fa-lg"></i>
                        <span class="nav-text">Contact</span>
                        </a>
                     </li>
                     <li>
                        <a href="http://startific.com">
                           <i class="fa fa-heart-o fa-lg"></i>
                           <span class="share">
                              <div class="addthis_default_style addthis_32x32_style">
                              <div style="position:absolute;
                                 margin-left: 56px;top:3px;"> 
                        <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>
                        <a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>
                        <a href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_
                           " target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>   
                        </div>
                        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
                        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
                        </span>
                        <span class="twitter"></span>
                        <span class="google"></span>
                        <span class="fb-like">  
                        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
                        </span>
                        <span class="nav-text">
                        </span>
                        </a>
                     </li>
                     </li>
                     <li class="darkerlishadow">
                        <a href="http://startific.com">
                        <i class="fa fa-clock-o fa-lg"></i>
                        <span class="nav-text">News</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-desktop fa-lg"></i>
                        <span class="nav-text">Technology</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-plane fa-lg"></i>
                        <span class="nav-text">Travel</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-shopping-cart"></i>
                        <span class="nav-text">Shopping</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-microphone fa-lg"></i>
                        <span class="nav-text">Film & Music</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-flask fa-lg"></i>
                        <span class="nav-text">Web Tools</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-picture-o fa-lg"></i>
                        <span class="nav-text">Art & Design</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-align-left fa-lg"></i>
                        <span class="nav-text">Magazines
                        </span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-gamepad fa-lg"></i>
                        <span class="nav-text">Games</span>
                        </a>
                     </li>
                     <li class="darkerli">
                        <a href="http://startific.com">
                        <i class="fa fa-glass fa-lg"></i>
                        <span class="nav-text">Life & Style
                        </span>
                        </a>
                     </li>
                     <li class="darkerlishadowdown">
                        <a href="http://startific.com">
                        <i class="fa fa-rocket fa-lg"></i>
                        <span class="nav-text">Fun</span>
                        </a>
                     </li>
                  </ul>
                  <li>
                     <a href="http://startific.com">
                     <i class="fa fa-question-circle fa-lg"></i>
                     <span class="nav-text">Help</span>
                     </a>
                  </li>
                  <ul class="logout">
                     <li>
                        <a href="http://startific.com">
                        <i class="fa fa-lightbulb-o fa-lg"></i>
                        <span class="nav-text">
                        BLOG 
                        </span>
                        </a>
                     </li>
                  </ul>
               </nav>
            </body>
         </html>
         <!-- partial -->
         </body>
      </html>



style.css

 
body
{
  margin:0px;
  padding:0px;
	font-family: "Open Sans", arial;
	background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
	color:#fff;
	font-weight:300;

}


@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

.logo{
  
}

.settings {
  
  height:73px; 
  float:left;
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  background-repeat:no-repeat;
  width:250px;
  margin:0px;
 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: 55px;
height: 36px;
text-align: center;
top:12px; 
font-size:20px;

}



.main-menu:hover, nav.main-menu.expanded {
width:250px;
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://s17.postimg.org/74cl7s05b/logo_hover.jpg);
  -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://s3.postimg.org/bqfooag4z/startific.jpg);
  -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}


a:hover,a:focus {
text-decoration:none;
border-left:0px solid #F7F7F7;



}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
  
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}




/* Darker element side menu Start*/


.darkerli
{
background-color:#ededed;
text-transform:capitalize;  
}

.darkerlishadow
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/




.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px; 
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

Setelah itu buka file index.html anda di browser maka hasilnya akan seperti gambar di bawah ini, ketika anda hover menu nya akan memunculkan animasi sliding.




Sekian semoga dapat bermanfaat tutorial membuat navigasi menu menggunakan HTML dan CSS yang ciamik dan semoga dapat menjadi referensi untuk desain yang kamu buat pada website mu.