Hot Post

Metro Side Menu phong cách Windows 10 trượt dọc theo website

1/07/2017 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Metro Side Menu for Blogger

Bạn yêu thích phong cách metro trên Windows, bạn muốn đem những ô live tile vào website của bạn. Metro Side Menu sẽ giúp bạn điều đó. Với hiệu ứng ẩn hiện đầy tinh tế Metro Side Menu chắc hẳn sẽ không làm bạn thất vọng.


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> 
@import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);.font,.menu{font-family:'Open Sans',sans-serif}
.metro-side-menu{position:fixed;left:0;top:30%}
.metro-side-menu .level{opacity:0;display:none;-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;-ms-transition:all 100ms ease-in;-o-transition:all 100ms ease-in;transition:all 100ms ease-in}
.metro-side-menu  .level.open{opacity:1;display:block;z-index:9999}
.metro-side-menu .main-level{background-color:#E4E4E4;padding-top:2px;padding-bottom:2px;border:1px solid #ccc;border-left:0}
.metro-side-menu  .menu:hover > .text{color:#181818}
.metro-side-menu  .menu .text{color:#f1f1f1;margin-left:4px}
.metro-side-menu 
.level{background-color:#E4E4E4;left:37px;position:absolute;top:0;border:1px solid #ccc}
.metro-side-menu  .level .menu{width:140px!important;height:80px!important;display:block;text-decoration:none}
.metro-side-menu .level .menu .icon .svg{width:50px;height:50px}
.metro-side-menu .level .icon{text-align:center}
.metro-side-menu .level .menu{width:100px;height:50px}
.metro-side-menu .level .column{float:left;margin-right:-3px}
.metro-side-menu .menu:hover{background-color:#f1f1f1;cursor:pointer}
.metro-side-menu .menu:hover > .icon .svg path{fill:#181818}
.metro-side-menu .svg path{fill:#f1f1f1}
.metro-side-menu  .svg{width:24px;height:24px}
.metro-side-menu .main-level .menu{width:24px;height:24px;margin:5px}
/*Colors*/
.metro-black-1{background-color:#000000}
.metro-green-1{background-color:#00B159}
.metro-blue-1{background-color:#00AEDB}
.metro-orange-1{background-color:#F37735}
.metro-pink-1{background-color:#EC098C}
.metro-blue-2{background-color:#314E6C}
.metro-blue-3{background-color:#44A5AC}
.metro-blue-4{background-color:#297E83}
.metro-red-1{background-color:#D44032}
.metro-red-2{background-color:#C9312C}
.metro-red-3{background-color:#D11141}
.metro-purple-1{background-color:#7C4199}
.metro-yellow-1{background-color:#FFC425}
.metro-blue-5{background-color:#034A8C}
.metro-yellow-2{background-color:#E59B18}
.metro-green-3{background-color:#006054}
.metro-blue-6{background-color:#44A5AC}
.metro-blue-7{background-color:#336797}
.metro-black-2{background-color:#3B3E45}
.metro-purple-3{background-color:#640F6C}
.metro-purple-2{background-color:#1D092C}
.metro-blue-8{background-color:#0C5FA1}
.metro-green-2{background-color:#86AA26}
.metro-orange-2{background-color:#B84E00}
.metro-blue-9{background-color:#305B6E}
.metro-white{background-color:#ffffff}
.metro-blue-10{background-color:#00AAF0}
.metro-yellow-3{background-color:#E59A1A}
.metro-pink-2{background-color:#F63150}
.metro-red-4{background-color:#CE0A0B}
.metro-orange-3{background-color:#BE4F3B}

Javascript

2Tìm đến thẻ </body> và dán đoạn JS bên dưới vào trước thẻ đó. 
<script src="https://sites.google.com/site/iristipsblogger/file/metro-menu.js"></script>

jQuery

3Thêm thư viện jQuery vào sau đoạn code ở bước 2 nếu như website của bạn chưa có. 
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

HTML

4Cuối cùng là dán đoạn html bên dưới vào sau thẻ <body> 
<div class="metro-side-menu">
            <div class="main-level">
                <!--menu 1-->
                <div class="menu metro-blue-1" data-opening-id="sub1">
                    <div class="icon">
                        <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.information.circle.svg" />
                    </div>
                </div>
                <!--menu 1 item-->
                <div id="sub1" class="first-level level">
                    <div class="column">
                        <a class="menu metro-red-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.language.csharp.svg" />
                            </div>
                            <div class="text">Core Language</div>
                        </a>

                        <a class="menu metro-blue-2" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.language.java.svg" />
                            </div>
                            <div class="text">Fav. Language</div>
                        </a>

                        <a class="menu metro-red-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.os.ios.svg" />
                            </div>
                            <div class="text">Our Laptops</div>
                        </a>

                        <a class="menu metro-orange-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.os.windows.8.svg" />
                            </div>
                            <div class="text">Our Servers</div>
                        </a>
                    </div>
                    <div class="column">
                        <a class="menu metro-blue-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.shuffle.svg" />
                            </div>
                            <div class="text">Setting</div>
                        </a>

                        <a class="menu metro-green-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.connection.wifi.svg" />
                            </div>
                            <div class="text">Wifi</div>
                        </a>

                        <a class="menu metro-red-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.smiley.frown.svg" />
                            </div>
                            <div class="text">Sad</div>
                        </a>

                        <a class="menu metro-red-4" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.sign.stop.svg" />
                            </div>
                            <div class="text">Stop Please</div>
                        </a>
                    </div>
                </div>


                <!--menu 2-->
                <div class="menu metro-green-2" data-opening-id="sub2" >
                    <div class="icon">
                        <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.question.svg" />
                    </div>
                </div>
                <!--menu 2 item-->
                <div id="sub2" class="first-level level">
                    <div class="column">
                        <a class="menu metro-blue-10" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.radar.svg" />
                            </div>
                            <div class="text">Who's There?</div>
                        </a>
                        <a class="menu metro-purple-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.refresh.svg" />
                            </div>
                            <div class="text">Repeat After Me</div>
                        </a>
                        <a class="menu metro-blue-7" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.sailboat.svg" />
                            </div>
                            <div class="text">A boat</div>
                        </a>
                        <a class="menu metro-yellow-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.smiley.glasses.svg" />
                            </div>
                            <div class="text">Geek</div>
                        </a>
                    </div>
                    <div class="column">
                        <a class="menu metro-red-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.heart.svg" />
                            </div>
                            <div class="text">Love</div>
                        </a>
                        <a class="menu metro-blue-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.stocking.svg" />
                            </div>
                            <div class="text">Socks</div>
                        </a>
                        <a class="menu metro-green-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.tree.leaf.svg" />
                            </div>
                            <div class="text">Leaf</div>
                        </a>
                        <a class="menu metro-red-2" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.sound.stereo.stack.svg" />
                            </div>
                            <div class="text">Stereo</div>
                        </a>
                    </div>
                    <div class="column">
                        <a class="menu metro-blue-1" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.thermometer.kelvin.svg" />
                            </div>
                            <div class="text">It's Cold Here</div>
                        </a>

                        <a class="menu metro-purple-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.smiley.what.svg" />
                            </div>
                            <div class="text">WTF</div>
                        </a>

                        <a class="menu metro-pink-2" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.stock.up.svg" />
                            </div>
                            <div class="text">Statistics</div>
                        </a>

                        <a class="menu metro-blue-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.timer.rewind.svg" />
                            </div>
                            <div class="text">Rewind</div>
                        </a>
                    </div>
                </div>
                <!--menu 3-->
                <div class="menu metro-orange-3" data-opening-id="sub3" >
                    <div class="icon">
                        <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.speakerphone.svg" />
                    </div>
                </div>
                <!--menu 3 item-->
                <div id="sub3" class="first-level level">
                    <div class="column">                    
                    <a class="menu metro-green-2" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.draw.brush.reflection.svg" />
                            </div>
                            <div class="text">Brush</div>
                        </a>
                        <a class="menu metro-yellow-3" href="#setting">
                            <div class="icon">
                                <img alt=""  class="svg" src="http://amindiary.com/demo/metro-sidebar/images/svg-icons/appbar.cupcake.svg" />
                            </div>
                            <div class="text">Cake</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>


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 codecanyon/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Metro Side Menu phong cách Windows 10 trượt dọc theo website "

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)