Pure CSS3 Mega Dropdown Menu với Animation (Horizontal)

Pure CSS3 Mega Dropdown Menu with Animation (Horizontal)

Hôm nay Iris Tips xin chia sẻ cho các bạn một kiểu menu khá đẹp, hỗ trợ responsive đầy đủ, đặc biệt menu được làm hoàn toàn bằng CSS nên sẽ không ảnh hưởng đến tốc độ tải trang của website bạn. Trong bài viết này Iris Tips sẽ giới thiệu cho các bạn phiên bản đầu tiên của thanh menu này đó là kiểu nằm ngang. Các phiên bản khác sẽ được giới thiệu trong các bài viết tiếp theo, các bạn đón theo dõi nhé.

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>

.mcd-menu{list-style:none;padding:0;margin:0;background:#FFF;height:100px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
.mcd-menu li{float:left;position:relative}
.mcd-menu li a{display:block;text-decoration:none;padding:12px 20px;text-align:center;color:#777;border-right:1px solid #E7E7E7}
.mcd-menu li a i{display:block;font-size:30px;margin-bottom:10px}
.mcd-menu li a strong{display:block;text-transform:uppercase}
.mcd-menu li a small{display:block;font-size:10px}
.mcd-menu li a i,.mcd-menu li a strong,.mcd-menu li a small{position:relative;transition:all 300ms linear;-o-transition:all 300ms linear;-ms-transition:all 300ms linear;-moz-transition:all 300ms linear;-webkit-transition:all 300ms linear}
.mcd-menu li:hover > a i{opacity:1;-webkit-animation:moveFromTop 300ms ease-in-out;-moz-animation:moveFromTop 300ms ease-in-out;-ms-animation:moveFromTop 300ms ease-in-out;-o-animation:moveFromTop 300ms ease-in-out;animation:moveFromTop 300ms ease-in-out}
.mcd-menu li:hover a strong{opacity:1;-webkit-animation:moveFromLeft 300ms ease-in-out;-moz-animation:moveFromLeft 300ms ease-in-out;-ms-animation:moveFromLeft 300ms ease-in-out;-o-animation:moveFromLeft 300ms ease-in-out;animation:moveFromLeft 300ms ease-in-out}
.mcd-menu li:hover a small{opacity:1;-webkit-animation:moveFromRight 300ms ease-in-out;-moz-animation:moveFromRight 300ms ease-in-out;-ms-animation:moveFromRight 300ms ease-in-out;-o-animation:moveFromRight 300ms ease-in-out;animation:moveFromRight 300ms ease-in-out}
.mcd-menu li:hover > a{color:#e67e22}
.mcd-menu li a.active{position:relative;color:#e67e22;border:0;border-top:4px solid #e67e22;border-bottom:4px solid #e67e22;margin-top:-4px;box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;-webkit-box-shadow:0 0 5px #DDD}
.mcd-menu li a.active:before{content:"";position:absolute;top:0;left:45%;border-top:5px solid #e67e22;border-left:5px solid transparent;border-right:5px solid transparent}
@-webkit-keyframes moveFromTop{from{opacity:0;-webkit-transform:translateY(200%);-moz-transform:translateY(200%);-ms-transform:translateY(200%);-o-transform:translateY(200%);transform:translateY(200%)}to{opacity:1;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}}
@-webkit-keyframes moveFromLeft{from{opacity:0;-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%)}to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}}
@-webkit-keyframes moveFromRight{from{opacity:0;-webkit-transform:translateX(-200%);-moz-transform:translateX(-200%);-ms-transform:translateX(-200%);-o-transform:translateX(-200%);transform:translateX(-200%)}to{opacity:1;-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%)}}
.mcd-menu li ul,.mcd-menu li ul li ul{position:absolute;height:auto;min-width:200px;padding:0;margin:0;background:#FFF;border-top:4px solid #e67e22;opacity:0;visibility:hidden;transition:all 300ms linear;-o-transition:all 300ms linear;-ms-transition:all 300ms linear;-moz-transition:all 300ms linear;-webkit-transition:all 300ms linear;top:130px;z-index:1000}
.mcd-menu li ul:before{content:"";position:absolute;top:-8px;left:23%;border-bottom:5px solid #e67e22;border-left:5px solid transparent;border-right:5px solid transparent}
.mcd-menu li:hover > ul,.mcd-menu li ul li:hover > ul{display:block;opacity:1;visibility:visible;top:100px}
.mcd-menu li ul li{float:none}
.mcd-menu li ul li a{padding:10px;text-align:left;border:0;border-bottom:1px solid #EEE}
.mcd-menu li ul li a i{font-size:16px;display:inline-block;margin:0 10px 0 0}
.mcd-menu li ul li ul{left:230px;top:0;border:0;border-left:4px solid #e67e22}
.mcd-menu li ul li ul:before{content:"";position:absolute;top:15px;left:-14px;border-right:5px solid #e67e22;border-bottom:5px solid transparent;border-top:5px solid transparent}
.mcd-menu li ul li:hover > ul{top:0;left:200px}
.mcd-menu li.float{float:right}
.mcd-menu li a.search{padding:29px 20px 30px 10px}
.mcd-menu li a.search i{margin:0;display:inline-block;font-size:18px}
.mcd-menu li a.search input{border:1px solid #EEE;padding:10px;background:#FFF;outline:none;color:#777}
.mcd-menu li a.search button{border:1px solid #e67e22;padding:10px;background:#e67e22;outline:none;color:#FFF;margin-left:-4px}
.mcd-menu li a.search input:focus{border:1px solid #e67e22}
.mcd-menu li a.search-mobile{display:none;background:#e67e22;border-left:1px solid #e67e22;border-radius:0 3px 3px 0}
.mcd-menu li a.search-mobile i{color:#FFF;margin:0!important}
@media only screen and (min-width:960px) and (max-width:1199px){.mcd-menu li a.search input{width:100px}}
@media only screen and (min-width:768px) and (max-width:959px){.mcd-menu{height:85px}.mcd-menu li a{padding:12px}.mcd-menu li a i{font-size:22px}.mcd-menu li a strong{font-size:12px}.mcd-menu li a small{font-size:10px}.mcd-menu li a.search{display:none}.mcd-menu li a.search-mobile{display:block!important;margin:20px;position:absolute;left:-80px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.mcd-menu li:hover > ul{top:85px;min-width:180px}.mcd-menu li ul li > ul{min-width:150px;left:200px;top:0}.mcd-menu li ul li:hover > ul{min-width:150px;left:180px;top:0}.mcd-menu li ul li ul li ul{min-width:150px;left:25px!important;top:54px;border:0;border-top:3px solid #e67e22}.mcd-menu li ul li ul li:hover ul{top:35px}.mcd-menu li ul li ul li ul:before{border:0;border-bottom:5px solid #e67e22;border-left:5px solid transparent;border-right:5px solid transparent;left:10%;top:-8px}.mcd-menu li:hover ul a{font-size:12px}.mcd-menu li:hover ul a i{font-size:14px}}
@media only screen and (min-width:480px) and (max-width:767px){.mcd-menu{height:42px;position:relative}.mcd-menu li a{padding:12px 17.7px}.mcd-menu li a strong,.mcd-menu li a small,.mcd-menu li a.search{display:none}.mcd-menu li a i{margin:0;font-size:18px}.mcd-menu li{position:static}.mcd-menu li ul{min-width:100%;left:0;top:50px}.mcd-menu li:hover > ul{top:42px}.mcd-menu li > ul:before{border:0}.mcd-menu li ul > li{position:relative}.mcd-menu li ul li:hover > ul{left:34px}.mcd-menu li a{position:relative;font-size:12px}.mcd-menu li a:hover strong,.mcd-menu li a.active strong{display:block;font-size:10px;padding:3px 0;position:absolute;top:-20px;left:0;background:#e67e22;color:#FFF;min-width:100%;text-transform:lowercase;font-weight:normal}.mcd-menu li a.active:before{left:40%}.mcd-menu li a.search-mobile{display:block!important;position:absolute;right:0}.mcd-menu li ul li > ul{min-width:200px;left:200px}.mcd-menu li ul li:hover ul{left:180px}.mcd-menu li ul li ul:before{left:-9px}.mcd-menu li ul li ul li ul{min-width:200px;border:0;border-top:3px solid #e67e22;left:25px!important;top:45px}.mcd-menu li ul li ul li:hover ul{top:40px}.mcd-menu li ul li ul li ul:before{border:0;border-bottom:5px solid #e67e22;border-left:5px solid transparent;border-right:5px solid transparent;left:10%;top:-8px}}
@media only screen and (max-width:479px){.mcd-menu{height:42px;position:relative}.mcd-menu li a strong,.mcd-menu li a small,.mcd-menu li a.search{display:none}.mcd-menu li a{padding:12px 13.8px;font-size:12px}.mcd-menu li a i{margin:0;font-size:18px}.mcd-menu li{position:static}.mcd-menu li ul{min-width:100%;left:0;top:50px}.mcd-menu li:hover > ul{top:42px}.mcd-menu li > ul:before{border:0}.mcd-menu li ul > li{position:relative}.mcd-menu li ul li:hover > ul{left:34px}.mcd-menu li a{position:relative}.mcd-menu li a:hover strong,.mcd-menu li a.active strong{display:block;font-size:10px;padding:3px 0;position:absolute;top:-20px;left:0;background:#e67e22;color:#FFF;min-width:100%;text-transform:lowercase;font-weight:normal}.mcd-menu li a.active:before{left:40%}.mcd-menu li ul li > ul{min-width:150px;left:160px}.mcd-menu li ul li:hover ul{left:120px}.mcd-menu li ul li ul:before{left:-9px}.mcd-menu li ul li ul li ul{min-width:160px;left:25px!important;top:39px;border:0;border-top:3px solid #e67e22}.mcd-menu li ul li ul li:hover ul{top:39px}.mcd-menu li ul li ul li ul:before{border:0;border-bottom:5px solid #e67e22;border-left:5px solid transparent;border-right:5px solid transparent;left:10%;top:-8px}}

HTML

2Dán đoạn HTML sau vào vị trí bạn muốn đặt menu (có thể sau thẻ <body>)

<nav>
        <ul class="mcd-menu">
            <li>
                <a href="" class="active">
                    <i class="fa fa-home"></i>
                    <strong>Home</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-edit"></i>
                    <strong>About us</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-gift"></i>
                    <strong>Features</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-globe"></i>
                    <strong>News</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-comments-o"></i>
                    <strong>Blog</strong>
                    <small>what they say</small>
                </a>
                <ul>
                    <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
                    <li>
                        <a href="#"><i class="fa fa-group"></i>Our Team</a>
                        <ul>
                            <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
                            <li>
                                <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
                                <ul>
                                    <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
                                    <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
                                </ul>
                            </li>
                            <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
                    <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
                </ul>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-picture-o"></i>
                    <strong>Portfolio</strong>
                    <small>sweet home</small>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-envelope-o"></i>
                    <strong>Contacts</strong>
                    <small>drop a line</small>
                </a>
            </li>
            <li class="float">
                <a class="search">
                    <input type="text" value="search ..."/>
                    <button><i class="fa fa-search"></i></button>
                </a>
                <a href="/search" class="search-mobile">
                    <i class="fa fa-search"></i>
                </a>       
            </li>
        </ul>
    </nav>

Chỉnh sửa: Bạn có thể tùy chỉnh lại tab nổi bật theo ý muốn bằng cách di chuyển đoạn code class="active". Ví dụ trong hình minh họa mình để active tab ở tab About còn trong demo bên dưới là tab Home.

• 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 rizky/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm