मैं amazon.com के समान मेनू लेआउट वाला एक वेब पेज बनाना चाहता हूं जहां मैं नेस्टेड मेनू रख सकता था और प्रत्येक मेनू आइटम के नीचे छोटे विवरण टेक्स्ट को शामिल कर सकता था।क्या कोई jquery प्लगइन है जो amazon.com मेनू लेआउट की नकल करता है
इससे पहले कि मैं शुरू से इस बनाने के लिए शुरू करते हैं, मैं देखने के लिए अगर वहाँ एक jQuery प्लगइन है कि नकल करता है इस लेआउट और कार्यक्षमता 
यहाँ एक सटीक हमशक्लhttp://jsfiddle.net/blackpla9ue/KHLgm/8/
एक त्वरित सीएसएस एकमात्र समाधान मैं कामयाब कुछ ही मिनटों में किया जाना है। ड्रॉपडाउन के लिए दूसरे मेनू आइटम पर होवर करें।
यह बहुत आसान और सीधा है और यदि आपको इसमें कोई भी संशोधन की आवश्यकता है तो बस मुझे बताएं।
अच्छा, यह अमेज़ॅन पर एक जैसा दिखता है, लेकिन यह एक प्लगइन नहीं है। –
आपको यह पसंद है खुशी है। यह एक प्लगइन नहीं है लेकिन आपको बस इतना करना है कि सीएसएस भाग शामिल है और सीएसएस वर्ग को अपने 'उल' में कॉल करें – blackpla9ue
देखें के बारे में आप क्या चाहते हैं चाहता था, मैं लगता है कि आप पहले एक ड्रॉप डाउन मेनू बना सकते हैं और बाद में विवरण जोड़ सकते हैं, बस इस उदाहरण पर थोड़ा नज़र डालें, यह बहुत बुनियादी है: http://webdesignerwall.com/tutorials/css3-dropdown-menu या यहां: http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html
मैं अमेज़न पर तत्व का निरीक्षण किया है और मैं ने पाया है कि वे एक ही तरह से करते हैं, वे सिर्फ एक वर्ग एक शैली के साथ इसके लिए जोड़ें:
<div class="navSaTagLine tiny">Vibrant color, movies, apps, and more</div>
बस पहले एक ड्रॉप डाउन मेनू बनाने के लिए और विवरण जोड़ तुम्हें चाहिए!
वहाँ maaaaany jQuery प्लगइन्स पहले से ही ऐसा कर रहे हैं, लेकिन यहां एक छोटे से प्लगइन मैं 10 मिनट में लिपटे है या नहीं:
(function($,window,undefined){
var o;
$.fn.amazonLikeMenu = function(data,options){
o = $.extend({},options,$.fn.amazonLikeMenu.defaultOptions);
return this.each(function(){
createMenu($(this).addClass(o.classPrefix + '_container'),data);
});
};
$.fn.amazonLikeMenu.defaultOptions = {
classPrefix : "menu",
eventPrefix : "menu"
};
function createMenu(container,data,options){
container.data('initial_data',data);
var ul = $('<ul />').addClass(o.classPrefix + '_ul').appendTo(container),
liTemplate = $('<li />').addClass(o.classPrefix + '_li'),
descTemplate = $('<span />').addClass(o.classPrefix + '_desc'),
linkTemplate = $('<a href="#"/>').addClass(o.classPrefix + '_link'),
hTemplate = $('<h3 />').addClass(o.classPrefix + '_link');
$.each(data,function(i,el){
var li = liTemplate.clone().appendTo(ul);
if(el.title && el.link)
if(typeof el.link === 'string')
linkTemplate
.clone()
.text(el.title)
.attr('href',el.link)
.appendTo(li);
else
{
createMenu(li.addClass(o.classPrefix + '_has_submenu').append(hTemplate.clone().text(el.title)),el.link,o);
}
if(el.desc)
descTemplate
.clone()
.text(el.desc)
.appendTo(li);
});
};
})(jQuery,window)
आपका मेनू आइटम वस्तुओं का संग्रह से मिलकर बनता है (उपयोगी अगर आप मेनू उत्पन्न गतिशील रूप से एक सेवा से डेटा के साथ):
[
{
title : 'link 1',
link : '#page1'
},
{
title : 'link 2',
link : '#page2',
desc : 'this is an awesome link'
},
{
title : 'link 3',
link : [
{
title : "submenu link1",
desc : "sample description",
link : "#submenu_link_1"
},
{
title : "submenu link2",
link : "#submenu_link_2"
},
{
title : "submenu link3",
desc : "sample description",
link : "#submenu_link_3"
}
],
desc : 'I have a submenu'
},
{
title : 'link 3',
link : '#page3',
desc : 'I dont have a submenu :(('
}
];
यहाँ एक डेमो है: http://jsfiddle.net/gion_13/6QXZt/।
यह अनुकूलन योग्य है, इसलिए इसे अमेज़ॅन पर बिल्कुल ठीक दिखने के लिए समायोजित किया जा सकता है।
पीएस : इस बात को ध्यान में रखना चाहिए कि इस मामले में सीएसएस भूमिका jquery/जावास्क्रिप्ट से अधिक है।
यहां एक स्लिम एक - http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/ है।
या कुछ सरल - http://qrayg.com/experiment/cssmenus के लिए।
मुझे नहीं लगता कि 'फ्लाईआउट' के साथ कई बुनियादी (जैसे अमेज़ॅन) वर्टिकल मेनू प्लगइन्स हैं, क्योंकि वे अकेले एचटीएमएल/सीएसएस के साथ बनाने के लिए काफी आसान हैं। अमेज़ॅन मेनू शायद किसी भी जावास्क्रिप्ट के बिना किया जा सकता है।
एक बार जब आप एक अच्छा सीएसएस मेनू (पहुँच के लिए बोनस अंक) का निर्माण किया है, आप आसानी से एक सीएसएस मंडराना कार्रवाई में परिवर्तित कर सकते
उदा li:hover > ul {display:block}
$('li').hover(function(){ $(this).children('ul').show(200); }) में
।
इन जोकरों को न सुनें। आप का परीक्षण करना चाहते हैं कई साइटों पर डीबग और क्रॉस-ब्राउज़र है। इनमें से कितने "मुझे देखो" मेनू हैंडल फ़्लैश या मेनू के पीछे तत्व चुनें? कितने चिकनी एनीमेशन और ओपन-ऑन -होवर ऑन-हाउसओवर नहीं है? आप कितनी आसानी से क्षैतिज पर के बिना क्षैतिज कक्षा नाम और एक नई एपीआई सीखने के बिना स्विच कर सकते हैं?
वैसे भी, इस सवाल का जवाब superfish है:
http://users.tpg.com.au/j_birch/plugins/superfish/#examples (ऊर्ध्वाधर शैली)
इन पर एक नजर डालें:
http://deluxe-menu.com/data-templates/amazon-template-sample.html http://www.sothink.com/product/dhtmlmenu/samples/newamazonmenu/newamazonmenu.htm
सुनिश्चित नहीं हैं कि क्या आप के लिए हो ।
बेन कामेन ने एक अच्छा काम किया जो मूल की तरह काम करता है। गीथब पर कोड देखें। उन्होंने इस विषय के बारे में interesting post in his blog लिखा था।
आप किस ब्राउज़र का समर्थन करना चाहते हैं? यह आसानी से अकेले सीएसएस का उपयोग कर किया जा सकता है। –