Code Menu Dọc Ẩn Hiện Trên Website Cục Đẹp Chuyên Nghiệp

Sau đây mình sẽ chia sẻ với các bạn một số đoạn code trong mã HTML và CSS Nhé. bạn nhớ đăng ký kênh của mình nhé. để nhận nhận được video cũng như các bài viết rất hữu ít từ veowix.com
Cách tạo menu dọc ẩn hiện trên blog web cục đẹp
Cách tạo menu dọc ẩn hiện trên blog web cục đẹp

Bây giờ mình bắt đầu nhé:

Bước 1: Bạn vào phần quản trị web blog vào phần chỉnh sửa HTML và dán mã bên dưới trước thẻ  ]]></b:skin> này nhé.


.logo{}
.settings{height:73px;float:left;background:url(http://s3.postimg.org/bqfooag4z/startific.jpg);background-repeat:no-repeat;width:250px;margin:0;text-align:center;font-size:20px;font-family:'Strait',sans-serif}
.scrollbar{height:90%;width:100%;overflow-y:hidden;overflow-x:hidden}
.scrollbar:hover{height:90%;width:100%;overflow-y:scroll;overflow-x:hidden}
#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}
.fa-lg{font-size:1em}
.fa{position:relative;display:table-cell;width:40px;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:40px;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}
.settings:hover,settings:focus{background:url(http://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(http://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:0 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}
.darkerli{background-color:#ededed;text-transform:capitalize}
.darkerlishadow{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55)}
.darkerlishadowdown{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55)}
.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:0 0 0}
.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')}

Bước 2: Thêm đoạn code sau bên dưới thẻ <body> 

<nav class="main-menu">
    <div>
<a class="logo" href="#">
      </a>
    </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="share">
</span></a><span class="share"><div class="addthis_default_style addthis_32x32_style">
<a href="#"></a>
<div style="margin-left: 56px; position: absolute; top: 3px;">
<a href="#"></a><a href="#"></a><a class="share-popup" href="http://www.facebook.com/sharer/sharer.php?u=" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" height="30px" width="30px" /></a>
   <a class="share-popup" href="http://twitter.com/share" target="_blank"><img height="30px" src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" /></a>
<a class="share-popup" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=_URL_&amp;title=_TITLE_" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" height="30px" width="30px" /></a>  
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a" type="text/javascript"></script>
              </div>
</span>
            <span class="twitter"></span>
            <span class="google"></span>
            <span class="fb-like"> 
<iframe allowtransparency="true" frameborder="0" scrolling="no" 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" style="border: none; height: 35px; overflow: hidden;"></iframe>
                        </span>
            <span class="nav-text">
                        </span>
        </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">FilmMusic</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>
<li class="darkerli">
          <a href="#">
            <i class="fa fa-gamepad fa-lg"></i>
            <span class="nav-text">Games</span>
          </a>
        </li>
<li class="darkerli">
          <a href="#">
            <i class="fa fa-glass fa-lg"></i>
            <span class="nav-text">Life  Style
</span>
          </a>
        </li>
<li class="darkerlishadowdown">
          <a href="#">
            <i class="fa fa-rocket fa-lg"></i>
            <span class="nav-text">Fun</span>
          </a>
        </li>
</ul>

<li>
        <a href="#">
          <i class="fa fa-question-circle fa-lg"></i>
          <span class="nav-text">Help</span>
        </a>
      </li>
<ul class="logout">
<li>
          <a href="#">
            <i class="fa fa-lightbulb-o fa-lg"></i>
            <span class="nav-text">
                            BLOG
                        </span>
          </a>
        </li>
</ul>
</div>
</nav>

Bước 3: Thêm đoạn code sau trước thẻ </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

Cuối cùng bạn lưu lại và tận hưởng thành quả nhé. Các bạn có thể tùy chỉnh lại cho phù hợp với Blog của mình nhé.
Vậy là xong cũng dễ thôi mà!
Chúc các bạn thành công.
Đánh giá bài viết?

Đăng nhận xét

-->