साधा क्षैतिज ड्रॉपडाउन मेनू. सूची आयटम क्षैतिजरित्या कसे व्यवस्थित करावे

मेनू li ( फ्लोट: डावीकडे; )

आमचा संपूर्ण मेनू आता आडवा झाला आहे.

तुम्हाला नक्की काय झाले आणि फ्लोट प्रॉपर्टी काय करते हे समजत नसल्यास, मी शिफारस करतो की तुम्ही या मालमत्तेची माहिती गुगल करा आणि त्याचा सखोल अभ्यास करा, कारण
लेआउटचे एकही पान त्याशिवाय करू शकत नाही, हे मी तुम्हाला निश्चितपणे सांगू शकतो. ठीक आहे, चला सुरू ठेवूया!

मेनू li a( display:block;/* लिंकला ब्लॉक घटक बनवा*/ padding:12px 20px;/* पॅडिंग सेट करा */ text-decoration: none; /* अधोरेखित काढा */ color:#fff;/* रंगाचे दुवे पांढरे सेट करा */ background:#444;/* पार्श्वभूमीचा रंग गडद करा */ font:14px Verdana, sans-serif;/* फॉन्ट आकार आणि नाव सेट करा */ )

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

आम्हाला काय मिळाले ते पाहूया, ब्राउझर पृष्ठ रीफ्रेश करा आणि तेथे जा!:

जसे आपण पाहू शकता, ते वाईट दिसत नाही, आम्ही असे म्हणू शकतो की, तत्वतः, आमचा मेनू तयार आहे. फिरत असताना लिंक्सचा प्रकाश सेट करणे ही फक्त एक गोष्ट करणे आवश्यक आहे आणि मला असे वाटते की आयटममधील विभाजकांसह मेनू अधिक चांगला दिसेल.

चला सीमांककांसह प्रारंभ करूया:

मेनू li( सीमा-डावीकडे:1px ठोस #666; ) .मेनू li:first-child( सीमा-डावीकडे:काहीही नाही; )

आम्ही येथे काय केले? होय, सर्व काही अगदी सोपे आहे, आम्ही आमच्या गुणांसाठी सेट करतो (

पुन्हा काय मिळाले ते पाहूया:

माझ्या मते, हे सीमांककांसह बरेच चांगले आहे.

मेन्यू li a:hover(पार्श्वभूमी:#888;)

पुन्हा एक विशेष स्यूडो-क्लास वापरून, यावेळी फिरवा, आम्ही त्यावर फिरवत असताना दुव्याचा रंग सेट करतो, पहा:

मला वाटते की ते छान आहे :) मला आशा आहे की तुम्ही माझ्यासारख्याच मेनूसह समाप्त व्हाल.

इथेच मी हा धडा संपवणार आहे, मला खरोखर आशा आहे की ते तुमच्यासाठी उपयुक्त ठरले आहे आणि आता तुम्हाला शुद्ध html आणि css वापरून एक साधा क्षैतिज मेनू कसा तयार करायचा हे माहित आहे. अर्थात, आम्ही एक-स्तरीय मेनू तयार केला आहे; ते दोन-स्तरीय मेनूसह (नेस्टेड सूचीसह) थोडे अधिक क्लिष्ट असेल, परंतु हा दुसऱ्या धड्याचा विषय आहे, हे सर्व माझ्यासाठी आहे. पुन्हा या, मला आनंद होईल !!!

ड्रॉप-डाउन सूचीच्या स्वरूपात इंटरफेस घटकाची उत्कृष्ट शैली.

जेव्हा तुम्ही बटणावर माउस फिरवता, तेव्हा वर एक पॅनेल दिसेल.

ग्लो इफेक्टसह ॲनिमेटेड जावास्क्रिप्ट मेनू.

jQuery वापरून ताजे, छान मेनू.

मोठ्या संख्येने आयटमसह मेनूची अंमलबजावणी. जेव्हा तुम्ही माउस कर्सर वर किंवा खाली हलवता तेव्हा स्क्रोल करते.

पृष्ठावरील इच्छित विभागात गुळगुळीत स्क्रोलिंग. jQuery वन पेज नेव्हिगेशन प्लगइन.

नवीन jQuery प्लगइन. ॲनिमेटेड साइट नेव्हिगेशनची उत्कृष्ट अंमलबजावणी. जेव्हा तुम्ही मेनू आयटममधून जाता, तेव्हा वर्णन आणि संभाव्य दुव्यांसह एक ब्लॉक पॉप अप होतो आणि निवडलेल्या आयटमवर अवलंबून, पृष्ठाची पार्श्वभूमी बदलते, जी ब्राउझर विंडोच्या आकाराकडे दुर्लक्ष करून संपूर्ण स्क्रीन भरण्यासाठी पसरते. डेमो पेज नक्की पहा.

पॉप-अप आयटमसह ॲनिमेटेड मेनू.

जेव्हा तुम्ही पृष्ठ खाली स्क्रोल करता, तेव्हा मेनू स्क्रीनच्या शीर्षस्थानी स्थिर राहतो.

मोठ्या संख्येने आयटमसह उभ्या मेनूची अंमलबजावणी करण्यासाठी. माऊस व्हील वापरून किंवा “Previos” आणि “Next” लिंक्स वापरून आयटममधून स्क्रोलिंग केले जाते.

ऍपल शैलीमध्ये नवीन मेनू. ते पूर्वीपेक्षा जास्त गडद दिसत आहे, परंतु कमी गोंडस नाही.

पार्श्वभूमी प्रभावासह ड्रॉपडाउन मेनू. मेनू उप-आयटम वरच्या दिशेने विस्तृत होतात. जेव्हा तुम्ही मेनू आयटमवर फिरता, तेव्हा पार्श्वभूमी प्रतिमा बदलते.

ॲनिमेटेड मेनू. मेनू आयटम चिन्ह आणि वर्णन स्वरूपात सादर केले जातात. मेनू आयटमवर माउस फिरवताना अनेक उत्कृष्ट प्रभाव. 8 प्रभाव आहेत, ते सर्व पाहण्यासाठी - डेमो पृष्ठावरील Exemple1-Exemple8 लिंक्सचे अनुसरण करा.

अनुलंब आणि क्षैतिज स्क्रोलिंग मेनू. मेनूवर मोठ्या संख्येने आयटम असल्यास एक चांगला उपाय.

जेव्हा तुम्ही विशिष्ट क्षेत्रावर उजवे-क्लिक करता तेव्हा एक मेनू पॉप अप होतो.

जेव्हा तुम्ही मेनू आयटम निवडता, तेव्हा उजवीकडे सबमेनू आयटम प्रदर्शित केले जातात.

मूळ jQuery CSS3 मेनू 7 भिन्न शैलींमध्ये येतो. जेव्हा तुम्ही तुमचा माउस एका मेनू आयटमवर फिरवता, तेव्हा बाकीचे अस्पष्ट दिसते.

10 सर्जनशील ॲनिमेटेड मेनू. विविध प्रभाव आणि संक्रमणांसह क्षैतिज आणि अनुलंब CSS3 मेनू.

संग्रहामध्ये मूळ मेनू PSD फाइल देखील समाविष्ट आहे.

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

जेव्हा तुम्ही तुमचा माउस एका इमेजवर फिरवता तेव्हा एक उत्कृष्ट प्रभाव. प्रभाव काहीसा वर वर्णन केलेल्या jQDock ची आठवण करून देणारा आहे.

क्षैतिज, अनुलंब मेनू. मनोरंजक प्रभाव.

एक अतिशय मनोरंजक प्रभाव. पोर्टफोलिओ वेबसाइट डिझाइन करण्यासाठी योग्य.

होवरवर पॉपअप होणाऱ्या लघुप्रतिमांचा मनोरंजक प्रभाव.

आयटम दरम्यान छान संक्रमण प्रभाव.

मेनू आयटम लघुप्रतिमा स्वरूपात सादर केले जातात.

शोध बॉक्ससह नेव्हिगेशन बार जो तुम्ही पृष्ठ खाली स्क्रोल करता तेव्हा पारदर्शक होतो.

छान उभ्या मेनू. जेव्हा तुम्ही कर्सर फिरवता, तेव्हा एक मेनू आयटम पॉप अप होतो.

मेनू आयटमवर कर्सर फिरवताना एक मनोरंजक प्रभाव.

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

मेनू आयटमवर माउस फिरवताना एक मनोरंजक प्रभाव.

राखाडी टोनमध्ये ताजे ॲनिमेटेड मेनू.

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

साइट नेव्हिगेशन 4 चित्रांच्या स्वरूपात सादर केले आहे, जेव्हा तुम्ही त्यावर फिरता तेव्हा तुम्हाला एक मनोरंजक ॲनिमेटेड प्रभाव दिसेल.

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

हॅबर, हॅलो!

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

मी त्यांना मिस्टर क्लाउड आयडीई उत्पादन गटात पोस्ट करायचो. गेफेस्ट, हे 5-8 सोल्यूशन्सचे असेंब्ली होते. पण आता माझ्याकडे वेगवेगळ्या विषयांच्या (बटण, मेनू, टूलटिप वगैरे) १५-३० स्क्रिप्ट जमा होऊ लागल्या आहेत.

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

या पुनरावलोकनात आम्ही बहु-स्तरीय मेनू पाहू.

सपाट क्षैतिज नेव्हिगेशन

सहजतेने दिसणाऱ्या सबमेनूसह सुंदर नेव्हिगेशन बार. कोड चांगली रचना केलेला आहे आणि js वापरतो. वापरलेल्या वैशिष्ट्यांनुसार, ते ie8+ मध्ये कार्य करते.
http://codepen.io/andytran/pen/kmAEy

संरेखित ड्रॉपडाउनसह मटेरियल नेव्ही हेडर

दोन-स्तंभ सबमेनूसह अनुकूली लिंक बार. सर्व काही css आणि html मध्ये केले जाते. वापरलेले css3 निवडक जे ie8 मध्ये समर्थित नाहीत.
http://codepen.io/colewaldrip/pen/KpRwgQ

गुळगुळीत एकॉर्डियन ड्रॉपडाउन मेनू

सहजतेने उघडणाऱ्या घटकांसह स्टाइलिश अनुलंब मेनू. संक्रमण, ट्रान्सफॉर्म जेएस कोड वापरला जातो.
http://codepen.io/fainder/pen/AydHJ

शुद्ध CSS गडद इनलाइन नेव्हिगेशन मेनू

ionicons मधील चिन्हांसह गडद अनुलंब नेव्हिगेशन बार. JavaScript वापरले जाते. ie8 मध्ये हे बहुधा ॲनिमेशनशिवाय काम करेल.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

ॲनिमेशनसह शुद्ध CSS3 मेगा ड्रॉपडाउन मेनू

दोन आउटपुट स्वरूपांसह स्टाइलिश मेनू: क्षैतिज आणि अनुलंब. आयकॉन आणि CSS3 ॲनिमेशन वापरले जाते. ie8 मध्ये हे नक्कीच भयानक दिसेल, परंतु इतर ब्राउझरमध्ये सर्वकाही छान आहे.
अनुलंब दुवा: http://codepen.io/rizky_k_r/full/sqcAn/
आडव्याशी लिंक: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 ड्रॉपडाउन मेनू

मोठ्या घटकांसह क्षैतिज मेनू आणि लिंक्सची ड्रॉप-डाउन सूची. js शिवाय स्वच्छ आणि किमान कोड.
http://codepen.io/ojbravo/pen/tIacg

साधा शुद्ध CSS ड्रॉपडाउन मेनू

साधा पण तरतरीत क्षैतिज मेनू. फॉन्ट-अप्रतिम वापरते. सर्व काही जेएसशिवाय css आणि html वर कार्य करते. ते ie8 मध्ये कार्य करेल.
http://codepen.io/Responsive/pen/raNrEW

बूटस्ट्रॅप 3 मेगा-ड्रॉपडाउन मेनू

ऑनलाइन स्टोअरसाठी एक उत्कृष्ट उपाय. श्रेणी आणि मोठ्या प्रतिमांचे अनेक स्तर प्रदर्शित करते (उदाहरणार्थ, विक्रीवर असलेले उत्पादन). हे बूस्ट्रॅप 3 वर आधारित आहे.
http://codepen.io/organizedchaos/full/rwlhd/

फ्लॅट नेव्हिगेशन

गुळगुळीत सबमेनूसह स्टाइलिश नेव्हिगेशन बार. जुन्या ब्राउझरमध्ये ते समस्या प्रदर्शित करेल.
http://codepen.io/andytran/pen/YPvQQN

3D नेस्टेड नेव्हिगेशन

जेएसशिवाय अतिशय मस्त ॲनिमेशनसह क्षैतिज मेनू!
http://codepen.io/devilishalchemist/pen/wBGVor

प्रतिसाद मेगा मेनू - नेव्हिगेशन

क्षैतिज प्रतिसाद मेनू. हे चांगले दिसते, परंतु मोबाइल आवृत्ती थोडी लंगडी आहे. CSS, html आणि js वापरले जातात.
http://codepen.io/samiralley/pen/xvFdc

शुद्ध Css3 मेनू

मूळ मेनू. js शिवाय साध्या आणि स्वच्छ कोडसह. "व्वा" प्रभावांसाठी वापरा.
http://codepen.io/Sonick/pen/xJagi

पूर्ण CSS3 ड्रॉपडाउन मेनू

एका नेस्टिंग लेव्हलसह रंगीत ड्रॉप-डाउन मेनू. font-wesome, html आणि css मधील चिन्हे वापरली जातात.
http://codepen.io/daniesy/pen/pfxFi

Css3 फक्त ड्रॉपडाउन मेनू

नेस्टिंगच्या तीन स्तरांसह बऱ्यापैकी चांगला क्षैतिज मेनू. js शिवाय कार्य करते.
http://codepen.io/riogrande/pen/ahBrb

ड्रॉपडाउन मेनू

घटकांच्या नेस्टेड सूचीच्या देखाव्याच्या मूळ प्रभावासह किमान मेनू. मला आनंद आहे की हे समाधान जावास्क्रिप्टशिवाय देखील आहे.
http://codepen.io/kkrueger/pen/qfoLa

शुद्ध CSS ड्रॉपडाउन मेनू

एक आदिम पण प्रभावी उपाय. फक्त css आणि html.
http://codepen.io/andornagy/pen/xhiJH

पुल मेनू - मेनू परस्परसंवाद संकल्पना

मोबाईल फोनसाठी मनोरंजक मेनू संकल्पना. मी यापूर्वी असे काहीही पाहिले नाही. html, css आणि javascript वापरते.
http://codepen.io/fbrz/pen/bNdMwZ

साधा ड्रॉपडाउन मेनू बनवा

स्वच्छ आणि साधा कोड, जेएस नाही. ते ie8 मध्ये नक्कीच कार्य करेल.
http://codepen.io/nyekrip/pen/pJoYgb

शुद्ध CSS ड्रॉपडाउन

उपाय वाईट नाही, पण तो खूप वर्ग वापरतो. मला आनंद आहे की js नाही.
http://codepen.io/jonathlee/pen/mJMzgR

ड्रॉपडाउन मेनू

किमान जावास्क्रिप्ट कोडसह छान अनुलंब मेनू. JQuery वापरली जात नाही!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 ड्रॉपडाउन मेनू

अतिरिक्त मथळ्यांसह क्षैतिज मेनू तुमची वेबसाइट चांगली सजवू शकतो. कोड सोपा आणि स्पष्ट आहे. Javascript वापरली जात नाही.
http://codepen.io/ibeeback/pen/qdEZjR

भरपूर कोड (html, css आणि js) सह सुंदर समाधान. 3 सबमेनू फॉरमॅट तयार केले आहेत. समाधान ऑनलाइन स्टोअरसाठी योग्य आहे.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 मेनू ड्रॉपडाउन (विशेष समाधान)!

तेरा (13) ॲनिमेशन पर्यायांसह गडद क्षैतिज मेनू! मी तुम्हाला ते वाचण्याचा नक्कीच सल्ला देतो, ते दैनंदिन जीवनात उपयुक्त ठरेल.
http://codepen.io/cmcg/pen/ofFiz

P.S.
मला आशा आहे की तुम्हाला 23 उपायांचा संग्रह आवडला असेल. तुम्हाला त्यांचे वाचन सुरू ठेवायचे असल्यास, खालील सर्वेक्षण करा.
प्रत्येकजण आपल्या कामाचा आनंद घ्या.

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

खाली या स्तंभामध्ये मध्यभागी असलेला क्षैतिज मेनू आहे, ज्यामध्ये दुसरा टॅब सक्रिय केला आहे. मेनू नेहमी मध्यभागी आणि कार्यशील राहील याची खात्री करण्यासाठी तुम्ही तुमच्या ब्राउझर विंडो किंवा पृष्ठाचा आकार बदलण्याचा प्रयत्न करू शकता.

डेमो पृष्ठावर आपण क्षैतिज मध्यवर्ती मेनूसाठी अनेक डिझाइन पर्याय पाहू शकता. त्यापैकी कोणताही तुमच्या प्रकल्पांमध्ये वापरला जाऊ शकतो.

या ट्यूटोरियलमध्ये दर्शविलेले सर्व मेनू एक साधी रचना वापरतात. घटकामध्ये ठेवलेल्या लिंक्सची ही एक सामान्य अक्रमित यादी आहे div.

• पहिला बुकमार्क
• दुसरा बुकमार्क
• तिसरा टॅब
• चौथा टॅब

खाली मेनू मध्यभागी करण्यासाठी वापरला जाणारा संपूर्ण CSS कोड आहे. ऑपरेटिंग तत्त्वाचे स्पष्टीकरण धड्यात नंतर दिले आहे.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style : none; padding: centre: 50% ; 3px 10px; रंग: #000; रेखा-उंची: 1.3em; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( रंग:# fff; पार्श्वभूमी:#000;

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

घटक div(ब्लॉक) विस्थापनाशिवाय त्याच्यासाठी उपलब्ध असलेल्या संपूर्ण रुंदीपर्यंत पसरलेले आहे.

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

चला एक मानक डावीकडे संरेखित मेनू घेऊ आणि चरण-दर-चरण रीमेक करू. स्पष्टतेसाठी, वस्तू वेगवेगळ्या रंगात रंगवल्या जातात, त्यामुळे काय कुठे होते ते लगेच स्पष्ट होते.

कृपया खालील मुद्दे लक्षात घ्या.

• घटक केंद्रीत मेनू div(निळा आयत) डावीकडे ऑफसेट आहे, परंतु त्याची रुंदी 100% आहे, म्हणून ती संपूर्ण पृष्ठावर पसरलेली राहते.
• घटक उल(गुलाबी आयत) घटकाच्या आत आहे मध्यवर्ती मेनू divआणि डावीकडे हलते. याचा अर्थ ते त्याच्या सामग्रीच्या रुंदीपर्यंत, म्हणजेच सर्व बुकमार्कच्या एकूण रुंदीपर्यंत संकुचित केले जाईल.
• सर्व li घटक (हिरवे आयत) घटकाच्या आत आहेत उलआणि डावीकडे जा. अशा प्रकारे, ते त्यांच्यातील दुव्याच्या आकारात संकुचित केले जातात आणि एका क्षैतिज ओळीत रांगेत असतात.
• प्रत्येक दुव्याच्या आत (नारिंगी आयत) बुकमार्क मजकूर प्रदर्शित केला जातो: बुकमार्क 1, बुकमार्क 2, आणि असेच.

मग आम्ही घटक ऑफसेट करतो उलस्थान वापरून 50% उजवीकडे:सापेक्ष; . जेव्हा घटक या परिस्थितीत टक्केवारीनुसार ऑफसेट केला जातो, तेव्हा हे लक्षात ठेवणे महत्त्वाचे आहे की त्यात समाविष्ट असलेल्या घटकांची एकूण रुंदी ही त्याची रुंदी नाही. आमच्या बाबतीत, ऑफसेट अर्ध्या ब्राउझर विंडोने होतो (किंवा प्रदर्शनासाठी उपलब्ध जागा). आणि पुढच्या पायरीवर जाऊया.

बाकी सर्व घटकांना हलवायचे आहे li 50% बाकी. हे आमच्या ul घटकाच्या रुंदीच्या 50% आहे (ज्या कंटेनरमध्ये मेनू आहे). अशा प्रकारे, बुकमार्क विंडोच्या मध्यभागी तंतोतंत शिफ्ट केले जातात.

ही केंद्रीकरण पद्धत वापरताना, लक्षात ठेवण्यासाठी अनेक महत्त्वाचे मुद्दे आहेत:

• घटक पासून उलअंशतः खिडकीच्या पलीकडे विस्तारते, याचा परिणाम स्क्रोल बारच्या प्रदर्शनात होतो. म्हणून, आपल्याला overflow:hidden; नियम वापरण्याची आवश्यकता आहे. घटकासाठी केंद्रीत मेनू div. अशा प्रकारे, घटकाचा protruding भाग divकापला जाईल.
• घटक पासून उलबुकमार्कशी संरेखित केलेले नाही, तुम्ही त्यासाठी कोणत्याही व्हिज्युअल शैली वापरू शकत नाही. उल घटक पार्श्वभूमी रंगाशिवाय आणि बॉर्डरशिवाय सोडा जेणेकरून ते पूर्णपणे अदृश्य होईल. आणि बुकमार्कसाठीच्या शैली केवळ घटकांसाठी वापरल्या पाहिजेत li.
• तुम्हाला पहिल्या आणि शेवटच्या बुकमार्कसाठी विशेष शैली सेट करायची असल्यास, तुम्हाला पहिल्या आणि शेवटच्या घटकांसाठी एक वर्ग जोडणे आवश्यक आहे. li, त्यामुळे तुम्ही त्यांना स्वतंत्रपणे स्टाईल करू शकता.

प्रस्तावित उपाय सर्व ब्राउझरशी सुसंगत आहे, JavaScript वापरत नाही आणि आकार बदलण्यायोग्य मजकुराचे समर्थन करते.