Quang.name.VN – Website cá nhân Giải trí, Chia sẻ & Học hỏi
Drop-Down Navigation Menu with HTML5 and CSS3
Hãy bắt đầu với cấu trúc HTML. Đó là phần đầu:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!doctype html><html lang="en><head> <meta charset="UTF-8"> <title>HTML5 / CSS3 Drop-Down Navigation Menu</title> <meta name="description" content=""> <link rel="stylesheet" href="style.css"> <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head> |
Trong phần nội dung, chúng tôi sẽ thêm mã html cho menu điều hướng. Mỗi danh sách ul bên trong một li là một trình đơn thả xuống. Tôi đã thêm “» ”vào từng li mẹ để hiển thị cấu trúc phân cấp. Mã tạo ra các dấu ngoặc kép đôi bên phải thành phần tử.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<body><nav id="nav"> <ul id="navigation"> <li><a href="#" class="first">Home</a></li> <li><a href="#">Services »</a> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">Identity & Branding »</a> <ul> <li><a href="#">Business Cards</a></li> <li><a href="#">Brochures</a></li> <li><a href="#">Envelopes</a></li> <li><a href="#">Flyers</a></li> </ul> </li> <li><a href="#">Wordpress</a></li> </ul> </li> <li><a href="#">Portfolio »</a> <ul> <li><a href="#">Graphic Design</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Architecture</a></li> <li><a href="#">Calligraphy</a></li> <li><a href="#">Film »</a> <ul> <li><a href="#">John Carter</a></li> <li><a href="#">The Avengers</a></li> <li><a href="#">The Amazing SpiderMan</a></li> <li><a href="#">Madagascar 3</a></li> </ul> </li> <li><a href="#">Graffity </a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a></li> <li><a href="#" class="last">Contact</a></li> </ul></nav></body></html> |
Bây giờ chúng ta hãy cách điệu điều hướng. Chúng ta sẽ bắt đầu với phong cách cho nav chính. Bạn có thể xóa các kiểu cho #nav id nếu muốn. Họ chỉ là để trung tâm menu. Bạn có thể thay đổi chúng để phù hợp với thiết kế của bạn.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
/* Main Navigation */#nav { position:relative; width:620px; margin:0 auto; margin-top:50px; padding:10px;}ul#navigation { margin:0px auto; position:relative; float:left; border-left:1px solid #c4dbe7; border-right:1px solid #c4dbe7;}ul#navigation li { display:inline; font-size:12px; font-weight:bold; margin:0; padding:0; float:left; position:relative; border-top:1px solid #c4dbe7; border-bottom:2px solid #c4dbe7;}ul#navigation li a { padding:10px 25px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border-right:1px solid #fff; border-left:1px solid #C2C2C2; border-top:1px solid #fff; background: #f5f5f5; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear;}ul#navigation li a:hover { background:#f8f8f8; color:#282828;}ul#navigation li a.first { border-left: 0 none;}ul#navigation li a.last { border-right: 0 none;}ul#navigation li:hover > a { background:#fff;} |
Lưu ý rằng ul # navigation li a có một số kiểu chuyển tiếp. Họ được sử dụng để tạo ra một hiệu ứng mờ dần đẹp trên di chuột.
Bây giờ chúng ta hãy cách điệu các menu thả xuống:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/* Drop-Down Navigation */ul#navigation li:hover > ul{/*these 2 styles are very important,being the ones which make the drop-down to appear on hover */ visibility:visible; opacity:1;}ul#navigation ul, ul#navigation ul li ul { list-style: none; margin: 0; padding: 0;/*the next 2 styles are very important,being the ones which make the drop-down to stay hidden */ visibility:hidden; opacity:0; position: absolute; z-index: 99999; width:180px; background:#f8f8f8; box-shadow:1px 1px 3px #ccc;/* css3 transitions for smooth hover effect */ -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear;}ul#navigation ul { top: 43px; left: 1px;}ul#navigation ul li ul { top: 0; left: 181px; /* strong related to width:180px; from above */}ul#navigation ul li { clear:both; width:100%; border:0 none; border-bottom:1px solid #c9c9c9;}ul#navigation ul li a { background:none; padding:7px 15px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px;} |
Bây giờ menu được cách điệu và quá trình phát triển nếu hoàn tất. Menu đã sẵn sàng để sử dụng trong các dự án của riêng bạn. Việc sử dụng CSS3, tất nhiên, có vấn đề tương thích với trình duyệt IE. Hiệu ứng mượt mà được thực hiện với quá trình chuyển đổi CSS3 không hoạt động trong IE, nhưng menu vẫn hoạt động và có thể là một thay thế đáng tin cậy cho các menu javascript.
Tôi cảm ơn bạn đã dành thời gian của bạn và cho bất kỳ phản hồi / câu hỏi nào, đừng ngần ngại để lại một bình luận dưới đây!
Demo Drop-Down Navigation Menu with HTML5 and CSS3
Download Drop-Down Navigation Menu with HTML5 and CSS3
Quang.name.VN
Website cá nhân Giải trí, Chia sẻ & Học hỏi
Bạn muốn gửi Bình luận