Chia sẻ ý tưởng: Tạo thanh điều hướng hover nhiều tiện ích

MÌnh giới thiệu ý tưởng này Khi bạn di chuyển chuột lên gần đầu trang thì nó hiện ra, thích hợp cho bác nào muốn làm cái nav fixed mà sợ tốn chiều rộng trang.
- Có thể chèn thông báo or cái gì mấy bác thích là đc.
Có nhiều cách để làm mình chia sẻ cách mình làm.
Demo: http://sinhvienpdu.net hihi
+ Tạo template : bcat_tabhover

Mã:

<xen:require css="bcat_tabhover.css" />

    <div class="overlay"></div>
    <div class="bcat_nav">
        <div class="wrap">
            <ul class='navigation'>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sinh</a></li>
                <li><a href="#">Viên</a></li>
                <li><a href="#">Phạm</a></li>
                <li><a href="#">Văn</a></li>
                <li><a href="#">Đông</a></li>
                <li><a href="#">Hihi</a></li>
                <li><a href="#">Bcat95</a></li>
            </ul>
        </div>
    </div>

+ Tạo template: bcat_tabhover.css

Mã:

body{
    background:#d8d8d8;
}

.overlay{
    position:fixed;
    lefT:0;
    top:0;
    height:30px;
    width:60%;
    background-color:transparent;
    z-index:1;
}

.wrap{
    width:960px;
    margin:auto;
}

.bcat_nav{
    background-color:#1e1e1e;
    height:60px;
    text-align:center;
    position:fixed;
    width:100%;
    left:0;
    top:-60px;
    z-index:999;
    -moz-transition:top 0.4s ease;
    -webkit-transition:top 0.4s ease;
    -o-transition:top 0.4s ease;
    -ms-transition:top 0.4s ease;
    transition:top 0.4s ease;
}

.overlay:hover ~ .bcat_nav,.bcat_nav:hover{
    top:0;
}

.navigation{
    display:inline-block;
}

.navigation li{
    display:inline;
}

.navigation a{
    display:block;
    float:left;
    font-family:helvetica,arial,sans-serif;
    color:#fff;
    font-size:12px;
    height:100%;
    line-height:60px;
    text-transform:uppercase;
    padding:0 35px;
    font-weight:bold;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}

.navigation li:nth-child(1) a:hover{
    background-color:#ffa32c;
}

.navigation li:nth-child(2) a:hover{
    background-color:#73e900;
}

.navigation li:nth-child(3) a:hover{
    background-color:#992ff3;
}

.navigation li:nth-child(4) a:hover{
    background-color:#38eec5;
}

.navigation li:nth-child(5) a:hover{
    background-color:#fff000;
}

.navigation li:nth-child(6) a:hover{
    background-color:#008aff;
}

.navigation li:nth-child(7) a:hover{
    background-color:#ff0096;
}

.navigation li:nth-child(8) a:hover{
    background-color:#ff3939;
}

- Sau đó vào template header chèn <xen:include template="bcat_tabhover" /> vào sau <xen:hook name="header"> thế là xong hihi.
Mình đã nghĩ đến nút đăng nhập ở đầu site nên đã giảm độ rộng lại rồi.

 

Mong là có người thích nó như mình ^^ g9 all

 

Minh thử làm nhưng lỗi đâu đó, k có listener || callback chỉ có template thôi... vẫn k đc... bác giúp giùm nha

 

Mình chỉ biết dùng css đứng yên nếu hần nử nằm trên trang nhất destop

Mã:

position: fixed;
top: 30px;
left: 0px;

còn nếu nó nằm dưới trang thì dùng js

 

cảnh sát có đó k... bắt dùm thèn này... tks nhé

 

hi, k

 

Có add on bạn có thể thử nha hi