सरल जावास्क्रिप्ट ड्रॉप डाउन मेनू बॉक्स

मुझे पता है कि इस सवाल से कुछ बार पूछा गया है, लेकिन मैं एक और अधिक सरल दृष्टिकोण खोज रहा हूं। अधिकांश प्रश्न एक पूर्ण जावास्क्रिप्ट ड्रॉप डाउन मेनू के लिए हैं, लेकिन मैं बस एक छोटे से बॉक्स के बाद हूं। हर जगह देखा, और इसका जवाब नहीं दिया गया है।सरल जावास्क्रिप्ट ड्रॉप डाउन मेनू बॉक्स

मैं खरीदी गई पाठ्य पुस्तक से जावास्क्रिप्ट सीख रहा हूं, इसलिए अगर कोई मेरी मदद करता है, तो मैं इसे पसंद करूंगा, या अगर आप सीधे जवाब देना पसंद करते हैं, तो बस कुछ टिप्पणी करने की सराहना की जाएगी, इसलिए मुझे पता है कि क्या चल रहा है पर। मैं jQuery के बजाय सादा जावास्क्रिप्ट का उपयोग करना पसंद करूंगा क्योंकि मैं जावास्क्रिप्ट केवल टेक्स्ट बुक से सीख रहा हूं।

मैं एक मिनी सोशल नेटवर्क प्रकार का पेज बना रहा हूं। और ऊपरी दाएं भाग में, मेरे पास व्यक्तियों का उपयोगकर्ता नाम है, इसके आगे एक तीर है। मैं ड्रॉपडाउन बॉक्स बनाने की कोशिश कर रहा हूं, जब उस तीर पर क्लिक किया जाता है, और उस ड्रॉपडाउन बॉक्स के अंदर 'साइन आउट' बटन और 'सेटिंग' बटन होगा। मुझे ईमानदारी से पता नहीं है कि कहां से शुरू करना है क्योंकि यह कुछ अतिरिक्त है जिसे मैं कोशिश कर रहा हूं।

स्रोत

2013-03-06 Fizzix

बूटस्ट्रैप आपको एक अच्छा और सरल ड्रॉपडाउन मेनू देता है जब पहिया का फिर से आविष्कार क्यों करें। आप बूटस्ट्रैप से जो चाहते हैं उसे कस्टमाइज़ और चुन सकते हैं ताकि आपके पास बेकार सीएसएस और जावास्क्रिप्ट न हो। (http://twitter.github.com/bootstrap/components.html#dropdowns) –

ऐसा लगता है कि इस प्रश्न से पहले पूछा गया है: http://stackoverflow.com/questions/7362670/simple-javascript-dropdown-menu –

@ icanc - जैसा कि मैंने कहा, मैं जावास्क्रिप्ट सीख रहा हूं, इसलिए मुझे यह जानने की ज़रूरत है कि इस तरह की चीजें कैसे करें पुस्तकालयों के साथ सादा जावास्क्रिप्ट है। – Fizzix

नीचे नमूना कोड खोजें। हम इसे कई तरीकों से कर सकते हैं। जावास्क्रिप्ट शुरुआती के लिए यह एक आसान है।

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
function showDiv(){ 
    if(document.getElementById('showDiv').style.display == 'none'){ 
     document.getElementById('showDiv').style.display = 'block'; 
    }else{ 
     document.getElementById('showDiv').style.display = 'none'; 
    } 
} 
</script> 
</head> 
<body> 
<div style="width:auto;; margin:0 auto;"> 
    <div style="position:relative; width:130px; padding:10px; float:left; border:1px solid blue;"> 
     <div style="float:left;">Welcome Friend!</div> 
     <div style="float:left; margin-left:15px;" onclick="showDiv();">></div> 

    </div> 
    <div id="showDiv" style="display:none; float:right; width:150px; height:50px; position:absolute; margin-top:40px; border:1px solid red;"> 
     <div style="float:right;"><input type="submit" value="Settings" /></div> 
     <div style="clear:both;"></div> 
     <div style="float:right;"><input type="submit" value="Sign Out" /></div> 
    </div> 
</div> 
</body> 
</html>

स्रोत

2013-03-06 05:38:37

> एक लिंक बनाएं, फिर आपको हाथ मुफ्त में मिल जाए, या इसे पॉइंटर कर्सर दें। इसके अलावा सभी सीएसएस एक स्टाइलशीट और सिर में सभी जेएस हो सकते हैं, जिसमें ऑनक्लिक शामिल है - चलो जेड अच्छे प्रथाओं को पढ़ाने दें :) – mplungjan

@mplungjan - haha, पॉइंटर्स के लिए धन्यवाद :) – Fizzix

@ विजयाकुमार चंद्रशेक - वह कोड सही है और बिल्कुल सही करता है मुझे क्या चाहिए :) बहुत सरल और पढ़ने में आसान है। मैं इसे एक शॉट दूंगा और इसे बंद करना शुरू कर दूंगा। आपकी मदद के लिए धन्यवाद :) – Fizzix

सरल जावास्क्रिप्ट ड्रॉप डाउन मेनू बॉक्स

उत्तर

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