उभ्या CSS मेनू: तो स्वत: करत

काही वेबमास्टरसाठी सुरवातीपासून सोपे घटक आधीच अस्तित्वात पासून विकसित वेळ खर्च करू इच्छित नाही. ते लांब आहे की काहीतरी आपला वेळ वाया मध्ये नाही आहे की विश्वास. खरं तर, फक्त HTML आणि CSS प्राविण्य जे, हे महत्त्वाचे आहे त्यांचे काम उत्तम समज आहे स्वत: ला खूप काही करणे आहे. हे मेन्यू लागू होते. उभ्या CSS मेनू तयार करा. हे Javascript आणि JQuery वापर न करता, केवळ HTML आणि CSS आधारित जाईल. प्रत्येक मेनू साइट पृष्ठे होऊ दुवे यादी आहे.

पायऱ्या

एक साधी तयार करण्यासाठी उभ्या मेनू CSS, तुम्ही खालील पायऱ्या आवश्यक आहे:

1. प्रथम, दुवे (कोड HTML वापर करून), मेनू होईल जे सूची निश्चित. त्यांना एक नाव द्या, उदाहरणार्थ, खालीलप्रमाणे आहेत:

1. मुख्यपृष्ठ.
2. आमचे इतिहास.
3. मार्गदर्शन.
4. सेवा.
5. संपर्क.

आपण CSS मदतीने इच्छा 2. मग दुवे शैली.

आम्ही लिहू HTML कोड, my_Vmenu.html फाइल मध्ये ठेवा आणि तो ब्राउझर मध्ये कसा दिसेल:

या आधारावर (इमारत) आमच्या मेनू आहे. # 1, # 2, इ संदर्भ बदलले पाहिजे. तो एक ब्राउझर मध्ये कसे दिसते ते पहा. चित्र आपल्याला आवडत नाही. आता आम्ही एक पूर्ण उभ्या CSS मेनू करण्यासाठी, शैली घटक वर्णन सुरू करणे आवश्यक आहे.

वर्णन शैली

आपण साइट अशा एक महत्वाचा घटक देखावा सुधारण्यासाठी इच्छिता सर्वकाही सेट एक फाइल my_Vmenu.css तयार करा. कोड येथे, उभ्या CSS मेनू नवचैतन्य निर्माण करेल परिचय आहे. तो आणि नवीन फाइल लिहा, आणि नंतर आम्ही एक जवळ घेतो मुख्य ओळी दिले आहेत की अर्थ पाहू.

तपशीलवार वर्णन वापरले शैलीपत्रक

आता आमच्या CSS उभ्या मेनू तपशील विचार:

यादी-शैली-प्रकार आपण मार्कर यादी काढू देते. मार्जिन व कपडे करण्यासाठी "0" सेट करून यादी अतिरिक्त पॅडिंग काढून टाका. HTML कोड पासून पाहिली जाऊ शकतात, आमच्या मेनू एक सूची असते आणि शैली CSS वापरून व्याख्या आहेत.

उल # my_Vmenu - संपूर्ण यादी एकूण शैली.

उल # my_Vmenu li एक - टॅग li दरम्यान शैली दुवे.

उल # my_Vmenu li एक: फिरवा - मेनू आयटम विचाराधीन प्रकार वर्णन एक लोकांना hovers तेव्हा एका वेळी.

उल # my_Vmenu li कालावधी - मजकूर वर्णन (शीर्षक मेनू).

की my_Vmenu.css my_Vmenu.html फाइल्स आणि त्याच संचयीका जतन करणे आवश्यक आहे हे लक्षात ठेवा. तथापि, ते विविध फोल्डर मध्ये स्थित जाऊ शकते, पण नंतर ते my_Vmenu.css करण्यासाठी my_Vmenu.html फाइल पथ मध्ये नोंदणी करण्यासाठी महत्वाचे आहे. कारण अनेकदा या समस्या नवागतांनी, काळजी घ्या.

शैली एक html-फाइल मध्ये डोके टॅग दरम्यान कनेक्ट करणे आवश्यक आहे. menu_1.png आणि menu_2.png - या सामान्य राज्य आणि मागेपुढे करणे चित्र मेन्यू घटक चित्र आहे.

तो, प्रतिमा स्वतंत्र फोल्डर मध्ये प्रतिमा जतन करण्यासाठी तो my_images नाव, पण नंतर CSS कोड समायोजित चांगले आहे. url (my_images / menu_1.png) आणि url (my_images / menu_2.png): या प्रतिमा दर्शविले आहेत जेथे लिहा, ते या डिरेक्टरी मध्ये.

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

आमच्या उभ्या मेनू

तुम्ही बघू शकता, सहज तयार करण्यासाठी उभ्या CSS मेनू. ज्ञान माहितीच्या आधारे आपण सुंदर आणि आपल्या वेब साइट अभ्यागतांना आकर्षक करण्यासाठी सक्षम होतील! आपल्या साइटवर म्हणुन आपल्या कल्पना, आणि नंतर एक तरतरीत मेनू वापरा.