Tạo Slide Out Menu cho Blogger

Slide Out Menu for Blogger

Slide Out Menu là một loại Menu tự động trượt ra khi chúng ta rê chuột vào, chúng sẽ giúp tiết kiệm khá nhiều diện tích trên site đối với những ai thích Sticky Menu. Iris Tips đã từng giới thiệu một loại menu như vậy trong bài viết: Slide Vertical Menu ẩn hiện bằng jQuery.

Hôm nay là một kiểu Slide Out Menu khác trông khá đẹp mắt và hiện đại. Đặc biệt Menu này làm hoàn toàn bằng CSS nên sẽ không gây ảnh hưởng đến tốc độ tải trang của website bạn.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.menu-outer:hover ~ .menu-close{margin-right:-100px;background-color:#444}
.menu-outer:hover .bar{background:rgba(100,200,240,.9)}
.menu-outer > nav ul{top:5%}
.menu-outer{overflow:hidden;position:fixed;top:0;font-family:'Montserrat',serif;z-index:998;width:100%;left:100%;margin-left:-100px;height:200%;background:rgba(100,200,240,.9);-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;-webkit-transform-origin:top left;-moz-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.menu-outer:hover{background:rgba(100,200,240,.98);left:0;margin-left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
.menu-icon{z-index:999;position:absolute;top:58px;left:15px;width:30px;pointer-events:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-icon .bar{background:rgba(250,250,250,1);width:100%;height:5px;margin:0 0 5px;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-outer:hover > .menu-icon{opacity:0}
nav ul{position:absolute;width:100%;padding:0;left:10%;;/*prevents possible click when not oppened*/
  -webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.menu-outer:hover > nav ul{left:0}
nav li{list-style:none;text-align:center;text-transform:uppercase}
nav li a{font-size:2em;color:#fff;text-decoration:none;margin:0 auto;padding:20px;display:block;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
nav li a:hover{color:#fafafa;text-decoration:none}
@media screen and (max-width:600px),screen and (max-height:600px){nav ul{font-size:.75em}nav ul a{padding:10px}}
.menu-close{z-index:9999;position:fixed;top:0;right:100%;width:200px;height:200px;background:rgba(250,130,70,1);cursor:pointer;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;-webkit-transform-origin:top right;-moz-transform-origin:top right;-ms-transform-origin:top right;-o-transform-origin:top right;transform-origin:top right;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.menu-close .menu-icon{right:15px;left:auto;top:68px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.menu-close .bar{background:rgba(250,250,250,1);width:100%;height:5px;position:absolute;-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;-o-transform-origin:center;transform-origin:center}
.menu-close .bar:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.menu-close .bar:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

HTML

2Tìm đến thẻ <body> và đặt đoạn code dưới đây vào sau thẻ đó

  <div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav>
        <ul>
           <li><a href="http://iris-tips.blogspot.com/">Home</a></li>
<li><a href="#">Product</a></li> 
           <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li> 
<li><a href="#">Advertise</a></li> 
       </ul>
   </nav>
</div>
<a class="menu-close" onclick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm