शुद्ध सीएसएस / एचटीएमएल ड्रॉप डाउन मेनू

1. शुद्ध सीएसएस / एचटीएमएल ड्रॉप डाउन मेनू इस ट्यूटोरियल में हम शुद्ध CSS पर एक क्लासिक क्षैतिज मेनू...
2. हम इंगित करते हुए क्षैतिज मेनू को चेतन करते हैं।
3. सीएसएस / HTML ड्रॉप डाउन मेनू का वर्णन करें

शुद्ध सीएसएस / एचटीएमएल ड्रॉप डाउन मेनू

इस ट्यूटोरियल में हम शुद्ध CSS पर एक क्लासिक क्षैतिज मेनू बनाएंगे। यह सूचियों में प्रतीक है। किसी आइटम की ओर संकेत करते समय, यह बटन और पाठ के रंग को सुचारू रूप से बदल देता है, एक छाया जोड़ा जाता है। ड्रॉप-डाउन सूचियों को बहु-स्तरीय बनाया जा सकता है और मुख्य बात यह है कि सभी को सरलतम CSS3 पर लागू किया जाता है।

इस पाठ की निरंतरता यहाँ - भाग २ मोबाइल संस्करण क्षैतिज मेनू "।

पेन देखें POyzbW डेनिस द्वारा ( @Dwstroy ) पर CodePen ।

पाठ उपयोग में:

• प्रदर्शन: फ्लेक्स;
• संक्रमण का उपयोग करें;
• तत्वों को स्थिति के साथ रखें।

HTML क्षैतिज मेनू संरचना

सबसे पहले, क्षैतिज मेनू के नीचे मार्कअप लिखें। हम अपने मामले में हमारे विकास के वातावरण को खोलते हैं, यह PhpStorm है, एक index.html फ़ाइल बनाएँ, फ्रेम html: 5 को लिखें, लैंग को आरयू से बदलें।

एन्कोडिंग को छोड़कर सभी मेटा को हटा दिया जाएगा, मैं अपना शीर्षक " टॉम मेनू " पंजीकृत करूंगा।

शरीर के बीच हम हेडर टैग लिखते हैं, और इसमें क्लास .dws-मेनू के साथ एक ब्लॉक होता है जिसमें हमारा मेनू होगा। अगला, संरचना निम्नानुसार होगी, हम पांच टुकड़ों की मात्रा में सूची बनाएंगे। प्रत्येक सूची में href = "#" विशेषता के साथ एक लिंक होगा। तब मैं वर्ग .fa के साथ आइकन पर जाऊंगा।

<हैडर> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ हैडर>

हम आवेदन करने के लिए दबाते हैं।

चलो मेनू आइटम ( होम, उत्पाद, सेवाएँ, समाचार, संपर्क ) का नाम लिखें।

इसके बाद, आइकन चुनें और कनेक्ट करें। साइट पर जाएं, हम इन मेनू आइटम के लिए आइकन का चयन करेंगे:

<i class = "fa fa- home "> </ i> <i class = "fa fa- खरीदारी- गाड़ी "> </ i> <i class = "fa fa- cogs "> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa- लिफाफा-खुला "> </ i>

आइकन के साथ साइट से संग्रह डाउनलोड करें, इसकी सामग्री को अपने कंप्यूटर पर निकालें, फोंट फ़ोल्डर और सीएसएस फ़ोल्डर को अपने विकास के वातावरण में कॉपी करें।

फोंट फ़ोल्डर में आइकन फोंट होते हैं, और सीएसएस फ़ोल्डर में उनकी शैलियाँ होती हैं। संपीड़ित शैलियों को फ़ॉन्ट-भयानक हटा दिया जा सकता है। इसके अलावा, हम असम्पीडित फ़ॉन्ट-भयानक कनेक्ट करते हैं।

Index.html में हम आइकन कनेक्ट करते हैं, और हम प्रत्येक आइटम को अपनी आइकन शैली ( घर , शॉपिंग-कार्ट , कॉग , वें-लिस्ट , लिफाफा-खुला ) के साथ पंजीकृत करते हैं।

