Thứ Ba, ngày 29 tháng 11 năm 2016

Share CODE Sliding Dropdown MENU CSS3 Đẹp cho Mọi Web/Wap/Blog

CSS3 hiện nay đã dần dần phổ biến với nhiều webmaster và dần mang lại những hiệu ứng đẹp mà trước kia chỉ có javascript - jquery mới có thể đem lại. Hôm nay codeseo.net xin chia sẻ bộ CODE Dropdown Đơn Giản mà Đẹp bằng CSS3 với hiệu ứng tuyệt vời


Sau Đây là các bước thực hiện:

1 CODE HTML

<header>

    <div id="topmenu-wrapper">
        <nav id="menu-box">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Portfolio<span class="arrow">More Link</span></a>
                    <ul class="menuLevel-1">
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link<span class="arrow-right">More Link</span></a>
                            <ul class="menuLevel-2">
                                <li><a href="#">Sub Sub link</a></li>
                                <li><a href="#">Sub Sub link</a></li>
                                <li><a href="#">Sub Sub link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">Tutorials <span class="arrow">More Link</span></a>
                    <ul class="menuLevel-1">
                        <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                            <ul class="menuLevel-2">
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                            </ul>
                        </li>
                        <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                            <ul class="menuLevel-2">
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                            </ul>
                        </li>
                        <li><a href="">Sub Link</a></li>
                        <li><a href="">Sub Link</a></li>
                        <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                            <ul class="menuLevel-2">
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                                <li><a href="">Sub Sub Link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">FAQ</a></li>

            </ul>
        </nav>
    </div>
</header>

2 CODE CSS

<style type="text/css">
html,
body {
    background: #eaeaea;
    font-size: 12px;
    font-family: "Open Sans", serif;
    min-width: 960px;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.6)
}
a {
    -moz-transition: color .3s ease-out;
    -webkit-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    transition: color .3s ease-out
}
h1 {
    font-size: 60px;
    font-weight: 400;
    padding-top: 300px;
    margin: 0;
    text-align: center;
    color: #333;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2)
}
h1 small {
    font: .2em normal Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    line-height: 50px;
    display: block
}
h1 span {
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .2em;
    line-height: 30px;
    display: block
}
h1 a {
    text-decoration: none;
    color: #00c6ff;
    font-style: italic
}
header {
    width: 100%
}
header #topmenu-wrapper {
    background: #2D3E50;
    float: left;
    line-height: 30px;
    width: 100%;
    margin: 25px 0 0
}
header nav#menu-box {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 960px
}
header nav#menu-box ul {
    margin: 0;
    padding: 0
}
header nav#menu-box ul li {
    float: left;
    position: relative;
    font-size: 15px;
    list-style: none;
    margin: 0;
    padding: 8px 20px;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    border-right: 1px solid #ccc
}
header nav#menu-box ul li:first-child {
    border-left: 1px solid #ccc
}
header nav#menu-box ul li a {
    color: #fff;
    text-decoration: none;
    display: block
}
header nav#menu-box ul li a:hover {
    color: #f6f6f6
}
header nav#menu-box ul li:hover {
    background: #1D2936
}
header nav#menu-box ul li span {
    background: url(http://3.bp.blogspot.com/-xVPJAwZCFow/VQPL-nd1RhI/AAAAAAAAAxo/pdt43MQeObQ/s1600/arrow.png) center no-repeat;
    height: 10px;
    position: absolute;
    text-indent: -9999px;
    top: 18px;
    right: 5px;
    width: 10px
}
header nav#menu-box ul li span.arrow {
    background-position: 0 2px
}
header nav#menu-box ul li span.arrow-right {
    background-position: -10px 2px
}
header nav#menu-box ul li ul.menuLevel-1 {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 45px;
    background: #1D2936;
    width: 180px;
    opacity: 0;
    visibility: hidden;
    -moz-transition: opacity .2s .1s ease-out, visibility .1s .1s linear;
    -webkit-transition: opacity .3s ease-out, visibility .1s .1s linear;
    -o-transition: opacity .3s ease-out, visibility .1s .1s linear;
    transition: opacity .3s ease-out, visibility .1s .1s linear
}
header nav#menu-box ul li ul.menuLevel-1 li {
    border: none;
    border-bottom: 1px solid #ccc;
    clear: both;
    text-align: left;
    padding: 8px 10px;
    width: 160px;
    -moz-transition: opacity .1s .15s ease-out, margin .3s .1s ease-out;
    -webkit-transition: opacity .1s .15s ease-out, margin .3s .1s ease-out;
    -o-transition: opacity .15s .15s ease-out, margin .3s .1s ease-out;
    transition: opacity .15s .15s ease-out, margin .3s .1s ease-out
}
header nav#menu-box ul li ul.menuLevel-1 li:hover {
    background: #E53C42
}
header nav#menu-box ul li ul.menuLevel-1 li a {
    color: rgba(255, 255, 255, 0)
}
header nav#menu-box ul li:hover ul.menuLevel-1 {
    opacity: 1;
    visibility: visible
}
header nav#menu-box ul li:hover ul.menuLevel-1 li {
    margin-top: 0;
    opacity: 1
}
header nav#menu-box ul li:hover ul.menuLevel-1 li a {
    color: rgba(255, 255, 255, 0.6);
    -moz-transition: color .1s ease-out;
    -webkit-transition: color .1s ease-out;
    -o-transition: color .1s ease-out;
    transition: color .1s ease-out
}
header nav#menu-box ul li:hover ul.menuLevel-1 li a:hover {
    color: rgba(255, 255, 255, 1);
    -moz-transition: color .3s ease-out;
    -webkit-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    transition: color .3s ease-out
}
header nav#menu-box ul li:hover ul.menuLevel-1 li:hover &gt;
a {
    color: #fff
}
header nav#menu-box ul li ul.menuLevel-1 li ul.menuLevel-2 {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 100px;
    top: 0;
    background: #222;
    width: 180px;
    opacity: 0;
    visibility: hidden;
    -moz-transition: opacity .2s .01s ease-in-out, left .2s .1s ease-out, visibility .1s .1s linear;
    -webkit-transition: opacity .2s .01s ease-in-out, left .2s .1s ease-out, visibility .1s .1s linear;
    -o-transition: opacity .2s .01s ease-in-out, left .2s .1s ease-out, visibility .1s .1s linear;
    transition: opacity .2s .01s ease-in-out, left .2s .1s ease-out, visibility .1s .1s linear
}
header nav#menu-box ul li ul.menuLevel-1 li ul.menuLevel-2 li {
    border: none;
    border-bottom: 1px solid #ccc;
    clear: both;
    margin: 0;
    padding: 10px;
    width: 160px;
    opacity: 1
}
header nav#menu-box ul li ul.menuLevel-1 li:hover ul.menuLevel-2 {
    opacity: 1;
    left: 180px;
    visibility: visible
}
</style> 

Thế là xong rồi đó các bạn, bây giờ các bạn chỉ cần áp dụng nó vào ngay cho các menu chính trên web hay blog của các bạn là okie. Nhớ để lại lời nhắn nếu bạn cảm thấy khó hiểu ở phần nào trong bài viết này nhé.