Sky Mega Menu Đẹp Tuyệt Bằng Css3 Với Hiệu Ứng Scale

Thảo luận trong 'HTML' bắt đầu bởi Minh Triết, 1/11/15.

Lượt xem: 959

  1. Minh Triết

    Minh Triết

    Tham gia ngày:
    15/3/15
    Bài viết:
    1
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Tình cờ lang thang trên Internet, mình nhặt được 1 dropdown menu của tác giả Voky đẹp tuyệt với nhiều hiệu ứng. Sau đây mình xin hướng dẫn các bạn Tạo "Sky Mega Menu Đẹp Tuyệt Bằng Css3 Với Hiệu Ứng Scale", các hiệu ứng khác bạn hãy tải về và xem thêm nhé. Mong các bạn ủng hộ.

    NGUỒN BÀI VIẾT: Vui lòng đăng nhập hoặc đăng ký để nhìn thấy link

    Hình Minh Họa:

    Vui lòng đăng nhập hoặc đăng ký để nhìn thấy link

    Vui lòng đăng nhập hoặc đăng ký để nhìn thấy link Vui lòng đăng nhập hoặc đăng ký để nhìn thấy link

    Sau đây là các bước thực hiện:
    1 CODE HTML

    <ul class="sky-mega-menu scale-effect">

    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a>
    <div class="submenu">
    <ul>
    <li><a href="#">Mission</a></li>
    <li><a href="#">Our Team</a>
    <div class="submenu">
    <ul>
    <li><a href="#">Markus Fisher</a>
    <div class="submenu">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#">Leyla Sparks</a>
    <div class="submenu">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#">Gleb Ismailov</a>
    <div class="submenu">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#">Viktoria Gibbers</a>
    </li>
    </ul>
    </div>
    </li>
    <li><a href="#">Rewards</a></li>
    <li><a href="#">Certificates</a></li>
    </ul>
    </div>
    </li>
    <!--/ about -->

    <!-- news -->
    <li><a href="#">News</a>
    <div class="submenu">
    <ul>
    <li><a href="#">Company</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Specials</a></li>
    </ul>
    </div>
    </li>
    <!--/ news -->

    <!-- portfolio -->
    <li><a href="#">Portfolio</a>
    <div class="submenu">
    <ul>
    <li><a href="#">Logos</a></li>
    <li><a href="#">Websites</a></li>
    <li><a href="#">Branding</a></li>
    <li><a href="#">Illustrations</a></li>
    </ul>
    </div>
    </li>

    <li><a href="#">Blog</a></li>
    <li><a href="#">Contacts</a></li>

    </ul>

    2 CODE CSS

    <style type="text/css">
    html, body, aside {
    display: block;
    margin: 0;
    padding: 0;
    }

    body {
    background: #ddd;
    }

    @import url(Vui lòng đăng nhập hoặc đăng ký để nhìn thấy link+Sans:300,400,700);

    .sky-mega-menu,
    .sky-mega-menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
    }

    .sky-mega-menu {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    /* level 1 */

    .sky-mega-menu {
    width: 980px;
    margin: 25px auto;
    position: relative;
    z-index: 999;
    background: #2D3E50;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    font-size: 0;
    line-height: 0;
    text-align: right;
    }

    .sky-mega-menu:after {
    content: '';
    display: table;
    clear: both;
    }

    .sky-mega-menu li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 5px;
    border-style: solid;
    border-color: #aaa;
    border-right-width: 1px;
    font-size: 13px;
    line-height: 45px;
    text-align: left;
    white-space: nowrap;
    }

    .sky-mega-menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
    }

    .sky-mega-menu li > div {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    margin-top: 8px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    }

    .sky-mega-menu li > div:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
    }

    .sky-mega-menu li > div:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #2D3E50;
    border-left: 5px solid transparent;
    }

    .sky-mega-menu li:hover > a,
    .sky-mega-menu li.current > a {
    background: #1D2936;
    color: #fff;
    }

    .sky-mega-menu li:hover > div {
    left: 0;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    }

    /* level 2+ */

    .sky-mega-menu li li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    line-height: 21px;
    white-space: normal;
    }

    .sky-mega-menu li li:first-child {
    border-top: 0;
    }

    .sky-mega-menu li li a {
    padding-top: 12px;
    padding-bottom: 12px;
    }

    .sky-mega-menu li li > div {
    top: 0;
    margin: 0 0 0 8px;
    }

    .sky-mega-menu li li > div:after {
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 8px;
    height: 100%;
    }

    .sky-mega-menu li li > div:before {
    top: 22px;
    right: 100%;
    bottom: auto;
    left: auto;
    border-top: 5px solid transparent;
    border-right: 5px solid #2D3E50;
    border-bottom: 5px solid transparent;
    }

    .sky-mega-menu li li:hover > div {
    left: 100%;
    }

    .sky-mega-menu .right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }

    .sky-mega-menu .right li > div:after {
    right: auto;
    left: 100%;
    }

    .sky-mega-menu .right li > div:before {
    right: auto;
    left: 100%;
    }

    .sky-mega-menu .right li:hover > div {
    right: 100%;
    left: auto;
    }


    /**/
    /* animations */
    /**/

    .scale-effect li > div {
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    }

    .scale-effect li:hover > div {
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    background: #2D3E50;
    }


    /* grid */

    .sky-mega-menu .grid-column {
    float: left;
    }

    .sky-mega-menu .grid-column3,
    .sky-mega-menu .submenu {
    width: 234px;
    }
    </style>

    Vậy là xong. Chúc các bạn thành công!
     

Chia sẻ trang này