हमने मुख्य फ्रेम बनाया है, मुख्य शैली के वर्णन के बाद एक सबमेनू बनाएं और अब हम एक फ़ाइल बनाएंगे जहाँ हम क्षैतिज मेनू style.css की मुख्य शैलियों का वर्णन करेंगे और इसे index.html से जोड़ेंगे। यह जाँचने के लिए कि शैलियाँ जुड़ी हुई हैं, एक img फ़ोल्डर बनाएँ, इसमें मैं पृष्ठभूमि पर एक मनमाना चित्र रखूँगा। आइए पृष्ठभूमि का उपयोग करके चित्र कनेक्शन लिखें।

body {पृष्ठभूमि-चित्र: url ("../ img / ep_naturalwhite.png"); }

जैसा कि हम देखते हैं, सब कुछ प्रदर्शित किया गया है और फिर हम शैलियों के विवरण के लिए आगे बढ़ेंगे।

सबसे पहले, आइए सभी संकेतक रीसेट करें, जिन्हें अलग-अलग ब्राउज़र डिफ़ॉल्ट रूप से सेट कर सकते हैं:

.dws- मेनू * {मार्जिन: 0; गद्दी: 0; }

हेडर को 200 चोटियों पर सेट करें। और असाइन करें जिसे आप डाउनलोड कर सकते हैं और अलग से साइट पर खुद से कनेक्ट कर सकते हैं, बस मामले में, अतिरिक्त फोंट लिखें।

हेडर {मार्जिन: 200 पीएक्स; फ़ॉन्ट-परिवार: क्यूप्रेम, एरियल, हेल्वेटिका, संस-सेरिफ़; }

सूचियों में मार्कर छिपाएँ:

.dws-menu ul, .dws-menu ol {सूची-शैली: कोई नहीं; }

सूचियों को क्षैतिज रूप से प्रदर्शन के साथ प्रदर्शित किया जाएगा: सन, और हम इसे केंद्र में करेंगे:

.dws-menu> ul {प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; }

हेडर में हम केवल शीर्ष पर इंडेंट करेंगे, हम एक मार्जिन-टॉप लिखेंगे।

हेडर { मार्जिन-टॉप: 200 पीएक्स; फ़ॉन्ट-परिवार: क्यूप्रेम, एरियल, हेल्वेटिका, संस-सेरिफ़; }

आइए हमारे मेनू को डिज़ाइन करें, बटन का रंग, फ़ॉन्ट आदि सेट करें।

लिंक nav> ul li चुनें, और उन्हें ब्लॉक एलिमेंट बनाते हैं। मेनू पृष्ठभूमि सेट करें, इंडेंट लिखें, आकार, रंग निर्दिष्ट करें, अंडरस्कोर निकालें, और कैपिटल अक्षरों में हेडिंग बनाएं।

