Tạo menu đen tuyền cực kỳ đẹp mắt bằng CSS3

Xem: 2658    Tải: 6   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: none

1 điểm   ( 7 đánh giá ) File đã được kiểm thử
3 MEGA [megacode]tao-menu-den-tuyen-cuc-ky-dep-mat.rar (4.16 KB)
Phí tải ~ 6,000 đ
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]tao-menu-den-tuyen-cuc-ky-dep-mat.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

Ắt hẳn trong các bạn đã từng thấy những menu có hiệu ứng LavaLamp (có sự hỗ trợ của jQuery) với những hiệu ứng cực kỳ đẹp mắt (xem demo), hôm nay chúng ta sẽ tạo ra menu như thế cho website hay blog của mình mà đặc biệt là không dùng bất kỳ một đoạn javacript nào, chỉ bằng CSS3. Chúng ta sẽ sử dụng CSS3 transitions vào menu sẽ tạo , bạn đã sẵn sàng chưa, chúng ta cùng bắt đầu nào.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Tạo menu đen tuyền cực kỳ đẹp mắt bằng CSS3

Ắt hẳn trong các bạn đã từng thấy những menu có hiệu ứng LavaLamp (có sự hỗ trợ của jQuery) với những hiệu ứng cực kỳ đẹp mắt (xem demo), hôm nay chúng ta sẽ tạo ra menu như thế cho website hay blog của mình mà đặc biệt là không dùng bất kỳ một đoạn javacript nào, chỉ bằng CSS3. Chúng ta sẽ sử dụng CSS3 transitions vào menu sẽ tạo , bạn đã sẵn sàng chưa, chúng ta cùng bắt đầu nào.

Đầu tiên là tạo menu với các phần tử HTML và download hình sau :

menu_bg.png

menu_line.png

lavalamp.png

<ul id="nav">
<li><a href="http://megacode.vn/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://megacode.vn/">Back</a></li>
<div id="lavalamp"></div>
</ul>

Và đây là CSS styles cho menu

#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
}

 

Tạo menu đen tuyền cực kỳ đẹp mắt bằng CSS3

Tạo menu đen tuyền cực kỳ đẹp mắt bằng CSS3 Đăng ngày 22-07-2013  Ắt hẳn trong các bạn đã từng thấy những menu có hiệu ứng LavaLamp (có sự hỗ trợ của jQuery) với những hiệu ứng cực kỳ đẹp mắt (xem demo), hôm nay chúng ta sẽ tạo ra menu như thế cho website hay blog của mình mà đặc biệt là không dùng bất kỳ một đoạn javacript nào, chỉ bằng CSS3. Chúng ta sẽ sử dụng CSS3 transitions vào menu sẽ tạo , bạn đã sẵn sàng chưa, chúng ta cùng bắt đầu nào. 0.14285714285714/10 2658

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

 
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
File gợi ý cho bạn
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;