Chuyển đến nội dung chính

Hiệu ứng CSS3 Menu Navigation Effect

Hôm nay mình xin giới thiệu đến các bạn chức năng CSS3 MENU NAVIGATION EFFECT. Với hiệu ứng này các bạn có thể tạo ra nhứng menu đẹp mắc và cá tính cho Website của các bạn. Hyhy nói lang mang vậy thôi :D CSS: 
 background: #161616 url(pattern_40.gif) top left repeat;
 margin: 0;
 padding: 0;
 font: 12px normal Verdana, Arial, Helvetica, sans-serif;
 height: 100%;
 color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a { 
 text-decoration:none; 
 color:#00c6ff;
}

h1 {
 font: 4em normal Arial, Helvetica, sans-serif;
 padding: 20px; margin: 0;
 text-align:center;
 color:#bbb;
}

h1 small{
 font: 0.2em normal  Arial, Helvetica, sans-serif;
 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
 display: block;
}

h2 {
 font: 2em normal Arial, Helvetica, sans-serif;
 padding-bottom:30px;
 color:#fff;
 display:block;
}

h3 {
 font: 1em Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#fff;
 display:block;
 padding:10px;
}

.container {
 width: 960px;
 margin: 0 auto; 
 overflow: hidden;
 position:relative;
 padding-bottom:50px;
}

/* FIRST EXAMPLE */
#panel { 
 width:300px;
 list-style:none; 
 padding-top:30px;
 display:inline-block;
}

#panel li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#panel li.animation { 
 -moz-transition: all 0.4s ease-in-out; 
 -moz-transform:translateX(0px); 
 -o-transition: all 0.4s ease-in-out; 
 -o-transform:translateX(0px); 
 -webkit-transition: all 0.4s ease-in-out; 
 -webkit-transform:translateX(0px); 
}

#panel li.animation:hover { 
 -moz-transform:translateX(25px);
 -o-transform:translateX(25px);
 -webkit-transform:translateX(25px);
}

#panel li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panel li a:hover { 
 color:#00c6ff;
}

/* SECOND EXAMPLE */

#paneltwo { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#paneltwo li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#paneltwo li.linkOne, #paneltwo li.linkTwo, #paneltwo li.linkThree, 
#paneltwo li.linkFour, #paneltwo li.linkFive 
{   -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, #paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, #paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive 
{  -moz-transform:translateX(0px);
 -moz-transition: all 1s ease-in-out; 
 -webkit-transform:translateX(0px);
 -webkit-transition: all 1s ease-in-out; 
 -o-transform:translateX(0px);
 -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
 -moz-transform:translateX(-90%); 
 -moz-transition-delay:0.6s; 
 
 -webkit-transform:translateX(-90%); 
 -webkit-transition-delay:0.6s; 
 
 -o-transform:translateX(-90%); 
 -o-transition-delay:0.6s; 
 
 z-index:5; 
}
#paneltwo li.linkTwo { 
 -moz-transform:translateX(-180%); 
 -moz-transition-delay:0.5s; 
 
 -webkit-transform:translateX(-180%); 
 -webkit-transition-delay:0.5s; 
 
 -o-transform:translateX(-180%); 
 -o-transition-delay:0.5s; 
 
 z-index:4;
}
#paneltwo li.linkThree { 
 -moz-transform:translateX(-270%); 
 -moz-transition-delay:0.4s; 
 
 -webkit-transform:translateX(-270%); 
 -webkit-transition-delay:0.4s; 
 
 -o-transform:translateX(-270%); 
 -o-transition-delay:0.4s;
 
 z-index:3;
}
#paneltwo li.linkFour { 
 -moz-transform:translateX(-360%); 
 -moz-transition-delay:0.3s;
 
 -webkit-transform:translateX(-360%); 
 -webkit-transition-delay:0.3s;
 
 -o-transform:translateX(-360%); 
 -o-transition-delay:0.3s; 
 z-index:2;
}

#paneltwo li.linkFive { 
 -moz-transform:translateX(-450%); 
 -moz-transition-delay:0.2s;
 
 -webkit-transform:translateX(-450%); 
 -webkit-transition-delay:0.2s;
 
 -o-transform:translateX(-450%); 
 -o-transition-delay:0.2s;
  
 z-index:1;
}