.dws-menu> ul li a {display: ब्लॉक; पृष्ठभूमि: #ececed; गद्दी: 15px 30px 15px 40px; फ़ॉन्ट-आकार: 14 पीएक्स; रंग: # 454547; पाठ-सजावट: कोई नहीं; पाठ-परिवर्तन: अपरकेस; }

फिर आइकन को स्थिति दें, सूचियों को स्थिति के लिए असाइन करें: रिश्तेदार; आइकन के आगे संरेखण के लिए:

.dws- मेनू> उल ली {स्थिति: रिश्तेदार; }

अगला, हम आइकन चुनते हैं, उन्हें पूरी तरह से स्थिति देते हैं, ऊपर से 15 चोटियों पर इंडेंटेशन करते हैं, बाएं 12 चोटियों से, 18 चोटियों का आकार बढ़ाते हैं।

.dws-menu> ul li> a i.fa {स्थिति: निरपेक्ष; शीर्ष: 15 पीएक्स; बाएं: 12 पीएक्स; फ़ॉन्ट-आकार: 18 पीएक्स; }

सूचियों के लिए बॉर्डर के रूप में विभाजक को असाइन करें, पहले LI तत्व का चयन करें, बॉर्डर सेट करें। हम अंतिम तत्व LI का चयन करते हैं और इसे एक समान सीमा प्रदान करते हैं।

.dws-menu> ul li: पहला-बच्चा {बॉर्डर-लेफ्ट: 1px ठोस # b2b3b5; } .dws-menu> ul li: last-child {बॉर्डर-राइट: 1px सॉलिड #bbbd; }

LI सूचियों के लिए सीमांकक बनाना:

.dws- मेनू> उल ली {स्थिति: रिश्तेदार; बॉर्डर-राइट: 1px सॉलिड # c7c8ca; }

मेनू ने उपस्थिति प्राप्त कर ली है, फिर आप हॉवर के दौरान शैलियों के विवरण के लिए आगे बढ़ सकते हैं।

हम इंगित करते हुए क्षैतिज मेनू को चेतन करते हैं।

लिंक का चयन करें और ब्लॉक को एक रंग असाइन करें, और आइकन के साथ लिंक के रंग को स्वयं सफेद करने के लिए असाइन करें। चलो एक और अंधेरा छाया जोड़ें। 0.3 सेकंड में संक्रमण की मदद से हम एक चिकनी उपस्थिति बनाएंगे:

.dws-menu li a: hover {पृष्ठभूमि: # 454547; रंग: #ffffff; बॉक्स-छाया: 1 पीएक्स 5 पीएक्स 10 पीएक्स -5 पीएक्स ब्लैक; संक्रमण: सभी 0.3s आसानी; }

और इस प्रभाव को आसानी से गायब करने के लिए, इस शैली को आराम से लिंक में जोड़ें:

.dws-menu> ul li a {display: ब्लॉक; पृष्ठभूमि: #ececed; गद्दी: 15px 30px 15px 40px; फ़ॉन्ट-आकार: 14 पीएक्स; रंग: # 454547; पाठ-सजावट: कोई नहीं; पाठ-परिवर्तन: अपरकेस; संक्रमण: सभी 0.3s आसानी; }

मुख्य मेनू समाप्त हो गया है और आप सबमेनू और उनमें एम्बेडेड सबमेनस के विवरण के लिए आगे बढ़ सकते हैं।

सीएसएस / HTML ड्रॉप डाउन मेनू का वर्णन करें

हम के बारे में index.html खोलते हैं और उदाहरण के लिए, उत्पादों के लिए एक अतिरिक्त मेनू। LI सूचियों के बीच UL डालें और इसमें पाँच सूचियाँ रखें, जिसमें हर्फ़ = "#" विशेषता के साथ लिंक होंगे।

उल> ली * 5> [एक href = "#"]

हम लागू करने के लिए दबाते हैं, वस्तुओं का नाम ( वस्त्र, इलेक्ट्रॉनिक्स, खाद्य, उपकरण, जीवन। रसायन विज्ञान ) लिखें।

<ul> <li> <a href="#"> वस्त्र </a> </ li> <li> <a href="#"> इलेक्ट्रॉनिक्स </a> </ li> <li> <a href = "#"> खाद्य </a> </ li> <li> <a href="#"> उपकरण </a> </ li> <li> <a href="#"> जीवन। रसायन विज्ञान </a> </ li> </ ul>

फिर style.cs को खोलें और सबमेनू शैलियों का वर्णन करें।

हम दूसरी सूची का चयन करते हैं और इसे स्थिति प्रदान करते हैं: निरपेक्ष; , हम 150 चोटियों के लिए न्यूनतम चौड़ाई निर्धारित करते हैं।

/ * उप मेनू * / .dws- मेनू ली उल {स्थिति: निरपेक्ष; न्यूनतम-चौड़ाई: 150px; }

1 शिखर पर सीमा सूचियों को लिखते हैं।

.dws-menu li> ul li {बॉर्डर: 1px ठोस # c7c8ca; }

सबमेनू में लिंक के लिए, हम 10 चोटियों पर इंडेंट सेट करेंगे। टेक्स्ट ट्रांसफॉर्मेशन को हटा दें और बैकग्राउंड को टोन ऑफ़ द डार्क बैकग्राउंड बनाएं: # e4e4e5; ।

.dws-menu li> ul li a {padding: 10px; पाठ-परिवर्तन: कोई नहीं; पृष्ठभूमि: # e4e4e5; }

फिर एक और सबमेनू बनाएं। मार्कअप फ़ाइल पर जाएं और उदाहरण के लिए "इलेक्‍ट्रॉनिक्‍स" फॉर्म में सादृश्य मेनू द्वारा जैसा कि हमने पहले किया था। हम वस्तुओं ( कैमरे, कंप्यूटर, टेलीफोन ) और शीर्षकों का वर्णन करते हैं और सहेजते हैं।

<li> <a href="#"> इलेक्ट्रॉनिक्स </a> <ul> <li> <a href="#"> कैमरे </a> </ li> <li> <a href="#"> कंप्यूटर </a> </ li> <li> <a href="#"> फ़ोन </a> </ li> </ ul> </ li>

उन्हें बाहर लाया गया था, लेकिन मुख्य मेनू के नीचे छिपा हुआ था, अब स्थिति: निरपेक्ष; उल नेस्ट और इसे 150 के शिखर पर ले जाने के लिए। पक्ष की ओर:

.dws-menu li> ul li ul {स्थिति: निरपेक्ष; दाईं ओर: -150 पीएक्स; शीर्ष: 0; }

अगला, हम उपमेनू को शीर्ष मेनू की मुख्य वस्तुओं को लक्षित करते समय प्रदर्शित करेंगे, इसके लिए हम प्रदर्शन जोड़ते हैं: कोई नहीं; और इस तरह सभी आंतरिक बिंदुओं को छिपाते हैं।

/ * उप मेनू * / .dws- मेनू ली उल {स्थिति: निरपेक्ष; न्यूनतम-चौड़ाई: 150px; प्रदर्शन: कोई नहीं; }

और उनकी उपस्थिति के लिए, हम हॉवर पर सूचियों का चयन करेंगे और उन्हें प्रदर्शन की सहायता से प्रदर्शित करेंगे: ब्लॉक; ।

.dws-menu li: hover> ul {प्रदर्शन: ब्लॉक; }

अब आप उल ब्लॉक को कॉपी करके, उसके आइटम को बदलकर बहु-स्तरीय मेनू जोड़ सकते हैं।

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> होम </a> </ li> <li> <a href="#"> < i class = "fa fa-Shopping-cart"> </ i> उत्पाद </a> <ul> <li> <a href="#"> वस्त्र </a> <ul> <li> <a href = "#"> जूते </a> </ li> <li> <a href="#"> जैकेट </a> </ li> <li> <a href="#"> पतलून </a> < / li> </ ul> </ li> <li> <a href="#"> इलेक्ट्रॉनिक्स </a> <ul> <li> <a href="#"> कैमरे </a> </ li> <li> <a href="#"> कंप्यूटर </a> </ li> <li> <a href="#"> फ़ोन </a> <ul> <li> <a href="#"> सैमसंग </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> भोजन </a> </ li> <li> <a href="#"> उपकरण </ h a> </ li> <li> <a href="#"> Gen. रसायन शास्त्र </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> सेवाएं </a> <ul > <li> <a href="#"> सेवा 1 </a> </ li> <li> <a href="#"> सेवा 2 </a> </ li> <li> <a href = "#"> सेवा 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> समाचार </a> </ li> <li> <a href="#"> <i class = "fa fa-लिफाफा-खुला"> </ i> संपर्क </a> </ li> </ ul>

फिर बटन के साथ बटन खत्म करते हैं। मैं उपयोग करता हूं, मैंने कई प्रीसेट बनाए हैं, आप अपना खुद का बना सकते हैं, मेरे मामले में, मैं सिर्फ इस कोड को कॉपी करता हूं और इसे पृष्ठभूमि स्थान पर रखता हूं जो मैंने पहले लिखा था।

.dws-menu> ul li a {display: ब्लॉक; / * पर्मलिंक - यह प्रवणता: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; कस्टम +3 * / पृष्ठभूमि: # c9c9c9c; ; / * पुराने ब्राउज़र * / पृष्ठभूमि: -Moz-linear-gradient (शीर्ष, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / पृष्ठभूमि: -webkit-linear-gradient (शीर्ष, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 75755 100%); / * Chrome10-25, Safari5.1-6 * / पृष्ठभूमि: रैखिक-ढाल (नीचे से, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 75755 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# #9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / गद्दी: 15px 30px 15px 40px; फ़ॉन्ट-आकार: 14 पीएक्स; रंग: # 454547; पाठ-सजावट: कोई नहीं; पाठ-परिवर्तन: अपरकेस; संक्रमण: सभी 0.3s आसानी; } .dws-menu li a: hover {/ * Permalink - यह ग्रेडिएंट: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98.e0e1e5+100 * * पृष्ठभूमि: # e0e1e5; / * पुराने ब्राउज़र * / पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / पृष्ठभूमि: रैखिक-ढाल (नीचे से, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# eee1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / रंग: #ffffff; बॉक्स-छाया: 1 पीएक्स 5 पीएक्स 10 पीएक्स -5 पीएक्स ब्लैक; संक्रमण: सभी 0.3s आसानी; }

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

एक टिप्पणी छोड़ दो: