एक चरण-दर-चरण मार्गदर्शक
आपल्या नेव्हिगेशन मेनू शीर्षस्थानी किंवा एका ओळीतील ओळीत क्षैतिज पंक्ती आहे का ते अद्याप एक सूची आहे वेब नेव्हिगेशनची रचना करतांना, हे नेहमी लक्षात ठेवणे सोपे असते की एक नेव्हिगेशन मेनू हा दुवे एकमेव समूह आहे. परंतु जर आपण XHTML + CSS वापरुन आपल्या नेव्हिगेशनचा प्रोग्राम केला तर आपण डाउनलोड करण्यासाठी (XHTML) आणि सानुकूलित करणे सोपे असलेल्या मेन्यू तयार करू शकता (सीएसएस).
प्रारंभ करणे
नेव्हिगेशनसाठी एक यादी तयार करणे प्रारंभ करण्यासाठी आपल्याला सूची वापरण्याची आवश्यकता आहे.
नॅव्हिगेशन म्हणून ओळखली जाणारी ही एक मानक सूची नसलेली यादी असू शकते:
आपण HTML वर बारकाईने लक्ष दिल्यास, आपण हे लक्षात घ्याल की "मुख्यपृष्ठ" दुव्यामध्ये देखील आयअररचा आयडी आहे. हे आपल्याला आपल्या वाचकांसाठी वर्तमान स्थान ओळखणारी एक मेनू तयार करण्याची अनुमती देईल. जरी आपण आत्ता आपल्या साइटवर अशा प्रकारची दृष्य सूचना ठेवण्याची योजना करत नसले तरीही आपण त्या माहितीचा समावेश करू शकता. आपण नंतर सूचना जोडण्याचे ठरविल्यास, आपली साइट तयार करण्यासाठी आपल्याकडे कमी कोडिंग असेल.
कोणत्याही सीएसएस शैली न करता, हे XHTML मेनू मानक unordered यादीत दिसते बुलेट्स आहेत आणि यादीतील आयटम थोडी कंटाळले आहेत. मी प्लेसहोल्डर दुवे वापरत असल्यामुळे, बहुतेक ब्राऊझर क्लिक करण्यायोग्य (अधोरेखित आणि निळ्यामध्ये) म्हणून दुवे प्रदर्शित करणार नाहीत. आपण वेब पृष्ठावर वरील HTML मध्ये पेस्ट केल्यास, आपले नेव्हिगेशन असे दिसेल:
- घर
- उत्पादने
- सेवा
- आमच्याशी संपर्क साधा
हे अतिशय कंटाळवाणे आहे आणि एक मेनू सारखे दिसत नाही पण सूचीमध्ये फक्त काही सीएसएस स्टाइल जोडल्या आहेत, आपण एक मेनू तयार करू शकता जे आपल्याला अभिमान करते.
अनुलंब नेव्हिगेशन मेनू
एक अनुलंब नेव्हिगेशन मेनू लिहिणे खूप सोपे आहे कारण ती एक सामान्य सूचीप्रमाणेच प्रदर्शित करते: वर आणि खाली
सूची आयटम पृष्ठ खाली अनुलंब प्रदर्शित
जेव्हा मी मेन्यू स्टाईल करते, तेव्हा मला बाहेरून सुरुवात करायची असते आणि त्यामध्ये काम करायचे होते. याद्वारे, माझे म्हणणे आहे की मी प्रथम उल # नेव्हिगेशन शैली केली आणि नंतर ली घटक आणि नंतर लिंक, इत्यादीकडे जाणे. या मेनूसाठी, प्रथम आपण मेनूची रूंदी परिभाषित करता. हे सुनिश्चित करेल की मेनू आयटम खूप लांब असले तरी ते उर्वरित लेआउट वर ढकलले जाणार नाहीत किंवा क्षैतिज स्क्रोलिंग करणार नाहीत.
उल # नेव्हिगेशन {रूंदी: 12em; }
एकदा मला रुंदी सेट आला की मी सूचीतील आयटमसह खेळू शकते. यामुळे मला (बुलेट्स टाळण्यासाठी), पार्श्वभूमी रंग, सीमा, मजकूर संरेखन आणि मार्जिन सारख्या गोष्टी सेट करण्याची अनुमती मिळते.
ul # नेव्हिगेशन ली {
सूची-शैली: काहीही नाही;
पार्श्वभूमी-रंग: # 039;
सीमा-शीर्ष: घन 1 पीएक्स # 039;
मजकूर-संरेखन: डावीकडे;
समास: 0;
}
एकदा आपण सूची आयटमसाठी मूलभूत सेट केले की आपण मेनू लिंक क्षेत्रामध्ये कसे दिसते हे प्ले करणे सुरू करू शकता. पहिली शैली UL # नेव्हिगेशन ला ए आणि नंतर A: लिंक, ए: भेट दिली, ए: होव्हर, आणि ए: सक्रिय (आपल्याला हवे असल्यास). लिंक्ससाठी, मला लिंकला ब्लॉक घटक बनवायचे आहे (डीफॉल्ट इन-लाइन ऐवजी) यामुळे त्यांना संपूर्ण लाईची जागा घेण्यास प्रवृत्त केले जाते आणि ते एक पॅरेग्राफप्रमाणेच अधिक कार्य करतात, ज्यामुळे त्यांना मेनू बटणे म्हणून शैली सुलभ होते. बाकीच्या सर्व गोष्टी मी अधोरेखित काढून टाकतो (मजकूर-सजावट: काहीही नाही;), जसे की बटणे मला अधिक बटणांसारखे दिसतात.
परंतु अर्थातच, तुमची रचना वेगळी असू शकते.
ul # नेव्हिगेशन ली ए {
प्रदर्शन: ब्लॉक;
टेक्स्ट-सजावट: काहीही नाही;
पॅडिंग: .25 एएम;
सीमा-तळ: घन 1 पीएक्स # 39 एफ;
सीमा-उजवी: घन 1 पीएक्स # 39 एफ;
}
लक्षात घ्या की प्रदर्शनासह: block; दुवे सेट, मेनू आयटम संपूर्ण बॉक्स नाही फक्त अक्षरे, क्लिक आहे. हे वापरण्यायोग्यतेसाठी देखील चांगले आहे. दुवा रंग सेट करणे सुनिश्चित करा (दुवा, भेट दिलेले, फिरवा आणि सक्रिय) आपण त्यांना डीफॉल्ट निळ्या, लाल आणि जांभळ्यापेक्षा भिन्न असण्याची इच्छा असल्यास
a: दुवा, एक: भेट दिलेले {color: #fff; }
a: फिरवा, एक: क्रियाशील {रंग: # 000; }
मला पार्श्वभूमी रंग बदलून हॉवर स्टेट थोडा अधिक लक्ष देणे आवडेल.
a: फिरविणे {पार्श्वभूमी-रंग: #fff; }
आपण अनुलंब मेनूची अधिक उदाहरणे इच्छित असल्यास, खालील सूचीचा सल्ला घ्या.
- एक शैलीदार अनुलंब मेनू
- एक मूल उभे मेनू टेम्पलेट
- आपल्यासह एक स्टाईल वर्टिकल मेनू येथे आहे
- आपल्या बरोबर एक मूलभूत वर्टिकल मेनू टेम्पलेट येथे आहेत
क्षैतिज नेव्हिगेशन मेनू
क्षैतिज नेव्हिगेशन मेनू तयार करणे वर्टिकल नेव्हीगेशन मेनूपेक्षा किंचित जास्त कठीण आहे कारण HTML ओळी अनुलंब प्रदर्शनास दर्शवितात हे आपण ऑफसेट करावे. क्षैतिज मेनूच्या रूपात, प्रथम आपली नेव्हिगेशन मेनू सूची तयार करा:
क्षैतिज मेनू तयार करण्यासाठी, आपण वर्टिअल मेनूसह केले तसे कार्य करा बाहेरून प्रारंभ करा आणि कार्य करा. मी माझ्या नेव्हिगेशन डाव्या कोपर्यात सुरू करू इच्छित असल्यामुळे, मी ते डावे मार्जिन आणि पॅडिंगसह सेट केले आहे आणि मी ते डाव्या बाजूला फ्लोट करतो. आपल्याला रुंदी सेट करण्याची सवय देखील घ्यावी जेणेकरून आपला मेनू आपल्या इच्छेपेक्षा अधिक किंवा कमी जागा घेत नाही. क्षैतिज मेनूसाठी, हे सहसा डिझाइनची पूर्ण रूंदी असते. मी वाचण्यासाठी सोपे करण्यासाठी संपूर्ण सूचीमध्ये पार्श्वभूमी रंग देखील जोडला आहे.
उल # नेव्हिगेशन {
फ्लोट: डावे;
समास: 0;
पॅडिंग: 0;
रुंदीः 100%;
पार्श्वभूमी-रंग: # 039;
}
परंतु क्षैतिज नेव्हिगेशन मेनूवरील रहस्य सूची आयटममध्ये आहे. सूची आयटम साधारणपणे घटक अवरोधित करते, ज्याचा अर्थ ते प्रत्येकाच्या आधी आणि नंतर एक नवीन रेखा ठेवतील. ब्लॉकमधील इनलाइनवर डिस्प्लेवर स्विच करून, आपण सूची घटकांना क्षैतिजरित्या एकापर्यंत दुसर्या ओळीवर लावण्यासाठी सक्ती करता.
ul # नेव्हिगेशन li {display: inline; }
मी त्या दुय्यम नॅव्हिगेशन मेनूमध्ये त्याच रंग आणि मजकूर सजावट यांच्याशी त्यांचा व्यवहार केल्याप्रमाणे तपासून पाहतो. मी जेव्हा बटन दाबून ठेवते तेव्हा मी एक वरची सीमा जोडते. मी काढलेली एकमेव गोष्ट म्हणजे प्रदर्शन: ब्लॉक; कारण त्या नवीन ओळी पुन्हा चालू होतील आणि क्षैतिज मेनु नष्ट करतील.
ul # नेव्हिगेशन ली ए {
टेक्स्ट-सजावट: काहीही नाही;
पॅडिंग: .25 एएम 1em;
सीमा-तळ: घन 1 पीएक्स # 39 एफ;
सीमा-शीर्ष: घनता 1px # 39f;
सीमा-उजवी: घन 1 पीएक्स # 39 एफ;
}
a: दुवा, एक: भेट दिलेले {color: #fff; }
ul # नेव्हिगेशन ली ए: होव्हर {
पार्श्वभूमी-रंग: #fff;
रंग: # 000;
}
आपण येथे आहात स्थान माहिती
एचटीएमएलचा आणखी एक पैलू आपणरेरे आयडेंटीफायर आहे. आपण आपल्या वापरकर्त्याचे वर्तमान स्थान दर्शवण्यासाठी आपला मेनू सुधारित करू इच्छित असल्यास, फक्त वेगळ्या पार्श्वभूमीचा रंग किंवा इतर शैली परिभाषित करण्यासाठी हा ID वापरा. त्या ID विशेषतेस इतर पृष्ठांवरील योग्य मेनू आयटमवर हलवा जेणेकरून वर्तमान पृष्ठ नेहमी हायलाइट केलेले असेल.
ul # नेव्हिगेशन li # youarehere एक {background-color: # 09f; }
आपण आपल्या पृष्ठावरील या शैलींना एकत्र केल्यास, आपण आपल्या साइटवर कार्य करण्यास एक क्षैतिज किंवा अनुलंब मेनू बार तयार करू शकता परंतु भविष्यात ती डाउनलोड करण्यास जलद आणि अद्ययावत करणे सोपे आहे. एक्सएचटीएमएल + सीएसएस वापरणे आपल्या सूचनेसाठी डिझाइनसाठी खूप शक्तिशाली साधन बनविते.
आपण आडवे मेन्यूच्या अधिक उदाहरणे इच्छित असल्यास, पुढील गोष्टींचा सल्ला घ्या
- एक शैलीदार क्षैतिज मेनू
- मूलभूत क्षैतिज मेनू टेम्पलेट
- आपल्यासह एक शैलीदार क्षैतिज मेनू येथे आहे
- आपल्यासह एक मूलभूत क्षैतिज मेनू टेम्पलेट येथे आहेत