2012-02-14 18 views
6

यदि मेरे पास यह कोड वर्डप्रेस पर दिख रहा है, तो इसे एक कूद मेनू में बदलने का सबसे आसान तरीका क्या है?एक ड्रॉप डाउन मेनू में एक अनॉर्डर्ड सूची बनाएं

<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> 

मैं jQuery का उपयोग कर सकते है जैसे कि यह इस सूत्र में पता चला है: How to convert unordered list into nicely styled <select> dropdown using jquery?

और यदि हां, तो मैं कहाँ कोड उदाहरण से पता चला रखेंगे में पोस्ट कहा?

+0

एक कूद मेनू क्या है? – ShankarSangoli

+0

1) हां, 2) एक स्क्रिप्ट में – elclanrs

+0

@ शंकरसंगोली मुझे लगता है कि जिम का मतलब है कि उन पुराने स्कूलों में से एक का चयन करता है जिसने विंडो पर यूआरएल को बदल दिया है। – MetalFrog

उत्तर

3

कैसे कुछ jQuery :)

शुरुआत के लिए के बारे में, अगर आप jQuery के लिए नए हैं, तो आप गौर किया होगा कि आप इनलाइन jQuery अपने html वेब पेज के अंदर स्क्रिप्ट टैग का उपयोग बना सकते हैं कि, या आप कर सकते हैं एक अलग .js फ़ाइल बनाएं जो आपकी एचटीएमएल फ़ाइल (पसंदीदा) से जुड़ा हुआ है या तो सीडीएन (check it out here) या मैन्युअल रूप से स्क्रिप्ट डॉक फाइलें प्रदान कर रहा है। मैं Google के सीडीएन का उपयोग करना पसंद करता हूं क्योंकि उनके पास बहुत सारे सर्वर हैं जो क्लाइंट के करीब सबसे अधिक संभावना रखते हैं, और क्लाइंट को केवल सीडीएन के माध्यम से स्क्रिप्ट लोड करना पड़ता है।

अपने एचटीएमएल में, स्क्रिप्ट टैग प्रदान करें, और फिर जेएस और 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> 

इसके अलावा, अगर आप jQuery IntelliSense चाहते स्क्रिप्ट फ़ाइल में काम करने के लिए होता है, तुम सब करने की ज़रूरत स्क्रिप्ट फ़ाइल का उपयोग कर रहे में एक संदर्भ लिंक जोड़ने है!

/// <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);   
    } 
); 

});

उपरोक्त jQuery उदाहरण लाखों में से केवल 1 तरीका है जिसे आप अपना कोड प्रस्तुत करने के लिए कार्यान्वित कर सकते हैं। आप एक तेजी से और संक्षिप्त पुस्तकालय सीखने में रुचि है, तो भाग्य का learn jQuery in 30 days.

बेस्ट, बेन की जाँच

7

नहीं है इस उद्देश्य के साथ प्लगइन्स के सैकड़ों के बारे में ... एक सरल खोज का एक बहुत लाना चाहिए की तरह "ड्रॉपडाउन मेनू के लिए 50 jQuery प्लगइन्स" ..

कुछ परिणाम बताएंगे कि कैसे यह एक "Build a dropdown menu with CSS and jQuery"

अन्य परिणाम आप के लिए है कि आप बस की जरूरत है एक प्लगइन दे देंगे की तरह अपने खुद के मेनू के निर्माण के लिए होगा परिणाम इस यूएल i को बदलने के लिए एक jQuery फ़ंक्शन को कॉल करें एक मेनू, "jQuery plugin for dropdown menu"

दोनों ही मामलों में की तरह nto आप वास्तव में वे किस तरह दिखाने का उपयोग करने की जरूरत नहीं है, बस विचार लग रहा है और, अगर आप की जरूरत है, अपने मामले फिट करने के लिए संशोधित ...

संबंधित मुद्दे