#paneltwo:hover li.linkOne { 
 -moz-transition-delay:0s; 
 -webkit-transition-delay:0s; 
 -o-transition-delay:0s; 
 z-index:5;
}
#paneltwo:hover li.linkTwo { 
 -moz-transition-delay:0.2s;
 -webkit-transition-delay:0.2s;
 -o-transition-delay:0.2s; 
 z-index:4;
}
#paneltwo:hover li.linkThree { 
 -moz-transition-delay:0.4s;
 -webkit-transition-delay:0.4s;
 -o-transition-delay:0.4s; 
 z-index:3;
}
#paneltwo:hover li.linkFour { 
 -moz-transition-delay:0.6s;
 -webkit-transition-delay:0.6s;
 -o-transition-delay:0.6s; 
 z-index:2;
}
#paneltwo:hover li.linkFive { 
 -moz-transition-delay:0.8s;
 -webkit-transition-delay:0.8s;
 -o-transition-delay:0.8s; 
 z-index:1;
}

#paneltwo li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#paneltwo li a:hover { 
 color:#00c6ff;
}

/* THIRD EXAMPLE */

#panelthree { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#panelthree li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; border-top:1px solid #111; 
        border-right:1px solid #333; border-bottom:1px solid #333;
}

#panelthree li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#panelthree li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panelthree li a:hover { 
 color:#00c6ff;
}

#panelthree li.linkAnimationOne, #panelthree li.linkAnimationTwo, 
#panelthree li.linkAnimationThree, #panelthree li.linkAnimationFour, 
#panelthree li.linkAnimationFive
{   -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#panelthree:hover li.linkAnimationOne, #panelthree:hover li.linkAnimationTwo, 
#panelthree:hover li.linkAnimationThree, #panelthree:hover li.linkAnimationFour, 
#panelthree:hover li.linkAnimationFive
{  -moz-animation:bounceX 0.5s linear forwards;
 -webkit-animation:bounceX 0.5s linear forwards;
}

#panelthree:hover li.linkAnimationTwo {  
 -moz-animation-delay:0.5s;
 -webkit-animation-delay:0.5s; 
}
#panelthree:hover li.linkAnimationThree { 
 -moz-animation-delay:1s;
 -webkit-animation-delay:1s; 
}
#panelthree:hover li.linkAnimationFour{ 
 -moz-animation-delay:1.5s;
 -webkit-animation-delay:1.5s; 
}
#panelthree:hover li.linkAnimationFive 
{  -moz-animation-delay:2s;
 -webkit-animation-delay:2s;
}

#panelthree li.linkAnimationOne {
 -moz-transform:translateX(-100%); 
 -webkit-transform:translateX(-100%); 

 z-index:5; 
}
#panelthree li.linkAnimationTwo {
 -moz-transform:translateX(-200%); 
 -webkit-transform:translateX(-200%); 
 
 z-index:4; 
}
#panelthree li.linkAnimationThree {
 -moz-transform:translateX(-300%); 
 -webkit-transform:translateX(-300%); 
 
 z-index:3; 
}
#panelthree li.linkAnimationFour {
 -moz-transform:translateX(-400%); 
 -webkit-transform:translateX(-400%); 
 
 z-index:2; 
}
#panelthree li.linkAnimationFive {
 -moz-transform:translateX(-500%); 
 -webkit-transform:translateX(-500%); 
 
 z-index:1; 
}

@-moz-keyframes bounceX {
0% { -moz-transform: translateX(-205px); -moz-animation-timing-function: ease-in; }   
40% { -moz-transform: translateX(-100px); -moz-animation-timing-function: ease-in; }
65% { -moz-transform: translateX(-52px); -moz-animation-timing-function: ease-in; }
82% { -moz-transform: translateX(-25px); -moz-animation-timing-function: ease-in; }
92% { -moz-transform: translateX(-12px); -moz-animation-timing-function: ease-in; }   
55%, 75%, 87%, 97%, 100% { -moz-transform: translateX(0px); -moz-animation-timing-function: ease-out; }
}

@-webkit-keyframes bounceX {
0% { -webkit-transform: translateX(-205px); -webkit-animation-timing-function: ease-in; }
   
40% { -webkit-transform: translateX(-100px); -webkit-animation-timing-function: ease-in; }
65% { -webkit-transform: translateX(-52px); -webkit-animation-timing-function: ease-in; }
82% { -webkit-transform: translateX(-25px); -webkit-animation-timing-function: ease-in; }
92% { -webkit-transform: translateX(-12px); -webkit-animation-timing-function: ease-in; }
   
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateX(0px); -webkit-animation-timing-function: ease-out; }
}
HTML: 
<div class="container">
 <!-- FIRST EXAMPLE -->
 <ul id="panel">
        <li><h3>MENU</h3></li>
        <li class="animation"><a href="#">Link 1</a></li>
        <li class="animation"><a href="#">Link 2</a></li>
        <li class="animation"><a href="#">Link 3</a></li>
        <li class="animation"><a href="#">Link 4</a></li>
        <li class="animation"><a href="#">Link 5</a></li>
    </ul>
</div>

<div class="container">   
    <!-- SECOND EXAMPLE -->
    <ul id="paneltwo">
        <li class="mask"><h3>MENU ></h3></li>
        <li class="linkOne"><a href="#">Link 1</a></li>
        <li class="linkTwo"><a href="#">Link 2</a></li>
        <li class="linkThree"><a href="#">Link 3</a></li>
        <li class="linkFour"><a href="#">Link 4</a></li>
        <li class="linkFive"><a href="#">Link 5</a></li>
    </ul>
</div>

<div class="container">   
    <!-- THIRD EXAMPLE -->
    <ul id="panelthree">
        <li class="mask"><h3>MENU ></h3></li>
        <li class="linkAnimationOne"><a href="#">Link 1</a></li>
        <li class="linkAnimationTwo"><a href="#">Link 2</a></li>
        <li class="linkAnimationThree"><a href="#">Link 3</a></li>
        <li class="linkAnimationFour"><a href="#">Link 4</a></li>
        <li class="linkAnimationFive"><a href="#">Link 5</a></li>
    </ul>
</div>
TẢI SOURCE CODE Chúc các bạn thành công :D

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Source code hệ thống điểm bán hàng (POS) sử dụng PHP

Các tính năng của Hệ thống điểm bán hàng này là: Sử dụng máy quét mã vạch trong giao dịch bán hàng. Thêm, Chỉnh sửa và Xóa Sản phẩm. Hàng của bạn sẽ được đánh dấu nếu sản phẩm dưới 10. Tìm kiếm sản phẩm. Thêm, Chỉnh sửa và Xóa Khách hàng. Thêm, chỉnh sửa và xóa các nhà cung cấp. Tạo báo cáo hàng ngày, hàng tháng và hàng năm. In giao dịch... HÌNH ẢNH LINK TẢI SOURCE CODE
1 nhận xét
Đọc thêm

Chia sẻ source code shop bán hàng bằng html đẹp mắt

Thấy hay nên chia sẻ cho mọi người tham khảo nhé. Code là html nên mọi người có thể xây dựng lại theo ngôn ngữ mà mình muốn. Code shop bán hàng bằng html tích hợp đầy đủ tính năng như: Giỏ hàng. Trang liên hệ. Trang chi tiết sản phẩm. Trang sản phẩm. Giao diện trên di động. Hoàn toàn thích hợp để phát triển 1 trang bán hàng theo yêu cầu. Hình tham khảo. LINK TẢI SOURCE CODE
Đăng nhận xét
Đọc thêm

Bootstrap 3: Components và Javascript

Bài này mình sẽ nói về các thành phần cơ bản trong Bootstrap 3 và vì chúng có sự liên quan chặt chẽ với Jquery nên mình sẽ giới thiệu kết hợp luôn. Trước khi bắt đầu, các bạn có thể xem nhiều hơn về các file trong Bootstrap ở đây:  https://github.com/twbs/bootstrap Glyphicons Bootstrap cung cấp cho người dùng hệ thống icon fonts khá đầy đủ (khoảng hơn 200 icon). Để sử dụng bạn dùng thẻ span  và add 2 lớp  .glyphicon , .glyphicon-$ . Trong đó $ là tên icon. Ví dụ: 1 < span class=”glyphicon glyphicon-search”></ span > Nhớ là luôn phải có lớp  .glyphicon  và luôn dùng thẻ span cho các icon (tức là không được đặt class  .glyphicon vào trong các thẻ khác). Tất nhiên là bạn cũng có thể sử dụng các icon font khác như Awesome nếu thích nó. Thực ra bắt nguồn của Awesome cũng là một phần mở rộng của Bootstrap. Button Groups Xem demo :  http://www.bootply.com/131926 Nếu bạn muốn nhóm các button trong Bootstrap thì làm...
Đăng nhận xét
Đọc thêm