Hướng dẫn thiết kế Menu Bottom với CSS3 và BorderMenu.Js

Xem: 341    Tải: 7   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 1 đánh giá ) File đã được kiểm thử

Miễn Phí [megacode]huong-dan-thiet-ke-menu-bottom-voi.rar (4.74 KB)
Tải miễn phí

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-thiet-ke-menu-bottom-voi.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu menu được đặt ở vị trí bottom, tức là ở dưới cùng của trang web. Mẫu menu này với hiệu ứng overley cực cool, đảm bảo sẽ làm hài lòng những bạn khó tính nhất.

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu menu được đặt ở vị trí bottom, tức là ở dưới cùng của trang web. Mẫu menu này với hiệu ứng overley cực cool, đảm bảo sẽ làm hài lòng những bạn khó tính nhất.

HTML

Đầu tiên là chúng ta xây dựng khung chuẩn html cho menu như sau :

<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
        <ul>
                <li><a href="#" class="bt-icon icon-user-outline">About</a></li>
            <li><a href="#" class="bt-icon icon-sun">Skills</a></li>
            <li><a href="#" class="bt-icon icon-windows">Work</a></li>
            <li><a href="#" class="bt-icon icon-speaker">Blog</a></li>
            <li><a href="#" class="bt-icon icon-star">Clients</a></li>
            <li><a href="#" class="bt-icon icon-bubble">Contact</a></li>
        </ul>
</nav>

CSS

Sau đó các bạn copy và dùng đoạn css sau :

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
body  {
    background: #2980b9;
}
 
.container {
    padding: 80px;
    text-align: center;
}
 
a.title{ color:#fff; font-size:12px; }
 
.container h1 {color:white; text-align: center;}
 
.bt-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
 
.bt-menu.bt-menu-open {
    height: 100%;
    border-width: 30px 30px 90px 30px;
    background-color: rgba(0,0,0,0.3);
    -webkit-transition: border-width 0.3s, background-color 0.3s;
    transition: border-width 0.3s, background-color 0.3s;
}
 
.bt-overlay {
    position: absolute;
    width: 100%;
}
 
.bt-menu-open .bt-overlay {
    height: 100%;
}
 
.bt-menu-trigger {
    position: fixed;
    bottom: 22px;
    left: 50%;
    z-index: 100;
    display: block;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
 
.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 8%;
    background-color: #fff;
    font-size: 0px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.bt-menu-open .bt-menu-trigger span {
    background-color: #2980b9;
}
 
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}
 
.bt-menu-trigger span:before {
    -webkit-transform: translateY(-250%);
    transform: translateY(-250%);
}
 
.bt-menu-trigger span:after {
    -webkit-transform: translateY(250%);
    transform: translateY(250%);
}
 
.bt-menu-open .bt-menu-trigger span:before,
.bt-menu-open .bt-menu-trigger span:after {
    background-color: #2980b9;
}
 
.bt-menu-open .bt-menu-trigger span:before {
    -webkit-transform: translateY(-350%);
    transform: translateY(-350%);
}
 
.bt-menu-open .bt-menu-trigger span:after {
    -webkit-transform: translateY(350%);
    transform: translateY(350%);
}
 
.bt-menu ul {
    position: fixed;
    bottom: 0px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: center;
    white-space: nowrap;
    height: 0;
    -webkit-transition: height 0s 0.3s;
    transition: height 0s 0.3s;
}
 
.bt-menu.bt-menu-open ul {
    height: 90px;
    -webkit-transition: none;
    transition: none;
}
 
.bt-menu ul li,
.bt-menu ul li a {
    text-align: center;
}
 
.bt-menu ul li {
    display: inline-block;
    margin: 0 2%;
    width: 5%;
    height: 90px;
    line-height: 90px;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}
 
.bt-menu ul li:nth-child(3) {
    margin-right: 70px;
}
 
.bt-menu ul li:nth-child(4) {
    margin-left: 70px;
}
 
.bt-menu.bt-menu-open ul li {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
 
.bt-menu.bt-menu-open ul li:first-child,
.bt-menu.bt-menu-open ul li:last-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
 
.bt-menu.bt-menu-open ul li:nth-child(2),
.bt-menu.bt-menu-open ul li:nth-last-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
 
.bt-menu.bt-menu-open ul li:nth-child(3),
.bt-menu.bt-menu-open ul li:nth-last-child(3) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
 
.bt-menu ul li a {
    display: block;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.15em;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
 
.bt-menu ul li a:before {
    display: none;
    font-size: 32px;
}
 
.bt-menu ul li a:hover,
.bt-menu ul li a:focus {
    color: #2980b9;
}
 
@media screen and (max-width: 65.1em) {
    .bt-menu ul li a {
        font-size: 90%;
    }
}
 
@media screen and (max-width: 55.5em) {
    .bt-menu ul li {
        margin: 0 15px;
    }
 
    .bt-menu ul li a {
        font-size: 0px;
    }
 
    .bt-menu ul li a:before {
        display: block;
    }
}
 
@media screen and (max-width: 32em) {
    .bt-menu-trigger {
        width: 40px;
        margin-left: -20px;
    }
 
    .bt-menu ul li {
        margin: 0 2%;
    }
 
    .bt-menu ul li:nth-child(3) {
        margin-right: 50px;
    }
 
    .bt-menu ul li:nth-child(4) {
        margin-left: 50px;
    }
 
    .bt-menu ul li a:before {
        font-size: 24px;
    }
}

Javascript

Cuối cùng là chèn 2 đoạn script sau vào là được :

<script src="classie.js"></script>
<script src="borderMenu.js"></script>

2 đoạn script bên trên các bạn có thể tìm thấy ở mục download mà mình để ở trong bài viết này.

Chúc các bạn thành công !

Hướng dẫn thiết kế Menu Bottom với CSS3 và BorderMenu.Js

Hướng dẫn thiết kế Menu Bottom với CSS3 và BorderMenu.Js Đăng ngày 28-09-2016  Hôm nay mình sẽ chia sẻ cho các bạn một mẫu menu được đặt ở vị trí bottom, tức là ở dưới cùng của trang web. Mẫu menu này với hiệu ứng overley cực cool, đảm bảo sẽ làm hài lòng những bạn khó tính nhất. 9/10 341

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn