साधा सीएसएस मेनू. कोडपेनसह सुंदर बहु-स्तरीय मेनूचे उत्कृष्ट विहंगावलोकन

HTML5 IE Cr Op Sa Fx

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

तर, चला सुरुवात करूया. चला आपल्या मेनूच्या नावांसह एक यादी तयार करूया. आयटमची नावे असू द्या: “घर”, “बातम्या”, “उत्पादने”, “सेवा”, “भागीदार”, “संपर्क”. 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 वापरून क्षैतिज मेनू कसा बनवायचा

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

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

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

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

अनुलंब नेव्हिगेशन

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

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

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

कार्य

बुलेट असलेली सूची क्षैतिजरित्या बुलेटशिवाय प्रदर्शित करा.

उपाय

बुलेट टॅग

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

  एचटीएमएलमध्ये ब्लॉक आणि इनलाइन घटक आहेत हे तुम्हाला आधीच माहित असले पाहिजे. इनलाइन घटक त्यांचे स्वतःचे ब्लॉक तयार करत नाहीत, अशा घटकांचे उदाहरण म्हणजे टॅग किंवा . ब्लॉक घटक नवीन ओळीवर प्रदर्शित केले जातात आणि आयताकृती ब्लॉक तयार करतात, अशा टॅगचे उदाहरण

  किंवा

  तर हा टॅग आहे

• ब्लॉक घटक देखील आहे.

  टॅग करण्यासाठी

• ब्लॉक घटकासारखे वागले नाही, तुम्ही ते इनलाइन करण्यासाठी CSS वापरू शकता.

  सीएसएस प्रॉपर्टी डिस्प्ले हे ठरवते की घटक दस्तऐवजात कसा प्रदर्शित केला जाईल. चला त्याच्या तीन अर्थांचा विचार करूया (जरी आणखी काही आहेत):

  • ब्लॉक - घटक ब्लॉक घटक म्हणून प्रदर्शित केला जातो.
  • इनलाइन - घटक इनलाइन म्हणून प्रदर्शित केला जातो.
  • इनलाइन-ब्लॉक - ब्लॉक-लाइन घटक, खाली या प्रकारच्या घटकाबद्दल अधिक वाचा, आम्ही ते वापरू.

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

  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  
  
  

  तर, या शैलीने कार्य केले आणि आम्हाला सूची आयटमची क्षैतिज व्यवस्था मिळाली:

  आकृती 1. कामावर उदाहरण #1.

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

  उदाहरणार्थ, 150px रुंदी आणि 40px उंचीसाठी आम्ही तयार केलेला मेनू घटक आवश्यक आहे. चला शैली खालीलप्रमाणे बदलण्याचा प्रयत्न करूया, म्हणजे, मेनू आयटमचा आकार सेट करणारे दोन नियम जोडा:

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

  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  
  
  

  हा कोड कार्य करतो आणि बदल दृश्यमान आहेत:

  
  आकृती 2. कृतीत उदाहरण क्रमांक 2.

  परंतु भिन्न पर्याय असू शकतात, उदाहरणार्थ आम्हाला मेनूमध्ये नेस्टेड सूची प्रदर्शित करणे आवश्यक आहे:

  • सुधारणे
    • रद्द करा
    • कट
    • कॉपी करा
    • घाला
  • टाईपफेस
    • धीट
    • तिर्यक
    • अधोरेखित
  • आकार
    • लहान
    • सामान्य
    • सरासरी
    • मोठा
  
  
  

  या कोडचा परिणाम येथे आहे:

  
  आकृती 3. कामावर उदाहरण क्रमांक 3.

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

  पण प्रत्यक्षात असे का घडते?

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

  चला वेगवेगळ्या आकारांची "A" वर्ण असलेली स्ट्रिंग पाहू:

  A A A A A A A A

  आपण पाहतो की सर्व अक्षरे खालच्या ओळीवर अनुलंब संरेखित आहेत. अधिक तंतोतंत, बेसलाइनच्या बाजूने, परंतु आता तणात जाऊ नका. तर, आमच्या ब्लॉक्समध्येही असेच घडले.

  मजकूर अनुलंब संरेखित करण्यासाठी, अनुलंब-संरेखित गुणधर्म वापरा. आमच्या उदाहरण #3 मध्ये, आम्हाला व्हॅल्यू टॉप वापरणे आवश्यक आहे, जे घटकाची शीर्ष सीमा रेषेवरील सर्वात उंच घटकाच्या शीर्षस्थानी संरेखित करेल.

  आत्ता ते वेगवेगळ्या आकारांच्या "A" वर्ण असलेल्या स्ट्रिंगवर लागू करूया:

  A A A A A A A A

  अक्षरे थोडी "उडी" मारतात असे वाटते. मी CSS बॉर्डर सर्वात उंच अक्षरावर सेट केली आहे की प्रत्यक्षात कोणतीही उडी नाही, फक्त वरच्या बॉर्डरमध्ये (जेथे संरेखन होते) आणि "A" च्या वरच्या बिंदूमध्ये रिक्त जागा आहे.

  अनुलंब-संरेखित गुणधर्म प्रत्येक इनलाइन घटकावर लागू करणे आवश्यक आहे, ते अनुवांशिक नाही. तुम्ही या गुणधर्माबद्दल अधिक वाचू शकता: vertical-align .

  या विषयांतरानंतर, आम्ही सूची घटक क्षैतिजरित्या ठेवू.

  दुसरा मार्ग

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

  हा कोड वापरण्याचे येथे एक उदाहरण आहे:

  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  
  
  

  येथे कोडचा परिणाम आहे:

  आकृती 4. कामाचे उदाहरण.

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

  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  
  
  

  येथे कोडचा परिणाम आहे:

  आकृती 5. कामाचे उदाहरण.

  या उदाहरणांमध्ये कंटेनर सूची

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

  पहिल्या दृष्टीक्षेपात, सर्वकाही कार्य करते. पण आमच्या याद्या बदलूया. कोडमध्ये मेनू-1 वर्ग असलेली यादी मेनू-2 वर्गाच्या यादीच्या आधी ठेवू (आता ती कमी झाली आहे).

  याचा परिणाम म्हणून आम्हाला हे मिळते:

  आकृती 6. कामाचे उदाहरण.

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

  ही समस्या कशी सोडवायची?

  हे करण्यासाठी, तुम्हाला स्पष्ट गुणधर्म वापरण्याची आवश्यकता आहे, जर त्यात फ्लोट गुणधर्म सेट असेल तर ते घटक दुसर्या घटकाभोवती गुंडाळणे रद्द करते.

  स्पष्ट गुणधर्म वापरून येथे एक सुधारित उदाहरण आहे:

  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  • परिच्छेद १
  • मुद्दा २
  • पॉइंट 3
  
  
  

  हे पाहिले जाऊ शकते की खालची यादी यापुढे वरच्या भोवती गुंडाळत नाही, घटक एकमेकांशी टक्कर देत नाहीत. पण पहिल्या यादीत टॅग आहेत

  • अजूनही कंटेनरच्या बाहेर स्थित आहेत
    .
    आकृती 7. कामाचे उदाहरण.

    याव्यतिरिक्त, कामामध्ये फ्लोट वापरून कोणता घटक घटकाचे अनुसरण करेल हे आम्हाला नेहमी माहित नसते. फ्लोट प्रॉपर्टीचे ऑपरेशन त्याच ब्लॉकमध्ये बंद करणे हा आदर्श पर्याय असेल ज्यामध्ये ते खुले आहे.

    हे स्यूडो घटक वापरून केले जाते. हा कोड आहे:

    • परिच्छेद १
    • मुद्दा २
    • पॉइंट 3
    • परिच्छेद १
    • मुद्दा २
    • पॉइंट 3
    
    
    

    आता आमच्याकडे 100% कार्यरत कोड आहे.

    आकृती 8. कामाचे उदाहरण.

    फ्लोट प्रॉपर्टीसह हे तंत्र सहसा टॅगद्वारे तयार केलेले स्तंभ संरेखित करण्यासाठी वेबसाइट डिझाइन करताना वापरले जाते

    . अशा प्रकारे आपल्याला आवश्यक उंचीच्या संरेखनासह स्तंभांचे सामान्य बांधकाम मिळते. जेव्हा आम्ही मेनू तयार करतो, तेव्हा बहुतेक प्रकरणांमध्ये ब्लॉक्सची उंची आमच्यासाठी महत्त्वाची नसते; म्हणून, या प्रकरणांमध्ये नियम (डिस्प्ले: इनलाइन-ब्लॉक) वापरणे अगदी न्याय्य आहे.
    परंतु विषयाच्या पूर्णतेसाठी, आम्ही सर्व संभाव्य पर्यायांसह स्वतःला परिचित केले आहे. जरी इतर मार्ग असू शकतात, उदाहरणार्थ, CSS सारण्या वापरणे, शोध इंजिने जोरदारपणे टेबल वापरण्याची शिफारस करतात फक्त त्यांच्या हेतूसाठी, आणि नॅव्हिगेशन घटक किंवा इतर काहीही आयोजित करण्यासाठी नाही.
    तुमची वेबसाइट फक्त एका वेब पेजपेक्षा जास्त असल्यास, तुम्ही नेव्हिगेशन बार (मेनू) जोडण्याचा विचार केला पाहिजे. मेनू हा वेबसाइटचा एक विभाग आहे जो अभ्यागतांना साइट नेव्हिगेट करण्यात मदत करण्यासाठी डिझाइन केलेला आहे. कोणताही मेनू साइटच्या अंतर्गत पृष्ठांकडे नेणाऱ्या लिंक्सची सूची आहे. तुमच्या साइटवर नेव्हिगेशन बार जोडण्याचा सर्वात सोपा मार्ग म्हणजे CSS आणि HTML वापरून मेनू तयार करणे.
    अनुलंब मेनू
    अनुलंब मेनू तयार करण्याची पहिली पायरी म्हणजे बुलेट केलेली सूची तयार करणे. आम्हाला सूची ओळखण्यास सक्षम असणे देखील आवश्यक आहे, म्हणून आम्ही त्यात "navbar" अभिज्ञापकासह एक id विशेषता जोडू. प्रत्येक घटक
    आमच्या यादीमध्ये एक दुवा असेल:
    • मुख्यपृष्ठ
    • बातम्या
    • संपर्क
    • आमच्याबद्दल
    आमचे पुढील कार्य डीफॉल्ट सूची शैली रीसेट करणे आहे. आम्हाला सूचीमधून बाह्य आणि आतील पॅडिंग आणि सूची आयटममधून बुलेट काढण्याची आवश्यकता आहे. नंतर इच्छित रुंदी सेट करा:
    #navbar ( समास: 0; पॅडिंग: 0; सूची-शैली-प्रकार: काहीही नाही; रुंदी: 100px; )
    आता लिंक्स स्वतः स्टाईल करण्याची वेळ आली आहे. आम्ही त्यांना पार्श्वभूमी रंग जोडू, मजकूर पॅरामीटर्स बदलू: रंग, फॉन्ट आकार आणि वजन, अधोरेखित काढू, लहान इंडेंट जोडू आणि डिस्प्ले पुन्हा परिभाषित करू. इनलाइन पासून ब्लॉक पर्यंत घटक. याव्यतिरिक्त, सूची आयटममध्ये डाव्या आणि तळाच्या फ्रेम जोडल्या गेल्या आहेत.
    आमच्या बदलांचा सर्वात महत्वाचा भाग म्हणजे घटक अवरोधित करण्यासाठी इनलाइन घटकांची पुनर्व्याख्या. आता आमच्या लिंक्सने सूचीतील आयटमची सर्व उपलब्ध जागा व्यापली आहे, म्हणजेच लिंक फॉलो करण्यासाठी आम्हाला यापुढे मजकुरावर कर्सर फिरवण्याची गरज नाही.
    #navbar a ( पार्श्वभूमी-रंग: #949494; रंग: #fff; पॅडिंग: 5px; मजकूर-सजावट: काहीही नाही; फॉन्ट-वजन: ठळक; सीमा-डावीकडे: 5px घन #33ADFF; प्रदर्शन: ब्लॉक; ) #navbar li ( सीमा-डावीकडे: 10px घन #666; सीमा-तळाशी: 1px घन #666 )
    आम्ही वर वर्णन केलेले सर्व कोड एका उदाहरणात एकत्र केले आहेत, आता प्रयत्न करा बटणावर क्लिक करून तुम्ही उदाहरण पृष्ठावर जाऊ शकता आणि परिणाम पाहू शकता:
    • मुख्यपृष्ठ
    • बातम्या
    • संपर्क
    • आमच्याबद्दल
    
    
    प्रयत्न "
    जेव्हा तुम्ही मेनू आयटमवर माउस फिरवता, तेव्हा वापरकर्त्याचे लक्ष वेधून त्याचे स्वरूप बदलू शकते. तुम्ही pseudo-class:hover वापरून असा प्रभाव तयार करू शकता.
    आधी चर्चा केलेल्या उभ्या मेनू उदाहरणाकडे परत जाऊ आणि स्टाईल शीटमध्ये खालील नियम जोडा:
    #navbar a:hover (पार्श्वभूमी-रंग: #666; सीमा-डावीकडे: 5px घन #3333FF; ) प्रयत्न करा »
    क्षैतिज मेनू
    मागील उदाहरणामध्ये, आम्ही उभ्या नेव्हिगेशन बारकडे पाहिले, जे मुख्य सामग्री क्षेत्राच्या डावीकडे किंवा उजवीकडे वेबसाइटवर आढळते. तथापि, नेव्हिगेशन लिंकसह मेनू देखील वेब पृष्ठाच्या शीर्षस्थानी क्षैतिजरित्या स्थित असतात.
    नियमित यादी स्टाईल करून क्षैतिज मेनू तयार केला जाऊ शकतो. घटकांसाठी गुणधर्म प्रदर्शित करा
    तुम्हाला मूल्य इनलाइन नियुक्त करणे आवश्यक आहे जेणेकरून सूची आयटम एकामागून एक स्थित असतील.
    मेनू आयटम क्षैतिज ठेवण्यासाठी, प्रथम दुव्यांसह बुलेट केलेली सूची तयार करा:
    • मुख्यपृष्ठ
    • बातम्या
    • संपर्क
    • आमच्याबद्दल
    चला आमच्या सूचीसाठी काही नियम लिहूया जे याद्यांसाठी वापरलेली डीफॉल्ट शैली रीसेट करतात आणि सूची आयटम ब्लॉकपासून इनलाइनपर्यंत पुन्हा परिभाषित करतात:
    #navbar ( समास: 0; पॅडिंग: 0; list-style-type: none; ) #navbar li (प्रदर्शन: इनलाइन; ) प्रयत्न करा »
    आता आम्हाला फक्त आमच्या क्षैतिज मेनूसाठी शैली परिभाषित करायची आहे:
    #navbar ( समास: 0; पॅडिंग: 0; सूची-शैली-प्रकार: काहीही नाही; सीमा: 2px ठोस #0066FF; सीमा-त्रिज्या: 20px 5px; रुंदी: 550px; मजकूर-संरेखित: केंद्र; पार्श्वभूमी-रंग: #33ADFF; ) #navbar a (रंग: #fff; पॅडिंग: 5px 10px; मजकूर-सजावट: काहीही नाही; फॉन्ट-वजन: ठळक; प्रदर्शन: इनलाइन-ब्लॉक; रुंदी: 100px; ) #navbar a:होवर (सीमा-त्रिज्या: 20px 5px ; पार्श्वभूमी-रंग: #0066FF ) प्रयत्न करा »
    ड्रॉप-डाउन मेनू
    आम्ही तयार करत असलेल्या मेनूमध्ये क्षैतिज नेव्हिगेशन बारमध्ये स्थित मुख्य नेव्हिगेशन लिंक्स असतील आणि उप-आयटम्स असतील जे जेव्हा या उप-आयटम्सशी संबंधित असलेल्या मेनू आयटमवर माउस कर्सर फिरवतात तेव्हाच दिसून येतील.
    प्रथम आपल्याला आपल्या मेनूची HTML रचना तयार करावी लागेल. आम्ही मुख्य नेव्हिगेशन लिंक बुलेट केलेल्या सूचीमध्ये ठेवू:
    • मुख्यपृष्ठ
    • बातम्या
    • संपर्क
    • आमच्याबद्दल
    आम्ही उप-आयटम वेगळ्या यादीत ठेवू, ते घटकामध्ये नेस्ट करू
    , ज्यामध्ये उप-आयटमशी संबंधित मूळ लिंक आहे. आमच्या भविष्यातील नेव्हिगेशन बारसाठी आता आमच्याकडे स्पष्ट रचना आहे:
    • मुख्यपृष्ठ
    • बातम्या
    • संपर्क
      • पत्ता
      • दूरध्वनी
      • ईमेल
    • आमच्याबद्दल
    प्रयत्न "
    आता CSS कोड लिहायला सुरुवात करू. प्रथम, आपल्याला डिस्प्ले वापरून उप-आयटमसह सूची लपविण्याची आवश्यकता आहे: कोणतीही घोषणा नाही जेणेकरून ते वेब पृष्ठावर सर्व वेळ प्रदर्शित होणार नाहीत. उप-आयटम प्रदर्शित करण्यासाठी, घटकावर फिरवताना आम्हाला ते आवश्यक आहे
    सूची पुन्हा ब्लॉक घटकामध्ये रूपांतरित केली गेली आहे:
    #navbar उल (प्रदर्शन: काहीही नाही;) #navbar li:hover ul (प्रदर्शन: ब्लॉक; )
    आम्ही दोन्ही सूचीमधून डीफॉल्ट इंडेंट आणि मार्कर काढून टाकतो. आम्ही नेव्हिगेशन लिंकसह सूची घटक तयार करतो, आडवा मेनू बनवतो, परंतु उप-आयटम असलेल्या सूची घटकांसाठी आम्ही फ्लोट सेट करतो: काहीही नाही; जेणेकरून ते एकमेकांच्या खाली दिसतात.
    #navbar, #navbar उल ( समास: 0; पॅडिंग: 0; सूची-शैली-प्रकार: काहीही नाही; ) #navbar li ( float: left; ) #navbar ul li (float: none; )
    पुढे, आम्हाला हे सुनिश्चित करणे आवश्यक आहे की आमचा ड्रॉपडाउन सबमेनू नेव्हिगेशन बारच्या खाली असलेली सामग्री खाली ढकलत नाही. हे करण्यासाठी, आम्ही सूची आयटम स्थिती सेट करू: नातेवाईक; , आणि उप-आयटम स्थान असलेली सूची: परिपूर्ण; आणि 100% मूल्यासह शीर्ष गुणधर्म जोडा जेणेकरून पूर्णपणे स्थित सबमेनू दुव्याच्या अगदी खाली दिसेल.
    #navbar ul (प्रदर्शन: काहीही; स्थिती: परिपूर्ण; शीर्ष: 100%; ) #navbar li ( फ्लोट: डावीकडे; स्थिती: संबंधित; ) #navbar (उंची: 30px; ) प्रयत्न करा »
    मूळ सूचीची उंची हेतुपुरस्सर जोडली गेली आहे, कारण ब्राउझर फ्लोटिंग सामग्रीला घटक सामग्री मानत नाहीत, उंची न जोडता आमच्या सूचीकडे ब्राउझरद्वारे दुर्लक्ष केले जाईल आणि सूची खालील सामग्री आमच्या मेनूभोवती गुंडाळली जाईल.
    आता आम्हाला आमच्या दोन्ही याद्या स्टाईल करण्याची गरज आहे आणि ड्रॉप-डाउन मेनू तयार होईल:
    #navbar उल (प्रदर्शन: काहीही; पार्श्वभूमी-रंग: #f90; स्थिती: परिपूर्ण; शीर्ष: 100%; ) #navbar li:hover ul (प्रदर्शन: ब्लॉक; ) #navbar, #navbar उल ( समास: 0; पॅडिंग: 0; list-style-type: none; ) #navbar (उंची: 30px; पार्श्वभूमी-रंग: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( फ्लोट: डावीकडे; स्थिती: सापेक्ष; उंची: 100%; ) #navbar li a (प्रदर्शन: ब्लॉक; पॅडिंग: 6px; रुंदी: 100px; रंग: #fff; मजकूर-सजावट: काहीही नाही; मजकूर-संरेखित: केंद्र; ) #navbar ul li ( float: none; ) #navbar li:hover (पार्श्वभूमी-रंग: #f90; ) #navbar ul li:hover (पार्श्वभूमी-रंग: #666; )