Đây là một bài viết rất ngắn làm thế nào chúng ta có thể dễ dàng tạo một menu động với jQuery mà không cần bất kỳ plugin. Bạn phải có nhìn thấy menu điều hướng nằm ngang hoặc veritical đó mở rộng và ký hợp đồng với kích thước của nó trên rollover. Trước khi những khung javascript đến, chúng tôi đã phải làm khá nhiều mã để có được những điều thực hiện. Tại sao? Ngốc xử lý qua trình duyệt. Tôi không muốn bắt đầu lại trên trình duyệt IE.
Ok, đây là vấn đề. Chúng tôi chỉ đơn giản là sử dụng một danh sách không có thứ tự để tạo ra một menu ngang mà mở rộng và hợp đồng. Đang chết đơn giản. Hãy nhìn vào các đánh dấu đầu tiên.
<div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ li> <li> <a href = "http://www.yahoo.com"> Yahoo </ a> </ li> <li> <a href="http://www.msn.com"> MSN </ a> </ p> <li> <a href="http://www.lycos.com"> Lycos </ a> </ li> <li> <a href="http://www.baidu.com"> Baidu </ a> </ li> </ ul> </ div> |
Vì vậy, chúng tôi có một số mặt hàng có danh sách. Vì vậy, làm cho họ xuất hiện như menu ngang chúng ta cần một số css trông như thế này
: inline ; } #navcontainer ul li li {display: inline;} # navcontainer ul li |
Và phần cuối cùng .. Làm cho chúng nhảy trên mouseover. Khá đơn giản với chức năng animate. Chỉ vài những dòng dưới đây sẽ làm các trick. Có một cái nhìn.
( ) { $ ( "#navlist $ (Function () {$ ("# navlist |
Đó là nó! Xem nó trong hành động










































Bình luận gần đây