2012-02-14 32 views
6

Nếu tôi có mã này hiển thị trên Wordpress, cách dễ nhất để biến điều này thành menu nhảy là gì?tạo danh sách không có thứ tự thành một trình đơn thả xuống

<ul class='toc-odd level-1'> 
    <li><a href="1">It's finally here</a></li> 
    <li><a href="2">Improvements</a></li> 
    <li><a href="3">Handling</a></li> 
</ul> 

tôi có thể sử dụng jquery như nó đã cho thấy trong luồng này: How to convert unordered list into nicely styled <select> dropdown using jquery?

và nếu như vậy, nơi tôi sẽ đặt các ví dụ mã hiển thị trong nói bài?

+0

một menu nhảy là gì? – ShankarSangoli

+0

1) Có, 2) Trong tập lệnh – elclanrs

+0

@ShankarSangoli Tôi giả định rằng Jim có nghĩa là một trong những trường học cũ đã chọn thay đổi url của cửa sổ khi thay đổi. – MetalFrog

Trả lời

3

thế nào về một số jQuery :)

Đối với người mới bắt đầu, nếu bạn là người mới đến jQuery, bạn có thể đã nhận thấy rằng bạn có thể tạo inline jQuery sử dụng kịch bản thẻ bên trong trang web html của bạn, hoặc bạn có thể tạo tệp .js riêng biệt được liên kết với tệp html của bạn (được ưu tiên) bằng cách sử dụng CDN (check it out here) hoặc tự cung cấp tệp tài liệu tập lệnh. Tôi thích sử dụng CDN của google bởi vì họ có rất nhiều máy chủ có nhiều khả năng gần gũi hơn với khách hàng và khách hàng chỉ phải tải các tập lệnh một lần thông qua CDN.

Trong html của bạn, hãy cung cấp thẻ tập lệnh và sau đó bắt đầu làm việc với JS và jQuery!

<head> 
<title>your webpage</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script> 
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE! 
<script src="Scripts/Jscript1.js" type="text/javascript" ></script> 

Ngoài ra, nếu bạn muốn IntelliSense jQuery để làm việc trong các tập tin kịch bản, tất cả các bạn phải làm là thêm một liên kết tham khảo trong file kịch bản bạn đang sử dụng!

/// <reference path="jquery-1.7.1-vsdoc.js" /> 


$(document).ready(function() { 

$('.toc-odd level-1').hover(
    function() { 
     //show its submenu 
     $('ul', this).slideDown(100); 

    }, 
    function() { 
     //hide its submenu 
     $('ul', this).slideUp(100);   
    } 
); 

});

Ví dụ trên jQuery chỉ là 1 cách trong hàng triệu mà bạn có thể triển khai để hiển thị mã của mình. Nếu bạn có hứng thú học tập thư viện nhanh và súc tích, sau đó kiểm tra learn jQuery in 30 days.

Best of luck, Bến

7

Có khoảng hàng trăm plugin với mục đích này ... Một tìm kiếm đơn giản sẽ mang lại rất nhiều kết quả như "50 plugin jQuery cho menu thả xuống" ..

một số kết quả sẽ cho bạn thấy làm thế nào để xây dựng thực đơn riêng của bạn như thế này "Build a dropdown menu with CSS and jQuery"

kết quả khác sẽ cung cấp cho bạn một plugin mà bạn chỉ cần gọi hàm jQuery để chuyển đổi UL i này nĐể một menu, như "jQuery plugin for dropdown menu"

Trong cả hai trường hợp, bạn không cần phải sử dụng một cách chính xác làm thế nào họ cho thấy, chỉ cảm thấy ý tưởng này và, nếu bạn cần, sửa đổi để phù hợp với trường hợp của bạn ...

Các vấn đề liên quan