क्षैतिज मेनू html उदाहरण. साधा क्रॉस-ब्राउझर क्षैतिज मेनू

एक क्षैतिज मेनू बनवा, ज्याच्या आयटममध्ये अनियंत्रित उतार आहे (चित्र 1).

तांदूळ. 1. तिरकस आयटमसह मेनू दृश्य

स्टाईल प्रॉपर्टी ट्रान्सफॉर्म घटकाचे रूपांतर करण्यासाठी जबाबदार आहे; skewX फंक्शन त्याचे मूल्य म्हणून वापरले जाते, जे इच्छित उतार सेट करते. झुकाव कोन अंशांमध्ये सेट करणे सोपे आहे, उदाहरणार्थ, 30deg उभ्यापासून 30º आहे. परिवर्तन सर्व बाल घटकांवर देखील परिणाम करते, त्यामुळे घटकातील मजकूर देखील झुकलेला असेल, ज्याचा त्याच्या वाचनीयतेवर आणि सौंदर्यावर सर्वोत्तम प्रभाव पडत नाही. म्हणून, मजकूरावर पुन्हा टिल्ट लागू करणे महत्वाचे आहे, परंतु हे करण्यासाठी, फक्त अंश मूल्यासमोरील चिन्ह बदला;

ब्राउझर्स ट्रान्सफॉर्म प्रॉपर्टीला मुख्यतः त्यांच्या स्वतःच्या उपसर्गांसह समर्थन देतात, त्यामुळे शैलींमध्ये सार्वत्रिकतेसाठी तुम्ही एकाच मूल्यासह अनेक वेळा पुनरावृत्ती करावी, फायरफॉक्ससाठी -moz-, सफारी आणि क्रोमसाठी -वेबकिट, ऑपेरा आणि -ms साठी -o- जोडून - उदाहरण १ मध्ये दाखवल्याप्रमाणे इंटरनेट एक्सप्लोरर ब्राउझरसाठी.

उदाहरण 1: मेनू आयटम टिल्ट

HTML5 CSS3 IE Cr Op Sa Fx

मेनू li ( प्रदर्शन: इनलाइन-ब्लॉक; /* इनलाइन ब्लॉक घटक */ पार्श्वभूमी: #CA181A; /* पार्श्वभूमी रंग */ समास-उजवे: 3px; /* मेनू आयटममधील अंतर */ -वेबकिट-ट्रान्सफॉर्म: skewX(- 30deg ( (-30deg); /* IE */ transform: skewX(-30deg); /* CSS3 */ ) a ( रंग: #fff; /* लिंक रंग */ प्रदर्शन: ब्लॉक; /* ब्लॉक घटक */ पॅडिंग : 5px 15px; /* मजकूराच्या आसपास मार्जिन */ मजकूर-सजावट: /* अंडरलाइनिंग काढा */ -webkit-transform: /* Safari आणि Chrome साठी */ -moz-transform: skewX(30deg); /* फायरफॉक्ससाठी */ -ओ-ट्रान्सफॉर्म: skewX(30deg); /* skewX(30deg); /* IE */ transform: skewX(30deg); (पार्श्वभूमी: #333; /* फिरत असताना पार्श्वभूमीचा रंग */ )

• जोकर
• पाझुळू
• पॅल्पेटाइन
• डॉक्टर डूम

या उदाहरणात, बुलेट केलेली सूची वापरून क्षैतिज मेनू तयार केला आहे. सूची क्षैतिज आहे याची खात्री करण्यासाठी, इनलाइन-ब्लॉक मूल्यासह एक प्रदर्शन गुणधर्म शैलीतील li घटकामध्ये जोडला जातो. स्क्यूसाठी, skewX फंक्शन आणि मूल्य -30º सह ट्रान्सफॉर्म गुणधर्म वापरा. ही गुणधर्म सूचीमधील लिंकवर देखील लागू केली जाते, परंतु 30º च्या सकारात्मक मूल्यासह, हे सुनिश्चित करते की अक्षरे तिरकस करण्याऐवजी योग्यरित्या प्रदर्शित केली जातात.

क्रोम, सफारी आणि फायरफॉक्स ब्राउझर ब्लॉक किंवा इनलाइन घटकांवर ट्रान्सफॉर्म प्रॉपर्टी वापरतात, त्यामुळे लिंक्सची डिस्प्ले प्रॉपर्टी ब्लॉक करण्यासाठी सेट केली जाते.

इंटरनेटवरील बहुतेक क्लासिक वेबसाइट्स मुख्य नेव्हिगेशन घटक म्हणून क्षैतिज मेनू वापरतात. कधीकधी यात विविध अतिरिक्त वैशिष्ट्ये असू शकतात - बहु-स्तरीय संरचना, उप-आयटमसाठी चिन्ह, शोध ब्लॉक, जटिल सूची इ. अलीकडे ब्लॉगवर एक छोटीशी निवड झाली आणि आज आपण CSS + HTML वापरून ड्रॉप-डाउन मेनू कसा बनवायचा याची 4 व्यावहारिक उदाहरणे पाहू. नवशिक्या विकासकांसाठी आणि त्यांच्या वेबसाइटवर नेव्हिगेशन बदलू इच्छिणाऱ्यांसाठी ही माहिती उपयुक्त ठरेल.

प्रथम CSS3 ड्रॉपडाउन मेनू ट्यूटोरियल संग्रहातील सर्वात नवीन आहे (एप्रिल 2016 पासून). सोल्यूशनचे फायदे: साइटसाठी या क्षैतिज ड्रॉप-डाउन मेनूमध्ये, उप-आयटममध्ये चिन्हे आहेत, अंमलबजावणी आणि CSS कोड स्वतःच समजून घेणे आणि अंमलात आणणे सोपे आहे.

पायरी 1 - HTML मार्कअप

पहिली पायरी म्हणजे HTML मध्ये त्याच्या घटकांसाठी अँकर लिंक्स (#) सह क्रमरहित सूची तयार करणे. तेथे, एका आयटममध्ये, आम्ही दुसरी नेस्टेड सूची जोडतो, जी सबमेनूसाठी जबाबदार असेल.

• माझा डॅशबोर्ड
• आवडी
• दृश्ये
  • कागदपत्रे
  • संदेश
  • साइन आउट करा
• अपलोड
• व्हिडिओ
• कागदपत्रे

पायरी 2 - मेनू प्रदर्शित करा

साइटच्या क्षैतिज ड्रॉप-डाउन मेनूमधील घटकांसाठी आम्ही CSS मधील अनावश्यक इंडेंट काढून टाकतो. त्याच टप्प्यावर, आम्ही मेनू आयटमची एक निश्चित रुंदी आणि उंची सेट करू आणि गोलाकार कोपरे देखील जोडू.

मेनू, .menu ul, .menu li, .menu a ( समास: 0; पॅडिंग: 0; सीमा: काहीही नाही; बाह्यरेखा: काहीही नाही; ) .मेनू ( उंची: 40px; रुंदी: 505px; पार्श्वभूमी: #4c4e5a; पार्श्वभूमी: - वेबकिट-लिनियर-ग्रेडियंट(शीर्ष, #4c4e5a 0%,#2c2d33 100%); 100% पार्श्वभूमी: -ms-लिनियर-ग्रेडियंट(शीर्ष, #4c4e5a 0%,#2c2d33 100%); त्रिज्या: 5px; -moz-बॉर्डर-त्रिज्या: 5px

पायरी 3 - दुवा साधणे

शैलीतील मूलभूत वैशिष्ट्यांव्यतिरिक्त (फॉन्ट, रंग, उंची), आम्ही फिरत असताना मजकूर रंगाचे एक गुळगुळीत संक्रमण वापरतो आणि तयार करतो. आम्ही मेनूमध्ये विभाजक देखील जोडतो, डावीकडील पहिल्या घटकापासून आणि उजवीकडील शेवटच्या घटकापासून सीमा काढून टाकतो.

मेनू li a ( प्रदर्शन: ब्लॉक; पॅडिंग: 0 14px; समास: 6px 0; रेखा-उंची: 28px; मजकूर-सजावट: काहीही नाही; सीमा-डावीकडे: 1px ठोस #393942; सीमा-उजवीकडे: 1px ठोस #4f5058; फॉन्ट- फॅमिली: हेल्वेटिका, sans-weight: font-size: 1px 1px rgba(0,0,0,.6 : रंग .2s ease-in-out); संक्रमण: रंग .2s ease-in-out; रंग .2s ease-in-out ) .menu li:first-child; डावीकडे: काहीही नाही; ) .मेनू li:लास्ट-चाइल्ड a (बॉर्डर-उजवीकडे: काहीही नाही; ) .मेनू li: फिरवा > a ( रंग: #8fde62; )

चरण 4 - सबमेनू

आमच्याकडे CSS वापरून ड्रॉप-डाउन साइट मेनू असल्याने, आम्ही नेस्टेड सूचीसाठी डिझाइन देखील सेट केले पाहिजे. प्रथम, वर 40px आणि डावीकडे 0px चे मार्जिन सेट करा + गोलाकार कोपरे जोडा. सबमेनू दर्शविण्यासाठी/लपविण्यासाठी, सुरुवातीला अपारदर्शक गुणधर्म शून्यावर सेट करा, आणि जेव्हा ते एकावर फिरवा. दिसणाऱ्या सबमेनूचा प्रभाव तयार करण्यासाठी, सूचीच्या उंचीचे मूल्य शून्यावर सेट करा आणि होव्हर = 36px सह.

मेनू ul ( स्थिती: परिपूर्ण; शीर्ष: 40px; डावीकडे: 0; अपारदर्शकता: 0; पार्श्वभूमी: #1f2024; -वेबकिट-बॉर्डर-त्रिज्या: 0 0 5px 5px; -moz-बॉर्डर-त्रिज्या: 0 0 5px 5px; सीमा- त्रिज्या: 0 0 5px; -वेबकिट-संक्रमण: अपारदर्शकता .25s सहजता: 25s सहजता; अस्पष्टता .25s सहजता .1s; ) .मेनू li:hover > ul ( अपारदर्शकता: 1; ) .मेनू ul li (उंची: 0; ओव्हरफ्लो: लपलेले; पॅडिंग: 0; -वेबकिट-ट्रान्झिशन: उंची .25s सहजता .1s; -moz-संक्रमण: उंची .25s सहज .1s; -ms-संक्रमण: उंची .25s सहज; ) .मेनू li:hover > ul li (उंची: 36px; ओव्हरफ्लो: 0; )

आम्ही लिंक्सची रुंदी = 100px सेट करतो, शेवटच्या घटकांशिवाय सर्व घटकांच्या तळाशी एक सीमा-तळ सीमा जोडली जाते. तसेच, तुमची इच्छा असल्यास, तुम्ही सबमेनू आयटमसाठी चित्रे ठेवू शकता (लक्ष द्या! तुम्ही वापरत असलेल्या कोडमधील प्रतिमांचे मार्ग बदलण्यास विसरू नका).

मेनू ul li a ( रुंदी: 100px; पॅडिंग: 4px 0 4px 40px; समास: 0; सीमा: काहीही; सीमा-तळा: 1px ठोस #353539; ) .मेनू ul li: लास्ट-चाइल्ड a ( सीमा: काहीही; ) . मेनू a.documents (पार्श्वभूमी: url(../img/docs.png) no-repeat 6px केंद्र; ) .menu a.messages (पार्श्वभूमी: url(../img/bubble.png) no-repeat 6px केंद्र; ) .मेनू a.signout (पार्श्वभूमी: url(../img/arrow.png) no-repeat 6px केंद्र; )

मला वैयक्तिकरित्या अंमलबजावणीची सुलभता आणि चिन्हांचा वापर आवडतो. कोडपेनचा अंतिम कोड येथे आहे:

Josh Riser चा पर्याय मागील HTML आणि CSS ड्रॉपडाउन मेनू सारखाच आहे. कोडमध्ये चाइल्ड सिलेक्टर नाही ">" (मल्टी-लेव्हल डिझाईन्समध्ये उपयुक्त), परंतु लेखक अधिक सुंदर परिणामासाठी CSS3 प्रभावांचा (संक्रमण, बॉक्स-छाया आणि मजकूर-छाया) चांगला वापर करतो. स्त्रोतातील दुवा क्षैतिज ड्रॉप-डाउन मेनू तयार करण्याच्या प्रक्रियेचे वर्णन करत नाही, म्हणून मी त्वरित अंतिम कोड प्रदान करेन:

या उदाहरणात, आम्ही CSS वापरून ड्रॉप-डाउन मेनू कसा बनवायचा ते पाहू, ज्यामध्ये आयटम व्यतिरिक्त, शोध ब्लॉक असेल. एक समान अंमलबजावणी अनेकदा आधुनिक मध्ये आढळू शकते. अंमलबजावणीची वेळ आणि जटिलतेच्या दृष्टीने, उपाय मागीलपेक्षा थोडे अधिक क्लिष्ट आहे. हे मे 2013 मध्ये प्रकाशित झाले होते, त्यामुळे तुम्हाला काही गोष्टी बदलण्याची आवश्यकता असू शकते, जरी आमच्या चाचणीमध्ये ते चांगले काम केले.

HTML कोड

नेव्हिगेशनसाठी, नेहमीप्रमाणे, एक अक्रमित सूची (एनएव्ही वर्गासह) वापरली जाते. नियमित मेनू आयटम सूची आयटम (li) असतात आणि त्यात कोणत्याही वर्ग किंवा आयडीशिवाय दुवे (a href) असतात. या क्षैतिज ड्रॉप-डाउन मेनूचे खालील आयडी असलेले 3 विशेष घटक अपवाद आहेत:

• सेटिंग्ज - लिंक चित्र;
• शोध — शोध आणि संबंधित बटणासह ब्लॉक;
• पर्याय - एक सबमेनू समाविष्टीत आहे (सबनॅव्ह क्लाससह सूचीद्वारे लागू).

तसेच कोडमध्ये तुम्हाला उपसर्गांशिवाय CSS गुणधर्म वापरण्यासाठी उपसर्गमुक्त स्क्रिप्ट दिसेल. ड्रॉपडाउन मेनूसाठी अंतिम HTML असे दिसते:

• 
• अर्ज
• बोर्ड
• पर्याय
  • सेटिंग्ज
  • अर्ज
  • बोर्ड
  • पर्याय

मेनू CSS

1. मूलभूत शैली आणि मेनू घटक

प्रथम, आम्ही मेनू आयटमसाठी मॉन्टसेराट फॉन्ट, गडद राखाडी पार्श्वभूमी आणि निश्चित उंची निर्दिष्ट करतो. सर्व घटकांमध्ये फ्लोट आहे: डावे संरेखन आणि सापेक्ष स्थिती जेणेकरुन नंतर तुम्ही स्थानासह सबमेनू जोडू शकता: परिपूर्ण;

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( समास: 0; पॅडिंग: 0; ) .nav (पार्श्वभूमी: #232323; उंची: 60px; प्रदर्शन: इनलाइन-ब्लॉक; ) .nav li ( फ्लोट: डावीकडे; सूची-शैली-प्रकार: काहीही नाही; स्थिती: सापेक्ष; )

2. स्वरूपन दुवे

मेनू आयटम मूलभूत डिझाइन वापरतात + . उंची एनएव्ही वर्गाप्रमाणेच आहे. #settings साठी मेनूच्या सुरुवातीला इमेज लिंक, संरेखन सेट केले आहे.

Nav li a ( फॉन्ट-आकार: 16px; रंग: पांढरा; प्रदर्शन: ब्लॉक; लाइन-उंची: 60px; पॅडिंग: 0 26px; मजकूर-सजावट: काहीही नाही; सीमा-डावीकडे: 1px ठोस #2e2e2e; फॉन्ट-फॅमिली: मॉन्टसेराट, sans-serif; मजकूर सावली: 0 0 1px rgba(255, 255, 255, 0.5); -आकार: 10px; रेखा-उंची: 24px)

3. शोध ब्लॉक

या घटकाची रुंदी निश्चित असते आणि त्यात अनेक भाग असतात - हिरवी पार्श्वभूमी असलेले इनपुट फील्ड (#search_text) आणि शोध बटण (#search_button). काही ब्राउझरमध्ये, पार्श्वभूमीचा रंग राखाडी असू शकतो.

#शोध (रुंदी: 357px; समास: 4px; ) #search_text (रुंदी: 297px; पॅडिंग: 15px 0 15px 20px; फॉन्ट-आकार: 16px; फॉन्ट-फॅमिली: मॉन्टसेराट, sans-serif; no52 सीमा: hex2 ; मार्जिन-राइट: 0; फ़्लोट: बॉर्डर-बॉक्स: सर्व ) ::-वेबकिट-इनपुट-प्लेसहोल्डर (/* रंग: पांढरा; ) :-moz-प्लेसहोल्डर (/* फायरफॉक्स 4 ते 18 */ रंग: पांढरा; ):-moz-प्लेसहोल्डर ( /* Mozilla Firefox 19+ */ रंग: पांढरा; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ रंग: पांढरा ); 52px;

4. ड्रॉपडाउन सबमेनू

अंतिम स्पर्श आम्हाला CSS मध्ये ड्रॉप-डाउन मेनू बनविण्यास अनुमती देईल जो शेवटच्या #options आयटमसाठी सक्रिय होईल.

#options a( सीमा-डावीकडे: 0 काहीही नाही; ) #options>a ( पार्श्वभूमी-प्रतिमा: url(triangle.png); पार्श्वभूमी-स्थिती: 85% केंद्र; पार्श्वभूमी-पुनरावृत्ती: नाही-पुनरावृत्ती; पॅडिंग-उजवीकडे: 42px; ) .subnav (दृश्यता: लपविलेले; स्थिती: परिपूर्ण; शीर्ष: 110%; उजवीकडे: 0; रुंदी: 200px; उंची: स्वयं; अपारदर्शकता: 0; संक्रमण: सर्व 0.1s; पार्श्वभूमी: #232323; ) .subnav li ( फ्लोट : काहीही नाही; ) .subnav li a ( बॉर्डर-बॉटम: 1px सॉलिड #2e2e2e; ) #options:hover .subnav (दृश्यता: दृश्यमान; शीर्ष: 100%; अपारदर्शकता: 1; )

शैलींमध्ये सबमेनू दर्शविण्यासाठी तुम्हाला त्रिकोणी पार्श्वभूमी प्रतिमा (triangle.png) समाविष्ट केली जाईल - उदाहरणामध्ये या आणि इतर प्रतिमांसाठी योग्य मार्ग सूचित करण्यास विसरू नका. अस्पष्टता गुणधर्म वापरून सबमेनूचा देखावा लागू केला जातो. कोडपेनवरील अंतिम उपाय:

हा पर्याय प्रामुख्याने CSS2.1 तंत्रांचा वापर करतो, समाधान अधिक किंवा मायनस नवीन आहे - मार्च 2015 साठी. जर तुम्ही साइटसाठी क्षैतिज ड्रॉप-डाउन मेनूमध्ये एक सबलेव्हल गमावत असाल, तर या उदाहरणात एकाच वेळी तीन समाविष्ट आहेत. स्यूडो-क्लास:ओन्ली-चाइल्ड वापरून, सबमेनूची उपस्थिती दर्शवण्यासाठी आयटममध्ये “+” चिन्ह जोडले जाते.

एकूणच, एक चांगले आणि सोपे उदाहरण. आम्ही अंमलबजावणी प्रक्रियेचे तपशीलवार वर्णन करणार नाही, कारण... हे मागील प्रमाणेच आहे - प्रथम तुम्ही HTML फ्रेमवर्क तयार करा आणि नंतर हळूहळू त्यासाठी शैली जोडा. स्त्रोताच्या दुव्याचा वापर करून अंतिम कोड डाउनलोड करा, तुम्ही कोडपेनमध्ये अंशतः पाहू शकता:

एकूण

वर आम्ही CSS + HTML वापरून ड्रॉप-डाउन मेनू कसा बनवायचा याचे 4 पर्याय पाहिले, जरी इंटरनेटवर अशी अनेक उदाहरणे आहेत. jQuery सह उपाय आहेत, परंतु हे बहुधा केवळ काही विशेष प्रभाव आणि गैर-मानक कार्ये लागू करण्यासाठी उपयुक्त आहे. बहुतेक प्रकरणांमध्ये, CSS + HTML चे संयोजन पुरेसे असेल, विशेषत: आता मेनूसाठी मुख्य आवश्यकता म्हणजे सुविधा आणि वेगवान लोडिंग गती.

शेवटी, वरील कोडवर दोन नोट्स. काही उदाहरणे ड्रॉपडाउन मेनूसाठी CSS मधील प्रतिमा वापरतात, त्यामुळे तुम्हाला इमेज पथांचे काळजीपूर्वक पुनरावलोकन करावे लागेल आणि तुमच्या साइटसाठी योग्य मूल्ये प्रदान करावी लागतील. दुसरे म्हणजे, काही उपाय 2-3 वर्षे जुने आहेत, म्हणून तुम्ही पुन्हा एकदा वेगवेगळ्या ब्राउझरमध्ये त्यांचे कार्यप्रदर्शन तपासले पाहिजे.

तुम्हाला वेबसाइटसाठी क्षैतिज ड्रॉप-डाउन मेनूची इतर कोणतीही मनोरंजक आधुनिक अंमलबजावणी माहित असल्यास, टिप्पण्यांमध्ये दुवे पाठवा.

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

तर, चला सुरुवात करूया. चला आपल्या मेनूच्या नावांसह एक यादी तयार करूया. आयटमची नावे असू द्या: “घर”, “बातम्या”, “उत्पादने”, “सेवा”, “भागीदार”, “संपर्क”. menu.html नावाची नवीन फाइल तयार करा, उदाहरणार्थ, Dreamweawer प्रोग्राम वापरून किंवा नियमित नोटपॅड वापरून. त्यामध्ये, बॉडी टॅग्जमध्ये आम्ही आमचा मेनू ठेवतो. ही li घटकांसह ul ची नियमित बुलेट केलेली सूची आहे. अर्थात, आम्ही प्रत्येक मेनू आयटमची लिंक बनवतो, जिथे URL ऐवजी आम्ही हॅश # घालतो. फोटोशॉप वापरून, खालील चित्रात दाखवल्याप्रमाणे ग्रेडियंट फिलसह 3x30 px आकाराची प्रतिमा तयार करा. आम्ही फाईल GIF फॉरमॅटमध्ये सेव्ह करू. चला याला bg.gif म्हणू या. हे चित्र आमच्या मेनूची पार्श्वभूमी प्रतिमा म्हणून काम करेल.

येथे menu.html फाइलची सामग्री आहे:

साधा क्रॉस-ब्राउझर क्षैतिज मेनू

• मुख्यपृष्ठ
• बातम्या
• उत्पादने
• सेवा
• भागीदार
• संपर्क

आता main.css नावाची स्टाइल फाईल स्वतंत्रपणे बनवू. त्याची सूची खाली पूर्ण दर्शविली आहे.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*सूची डावीकडे संरेखित करा*/ width:auto;/* यावर आधारित ऑटोची रुंदी सेट करा सूचीचा प्रकार आणि सामग्री */ पार्श्वभूमी-प्रतिमा: url(bg.gif); /*पार्श्वभूमी प्रतिमा सेट करा*/ पार्श्वभूमी-पुनरावृत्ती:पुनरावृत्ती-x*/ सूची-शैली: काहीही नाही; /*लिस्ट मार्कर काढा*/ पार्श्वभूमी-रंग:#4778c3; /*चित्रासाठी पार्श्वभूमी रंग सेट करा*/ फॉन्ट-आकार:13px; /*फॉन्ट आकार सेट करा*/ फॉन्ट-फॅमिली:एरियल, हेल्वेटिका, सॅन्स-सेरिफ ; /*फॉन्ट सेट करा*/ ) ul li ( फ्लोट: डावीकडे; /* सूची घटक डावीकडे संरेखित करा */ ) ul a ( डिस्प्ले: ब्लॉक; / * मेनू लिंक्स ब्लॉक घटक म्हणून दर्शवा*/ रुंदी: 100px; /* ब्लॉक आकार*/ उंची सेट करा: /* आणि ब्लॉक उंची*/ मजकूर-केंद्रित*/ रेखा-उंची: 2.1em; /* लिंक्समधून अधोरेखित करा*/ रंग: /*लिंक मजकूर रंग - पांढरा*/ बॉर्डर-उजवीकडे: #fff ठोस 1px ब्लॉकच्या उजव्या बाजूला (1px पांढरी रेखा)*/ ul फिरवा (रंग:#ccc; /*लिंक वर फिरत असताना रंग बदलतो*/ )

मला वाटते की main.css फाईलच्या सामग्रीबद्दल कोणतेही प्रश्न नसावेत; मी टिप्पण्यांमध्ये पुरेसे तपशील आणि स्पष्टपणे लिहिले आहे, म्हणून मी स्वत: ला पुनरावृत्ती करणार नाही. वापरून आमच्या menu.html पृष्ठाशी जोडण्यास विसरू नका

सारांश द्या. परिणामी, आम्हाला एक पूर्णपणे क्रॉस-ब्राउझर क्षैतिज मेनू मिळाला जो केवळ सर्व आधुनिक ब्राउझरमध्येच नाही तर IE 5.5 आणि IE 6.0 सारख्या दुर्मिळतेमध्ये देखील समान दिसतो. सर्व मेनू घटक ब्लॉक घटक म्हणून सादर केले जातात आणि 100 px रुंदी आणि 30 px उंचीची समान परिमाणे आहेत. मेनू आयटमसाठी विभाजक म्हणून, 1px जाडीची पांढरी उजवी बॉर्डर वापरून ब्लॉक घटक डिझाइन वापरले जाते. क्षैतिज मेनू लागू करण्याचा हा व्यावहारिकदृष्ट्या सर्वात सोपा मार्ग आहे. अर्थात, इच्छित असल्यास, आपण त्यात सुधारणा करू शकता, कल्पनाशक्ती, CSS गुणधर्म आणि अतिरिक्त ग्राफिक घटक वापरून ते अधिक सुंदर आणि कार्यक्षम बनवू शकता. बरं, आमचा क्षैतिज मेनू यासारखा दिसतो:

या सोल्यूशनचे फायदेः
करणे सोपे आहे
साधा कोड
कोणतेही टेबल किंवा जावास्क्रिप्ट नाहीत
क्रॉस-ब्राउझर सुसंगतता: मेनू सर्व ब्राउझरमध्ये सारखाच दिसतो
फक्त एक रेखाचित्र वापरले जाते
menu.html पृष्ठावरील किमान कोड
main.css मध्ये शैली लागू करण्यासाठी किमान कोड

या उदाहरणात वापरलेल्या फायली संग्रहणात डाउनलोड केल्या जाऊ शकतात

लेखकाकडून: वेबसाइट बिल्डिंगबद्दलच्या आमच्या ब्लॉगवर मी तुमचे स्वागत करतो. ही नवीन तपशीलासाठी समर्पित लेखांची मालिका आहे आणि आज मी तुम्हाला HTML5 मध्ये मेनू कसा तयार करायचा आणि ही प्रक्रिया भाषेच्या मागील आवृत्त्यांपेक्षा कशी वेगळी आहे हे सांगू इच्छितो.

सर्व प्रथम, मी सांगू इच्छितो की तपशील इतके नवीन नाही - 2009 मध्ये त्याचा विकास सुरू झाला. वास्तविक, तेव्हापासून सतत विकास होत आहे - html5 मध्ये नवीन वैशिष्ट्ये दिसतात, आधुनिक ब्राउझर या समान वैशिष्ट्यांना अधिकाधिक समर्थन देतात, जेणेकरून लवकरच या तंत्रज्ञानासाठी संपूर्ण समर्थनाबद्दल बोलणे शक्य होईल, जरी ते संपूर्ण नाही, हा त्याऐवजी नवीन शक्यतांचा संच आहे, ज्यापैकी प्रत्येक स्वतंत्र आहे.

बरं, ठीक आहे, पण मुख्य नेव्हिगेशन (मेनू) तयार करण्यात काय वेगळं आहे, कारण तुम्ही या विषयावरचा लेख वाचत आहात, तर नक्कीच काही फरक असावा. बरं, आधी मेनू कसा तयार केला होता? सामान्यतः, यासाठी बुलेट केलेली सूची वापरली गेली होती, जी सर्व नेव्हिगेशनसाठी अतिरिक्त कंटेनरमध्ये ठेवली होती - एक नियमित div.

त्यामुळे, नवीन टॅग्सच्या आगमनाने, तुम्ही आता काहीतरी अधिक योग्य करू शकता - div टॅगऐवजी, मेनूला nav मध्ये गुंडाळा - एक नवीन सिमेंटिक घटक जो विशेषत: त्यातील सर्वात महत्त्वाच्या लिंक्स एकत्रित करण्यासाठी आणि त्यांना एकत्रित करण्यासाठी तयार करण्यात आला होता.

तुम्ही एनएव्हीमध्ये एक यादी किंवा फक्त लिंक्सचा संच ठेवू शकता. मला असे वाटते की हा एक सोपा आणि अधिक योग्य उपाय आहे, जरी बऱ्याच टेम्पलेट्समध्ये आपण अद्याप ul, li, a टॅग वापरून मेनूची अंमलबजावणी पाहू शकता.

विशेष म्हणजे, एनएव्ही कंटेनर विशेषत: पृष्ठावरील प्राधान्य दुव्यांसाठी तयार केला गेला होता. खरं तर, एका पृष्ठावर असे एकापेक्षा जास्त कंटेनर असू शकतात, परंतु आपण त्यामध्ये फक्त तेच दुवे ठेवावे जे प्रत्यक्षात मुख्य नेव्हिगेशन तयार करतात (उदाहरणार्थ, शीर्षस्थानी मुख्य मेनू आणि पृष्ठ तळटीपातील त्याची डुप्लिकेट).

मुख्यपृष्ठ सेवा संपर्क पुनरावलोकने

आपल्याला सूचीमध्ये कोणत्याही फ्रेमिंगची आवश्यकता नाही; सर्व काही सुरुवातीला एका ओळीवर प्रदर्शित केले जाईल, कारण लिंक्स इनलाइन घटक आहेत.

दुसरी गोष्ट अशी आहे की त्यांच्या इनलाइन गुणधर्मांमुळे ते डिझाइनमध्ये खूप मर्यादित आहेत. तुम्ही फक्त अशा गुणधर्मांसह ऑपरेट करू शकाल: रंग, फॉन्ट आकार, समास. जर तुम्हाला विशिष्ट पार्श्वभूमी रंग सेट करायचा असेल, विभाजक बनवायचा असेल आणि पॅडिंग जोडायचे असेल (किंवा प्रत्येक मेनू आयटमचा आकार निर्धारित करा), तर तुम्ही हे एका ओळीने करू शकणार नाही.

येथे आपल्याला आमचे आयटम ब्लॉक घटकांमध्ये रूपांतरित करावे लागतील. हे करण्यासाठी, त्यांना मालमत्ता लिहिणे आवश्यक आहे:

आता ते वरपासून खालपर्यंत जातात, म्हणजेच आमचे नेव्हिगेशन उभे झाले आहे. ते क्षैतिज मध्ये परत करण्यासाठी, तुम्हाला काही गुणधर्म जोडण्याची आवश्यकता आहे. उदाहरणार्थ, ब्लॉक प्रकाराऐवजी, त्यांच्यासाठी ब्लॉक-लाइन प्रकार परिभाषित करा किंवा त्यांना द्या (फ्लोट: डावीकडे). या पद्धतींबद्दल अधिक वाचा.

सहसा, html5 मध्ये उभ्या मेनू बनविण्यासाठी, ते सूची वापरतात, परंतु मी तुम्हाला वर दिलेला मार्कअप देखील आमच्यासाठी योग्य आहे. तुम्ही पाहिल्याप्रमाणे, तुम्ही लिंक्स ब्लॉक लिंक्समध्ये रूपांतरित केल्यास, ते आपोआप वरपासून खालपर्यंत एकामागून एक रांगेत येतील, कारण दोन ब्लॉक्स एकाच ओळीवर असू शकत नाहीत.

आता आपण त्यांना आवश्यक डिझाइन नियम लागू करू शकता. ब्लॉक्समध्ये इनलाइन घटकापेक्षा बरेच गुणधर्म आहेत, त्यामुळे तुमच्याकडे बरेच पर्याय आहेत. उदाहरणार्थ, मी हे जोडले:

a( मजकूर-सजावट: काहीही; रंग: #ffff; पॅडिंग: 5px; फॉन्ट-आकार: 22px; प्रदर्शन: ब्लॉक; पार्श्वभूमी: रेखीय-ग्रेडियंट(उजवीकडे, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100% रुंदी: 200px मजकूर संरेखित करा;

टॅगचा उद्देश मेनू आयटमची सूची प्रदर्शित करण्यासाठी आहे. टॅग प्रमाणेच आणि

कंटेनरच्या आत टॅग वापरून यादी तयार केली जाते
• .

  HTML4 मध्ये टॅग अप्रचलित झाला आहे, त्याऐवजी टॅग वापरण्याची शिफारस केली जाते

  . HTML5 मध्ये टॅग पुन्हा समाविष्ट केला आहे, परंतु वेगळ्या क्षमतेमध्ये. आता ते टॅग आणि मेनू तयार करण्यासाठी कंटेनर म्हणून कार्य करते.
  मांडणी

  HTML	मेनू आयटम मेनू आयटम
  HTML5	...

  विशेषता मेनूसाठी दृश्यमान लेबल सेट करते. मेनू प्रकार सेट करते. टॅग बंद करणे

  आवश्यक आहे.

  प्रमाणीकरण

  या टॅगचा वापर HTML4 तपशीलाद्वारे निषेध केला जातो केवळ संक्रमणकालीन वापरताना वैध कोड प्राप्त होतो. HTML5 मध्ये, टॅग योग्यरित्या वापरला जातो.

  HTML 4.01 IE Cr Op Sa Fx

  मेनू टॅग

  या अंकात:

  • रशियन स्वयंपाकघर. बर्लाटस्काया सूप
  • युक्रेनियन अन्न. वारेनिकी
  • मोल्डाव्हियन पाककृती. पेपरिकाश
  • कॉकेशियन स्वयंपाकघर. सूप खारचो
  • बाल्टिक पाककृती. व्हर्टिनय

  या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. १.

  तांदूळ. 1. टॅग वापरून तयार केलेल्या सूचीचे दृश्य

  HTML5 IE Cr Op Sa Fx

  मेनू टॅग

  • नवीन... उघडा... जतन करा
  • कॉपी कट पेस्ट