Điện thoại: 0944210999
Menu là một phần không thể thiếu trong các website. Chúng tôi xin giới thiệu đến các bạn 1 bộ dropdown menu cực đẹp dựa trên nền Jquery & CSS. Hãy xem ví dụ sau để có thể thiết kế 1 menu đẹp cho website của bạn.
Bước 1: Phần HTML
Tạo đoạn mã sau bằng HTML
01.<ul class="topnav">
02.
03.<li><a href="#">Home</a></li>
04.
05.<li>
06.
07.<a href="#">Tutorials</a>
08.
09.<ul class="subnav">
10.
11.<li><a href="#">Sub Nav Link</a></li>
12.
13.<li><a href="#">Sub Nav Link</a></li>
14.
15.</ul>
16.
17.</li>
18.
19.<li>
20.
21.<a href="#">Resources</a>
22.
23.<ul class="subnav">
24.
25.<li><a href="#">Sub Nav Link</a></li>
26.
27.<li><a href="#">Sub Nav Link</a></li>
28.
29.</ul>
30.
31.</li>
32.
33.<li><a href="#">About Us</a></li>
34.
35.<li><a href="#">Advertise</a></li>
36.
37.<li><a href="#">Submit</a></li>
38.
39.<li><a href="#">Contact Us</a></li>
40.
41.</ul>
Bước 2: Phần CSS
Nhúng đoạn CSS sau vào giữa thẻ <head>
001.ul.topnav {
002.
003.list-style: none;
004.
005.padding: 0 20px;
006.
007.margin: 0;
008.
009.float: left;
010.
011.width: 920px;
012.
013.background: #222;
014.
015.font-size: 1.2em;
016.
017.background: url(topnav_bg.gif) repeat-x;
018.
019.}
020.
021.ul.topnav li {
022.
023.float: left;
024.
025.margin: 0;
026.
027.padding: 0 15px 0 0;
028.
029.position: relative; /*--Declare X and Y axis base for sub navigation--*/
030.
031.}
032.
033.ul.topnav li a{
034.
035.padding: 10px 5px;
036.
037.color: #fff;
038.
039.display: block;
040.
041.text-decoration: none;
042.
043.float: left;
044.
045.}
046.
047.ul.topnav li a:hover{
048.
049.background: url(topnav_hover.gif) no-repeat center top;
050.
051.}
052.
053.ul.topnav li span { /*--Drop down trigger styles--*/
054.
055.width: 17px;
056.
057.height: 35px;
058.
059.float: left;
060.
061.background: url(subnav_btn.gif) no-repeat center top;
062.
063.}
064.
065.ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
066.
067.ul.topnav li ul.subnav {
068.
069.list-style: none;
070.
071.position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
072.
073.left: 0; top: 35px;
074.
075.background: #333;
076.
077.margin: 0; padding: 0;
078.
079.display: none;
080.
081.float: left;
082.
083.width: 170px;
084.
085.border: 1px solid #111;
086.
087.}
088.
089.ul.topnav li ul.subnav li{
090.
091.margin: 0; padding: 0;
092.
093.border-top: 1px solid #252525; /*--Create bevel effect--*/
094.
095.border-bottom: 1px solid #444; /*--Create bevel effect--*/
096.
097.clear: both;
098.
099.width: 170px;
100.
101.}
102.
103.html ul.topnav li ul.subnav li a {
104.
105.float: left;
106.
107.width: 145px;
108.
109.background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
110.
111.padding-left: 20px;
112.
113.}
114.
115.html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
116.
117.background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
118.
119.}
Bước 3: Phần JQUERY
Nhúng đoạn javascript sau vào giữa thẻ <head>, trên đoạn CSS ta vừa nhúng.
01.<script type="text/javascript" src="/<a href="view-source:http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js<;/a>"></script>
02.<script type="text/javascript">
03.$(document).ready(function(){
04.
05.$("ul.subnav").parent().append("<span></span>");
06.//Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
07.
08.$("ul.topnav li span").click(function() {
09.//When trigger is clicked...
10.
11.//Following events are applied to the subnav itself (moving subnav up and down)
12.$(this).parent().find("ul.subnav").slideDown('fast').show();
13.//Drop down the subnav on click
14.
15.$(this).parent().hover(function() {
16.}, function(){
17.$(this).parent().find("ul.subnav").slideUp('slow');
18.//When the mouse hovers out of the subnav, move it back up
19.});
20.
21.//Following events are applied to the trigger (Hover events for the trigger)
22.}).hover(function() {
23.$(this).addClass("subhover");
24.//On hover over, add class "subhover"
25.}, function(){ //On Hover Out
26.$(this).removeClass("subhover");
27.//On hover out, remove class "subhover"
28.});
29.
30.});
31.</script>
Chú ý: Nếu trình duyệt web của bạn có bật javascript, menu sẽ chạy như sau
Nếu trình duyệt không bật javascript, sẽ có dạng như sau:
Bạn có thể tải đoạn mã chúng tôi đã làm sẵn để tham khảo tại địa chỉ:
0 nhận xét: