نحوه ایجاد منوی افقی css تبدیل منو به عمودی

HTML5 IE Cr Op Sa Fx

قرار دادن منوی افقی در مرکز می تواند کار دشواری باشد، به خصوص برای کسانی که تازه وارد CSS شده اند. یافتن راه‌حل‌ها منجر به فهرست بسیار محدودی از روش‌ها می‌شود، که بیشتر آنها به CSS، ترفندهای جاوا اسکریپت یا استفاده از قوانین غیر استانداردی که توسط همه مرورگرها پشتیبانی نمی‌شوند، متکی هستند. در این آموزش، روشی را برای قرار دادن منوی افقی در مرکز قرار می دهیم که فقط از قوانین استاندارد CSS استفاده می کند و در همه مرورگرها کار می کند.

نمونه ای از منوی مرکزی

در زیر یک منوی افقی در مرکز این ستون وجود دارد که در آن تب دوم فعال شده است. می توانید اندازه پنجره یا صفحه مرورگر را تغییر دهید تا مطمئن شوید که منو همیشه در مرکز و پاسخگو باقی می ماند.

در صفحه نمایشی، می توانید چندین گزینه طراحی برای یک منوی افقی در مرکز مشاهده کنید. هر یک از آنها را می توان در پروژه های خود استفاده کرد.

نشانه گذاری HTML

تمام منوهای نشان داده شده در این درس از ساختار ساده ای استفاده می کنند. این یک لیست معمولی نامرتب از پیوندهای قرار داده شده در یک عنصر است بخش.

کد CSS منوی مرکزی

در زیر CSS کامل است که منو را در مرکز قرار می دهد. و توضیحاتی در مورد اصل کار در ادامه درس داده شده است.

#centeredmenu (float: چپ؛ عرض: 100%؛ پس‌زمینه: #fff؛ حاشیه پایین: 4px جامد # 000؛ سرریز: پنهان؛ موقعیت: نسبی؛) #centeredmenu ul (روشن: چپ؛ شناور: سمت چپ؛ سبک فهرست : هیچ؛ حاشیه: 0؛ بالشتک: 0؛ موقعیت: نسبی؛ سمت چپ: 50 درصد؛ تراز متن: مرکز؛) #centeredmenu ul li (نمایش: بلوک؛ شناور: سمت چپ؛ فهرست به سبک: هیچ؛ حاشیه: 0. بالشتک: 0؛ موقعیت: نسبی؛ سمت راست: 50%؛) #منو مرکزی ul li a (نمایش: بلوک؛ حاشیه: 0 0 0 1 پیکسل؛ بالشتک: 3 پیکسل 10 پیکسل؛ پس‌زمینه: #ddd؛ رنگ: # 000؛ متن-تزیین: هیچ‌کدام؛ ارتفاع خط: 1.3em؛) #مرکز منوی اول لی a: شناور (پس‌زمینه: # 369؛ رنگ: #fff;) #centeredmenu ul li a.active، #centeredmenu ul li a.active: شناور (رنگ: # fff؛ پس‌زمینه: # 000؛ وزن قلم: پررنگ؛)

روش مرکز سازی چگونه کار می کند

این روش بر اساس موقعیت نسبی عناصر بلوک شناور در یکدیگر است. ابتدا، بیایید ببینیم که چگونه عناصر در هنگام جابجایی تغییر اندازه می دهند.

عنصر بخش(بلوک)، بدون افست، تا تمام عرض موجود در دسترس آن کشیده می شود.

اما اگر عنصر div را به سمت چپ حرکت دهیم، به طور خودکار کوچک می شود تا با محتوای آن مطابقت داشته باشد. فشرده سازی کلید اجرای این روش برای مرکز دادن منوها است. به انتقال منو به موقعیت صحیح کمک می کند.

منوی استاندارد تراز چپ

بیایید یک منوی استاندارد تراز چپ را انتخاب کنیم و گام به گام آن را دوباره طراحی کنیم. برای وضوح، اقلام در رنگ های مختلف رنگ می شوند، بنابراین بلافاصله مشخص می شود که چه چیزی در کجا سرمایه گذاری شده است.

به نکات زیر توجه کنید:

• عنصر بخش منوی مرکزی(مستطیل آبی) به سمت چپ افست شده است، اما 100٪ عرض دارد، بنابراین کشیده می ماند تا کل صفحه را پر کند.
• عنصر ul(مستطیل صورتی) داخل عنصر است منوی مرکزی بخشو به سمت چپ جابه جا می شود. این بدان معنی است که به عرض محتوای خود، یعنی به عرض کل همه نشانک ها کوچک می شود.
• تمام عناصر li (مستطیل های سبز) در داخل عنصر قرار دارند ulو به سمت چپ حرکت کنید. بنابراین، آنها به اندازه پیوندهای موجود در آنها کوچک می شوند و در یک خط افقی قرار می گیرند.
• در داخل هر پیوند (مستطیل های نارنجی) متن نشانک نمایش داده می شود: نشانک 1، نشانک 2 و غیره.

تغییر موقعیت لیست نامرتب

سپس عنصر را افست می کنیم ulبه سمت راست 50٪ با استفاده از موقعیت: نسبی; ... هنگامی که یک عنصر با درصدی تحت این شرایط جبران می شود، مهم است که به یاد داشته باشید که عرض کل عناصر موجود در آن، عرض آن نیست. در مورد ما، افست توسط نیمی از پنجره مرورگر (یا فضای موجود برای نمایش) رخ می دهد. در نتیجه، منوی ما از وسط پنجره شروع می شود و تا حدی به خارج از آن گسترش می یابد. و به مرحله بعدی بروید.

تغییر موقعیت همه آیتم های منو

تنها جابجایی تمام عناصر باقی مانده است لی 50 درصد باقی مانده است. این 50٪ از عرض عنصر ul ما (محفظه ای است که شامل منو است). بنابراین، زبانه ها دقیقاً به مرکز پنجره منتقل می شوند.

چند نکته مهم

هنگام استفاده از این روش مرکز دهی باید به چند نکته مهم توجه داشت:

• از آنجایی که عنصر ulتا حدی به خارج از پنجره گسترش می یابد، این منجر به نمایش نوارهای اسکرول می شود. بنابراین، شما باید از سرریز استفاده کنید: قانون پنهان; برای عنصر بخش منوی مرکزی... بنابراین، قسمت بیرون زده عنصر بخشقطع خواهد شد.
• از آنجایی که عنصر ulبا بوک مارک ها تراز نیست، نمی توانید از هیچ سبک بصری برای آن استفاده کنید. عنصر ul را بدون رنگ پس زمینه و بدون حاشیه بگذارید تا کاملاً نامرئی باشد. و سبک های نشانک ها فقط باید برای عناصر استفاده شوند. لی.
• اگر نیاز به تنظیم سبک های خاصی برای اولین و آخرین نشانک دارید، باید یک کلاس برای اولین و آخرین عنصر اضافه کنید. لیبنابراین می توانید آنها را به صورت جداگانه سبک کنید.

نتیجه

راه حل پیشنهادی با همه مرورگرها سازگار است، از جاوا اسکریپت استفاده نمی کند و از متن قابل تغییر سایز پشتیبانی می کند.

از نویسنده:من به همه خوش آمد می گویم. به دلایلی، وب مسترها یک منوی کشویی را با اسکریپت ها مرتبط می کنند، اما برای مدت طولانی می توان با استفاده از css خالص، چنین پیمایشی را کاملاً ایمن انجام داد. علاوه بر این، چنین منویی بدتر نخواهد بود. امروز به شما نشان خواهم داد که چگونه یک منوی کشویی در css ایجاد کنید. من به اصطلاح یک دستور غذا را به اشتراک خواهم گذاشت.

طرح درس و چیدمان منوی ما

به طور کلی، ابتدا اجازه دهید تصمیم بگیریم که چگونه خود منو را ایجاد کنیم. در html5، راه استاندارد ایجاد آن در یک محفظه nav و با استفاده از یک لیست گلوله‌ای است. بیایید همین کار را بکنیم. بعداً با استفاده از css نشانگرها را حذف خواهیم کرد، اصلاً به آنها در منو نیاز نداریم.

در واقع، من بلافاصله نشانه گذاری را با لیست های تو در تو در html می نویسم. یعنی لیست ما دو سطحی خواهد بود - حاوی لیست های دیگری است. یعنی برای هر آیتم 1 لیست که یک منوی کشویی تشکیل می دهد.

در اینجا یک نکته مهم وجود دارد و آن این است که ممکن است نیازی نباشد که هر مورد را به صورت کشویی درآورید، بلکه فقط چند مورد را در نظر بگیرید. مشکلی نیست، پس ما به سادگی لیست های تودرتو در پاراگراف ها را بدون انصراف ایجاد نمی کنیم.

در واقع، این همه نشانه گذاری است:

من می فهمم که بزرگ است. این مشکل با لیست های تودرتو است که نیاز به کد زیادی دارد. اما این واقعیت را در نظر داشته باشید که ما در حال انجام 4 آیتم اصلی هستیم و برای هر کدام یک منوی کشویی وجود دارد.

در واقع، من شناسه nav را برای همه ناوبری و کلاس سبک دوم را برای همه لیست های تودرتو تنظیم کردم تا بفهمم که آنها تودرتو هستند.

عالی است، نشانه گذاری ما آماده است، می توانید به نتیجه نگاه کنید:

بله، وحشتناک به نظر می رسد. اما اکنون css را روشن می کنیم و در عرض چند دقیقه مسیریابی ما تغییر می کند. بریم سر کار

نوشتن سبک های css

اولین کاری که انجام می دهم این است که تمام padding ها را به حالت پیش فرض برای همه عناصر بازنشانی کنم. آنها فقط با ما تداخل خواهند داشت، بهتر است خودمان تورفتگی ها را در جایی که لازم است تنظیم کنیم.

* (حاشیه: 0؛ بالشتک: 0؛)

#nav (ارتفاع: 70 پیکسل؛) #nav ul (سبک لیست: هیچکدام؛)

حالا ما واقعا باید تصمیم بگیریم که منوی ما چه خواهد بود. افقی یا عمودی؟ من پیشنهاد می کنم ابتدا افقی انجام دهید و همه چیز را در نمونه آن ببینید. برای این کار باید استایل های زیر را بنویسید:

#nav> ul> li (شناور: چپ؛ عرض: 180 پیکسل؛ موقعیت: نسبی؛)

توجه داشته باشید که با علامت > به مواردی در یک لیست اشاره می کنیم که مستقیماً در یک ul قرار دارند و آن یکی مستقیماً در یک nav قرار دارد. این بسیار مهم است، زیرا به شما این امکان را می‌دهد که استایل را برای موارد موجود در لیست‌های تودرتو اعمال نکنید. واقعیت این است که طبق ایده من، موارد موجود در لیست اصلی به صورت افقی و در موارد تودرتو - به صورت عمودی مرتب می شوند.

اما، البته، شما می توانید آن را متفاوت، مطابق با ایده خود انجام دهید. شما می توانید تمام موارد را در یک خط بسازید.

به هر حال کد بالا را امیدوارم متوجه شده باشید. موارد موجود در لیست اصلی را وادار می کند که به سمت چپ تراز شوند، به طوری که همه آنها در یک خط قرار بگیرند، حتی اگر موارد بلوکی باشند. من همچنین به آنها عرض و موقعیت نسبی صریح دادم.

موقعیت یابی برای چیست؟ برای اینکه لیست های تودرتو به طور مطلق در موقعیت مکانی قرار گیرند، ضروری است. اگر موقعیت یابی را در css مطالعه کرده اید، احتمالاً می دانید که اگر موقعیت نسبی بلوک را تنظیم کنید، تمام عناصر موجود در آن می توانند کاملاً در داخل این بلوک خاص قرار گیرند و نه کل پنجره مرورگر.

در ضمن، این چیزی است که قبلاً به دست آورده ایم:

از این اسکرین شات، از قبل می توانید نتیجه تقریبی را تصور کنید. البته باز هم باید پاراگراف ها را به زیبایی تزیین کنیم تا چشم ها هنگام مشاهده ناوبری التماس رحم نکنند.

#nav li a (نمایش: بلوک؛ پس‌زمینه: # 90DA93؛ حاشیه: 1px جامد # 060A13؛ رنگ: # 060A13؛ بالشتک: 8 پیکسل؛ تراز متن: مرکز؛ تزئین نوشتار: هیچ؛) #nav li a: شناور ( پس زمینه: # 2F718E؛)

ابتدا، خود پیوندها باید مسدود شوند. این برای کارکرد بالشتک و اعمال صحیح همه خصوصیات ضروری است. در مرحله بعد، رنگ های پس زمینه، متن، پارامترهای فریم، padding و تراز متن را در مرکز مشخص می کنم. در نهایت خط زیر را از لینک ها حذف کنید.

لازم نیست همه این پارامترها مانند من نوشته شوند. شما می توانید رنگ ها را خودسرانه انتخاب کنید، یک قاب را متفاوت کنید یا اصلا استفاده نکنید، تورفتگی ها را می توان کاهش یا افزایش داد.

توجه داشته باشید که در این مورد ما از علامت > استفاده نکرده‌ایم، بنابراین این قوانین برای همه پیوندها، از جمله پیوندهای موجود در پاراگراف‌های تودرتو اعمال می‌شود. بنابراین، اکنون موارد زیر را داریم:

عالی است، اما می‌دانید که موارد فرعی نباید قابل مشاهده باشند، زمانی که ماوس را روی مورد مورد نظر می‌برید باید باز شوند. بدون آن، منوی ما شبیه یک میز است. خوب، زمان پنهان کردن موارد تو در تو فرا رسیده است.

#nav li .second (نمایش: هیچ، موقعیت: مطلق؛ بالا: 100%؛)

ابتدا لیست های کاملا تو در تو را پنهان می کنیم. دوم، ما موقعیت مطلق و مختصات بالا را به آنها می دهیم: 100%. این بدان معناست که منوی کشویی به وضوح زیر آیتم اصلی که به آن تعلق دارد، به وضوح زیر 100٪ ارتفاع آن آیتم نمایش داده می شود.

اکنون فقط منوی اصلی را در صفحه وب می بینیم که همان چیزی است که به آن نیاز داریم.

اجرای ترک تحصیل

ما باید مهمترین کار را انجام دهیم - درک خود ضرر. هیچ چیز پیچیده ای در مورد آن وجود ندارد، به این کد نگاه کنید:

#nav li: شناور .second (نمایش: مسدود؛)

این کد بدون نقص کار خواهد کرد. هنگامی که ماوس را روی یک آیتم در منوی اصلی نگه دارید، لیست تودرتو قابل مشاهده خواهد بود. و فقط لیستی که در موردی که مکان نما روی آن قرار دارد تعبیه شده است.

فقط یک مشکل جزئی وجود دارد - عرض موارد تو در تو با عرض موارد اصلی مطابقت ندارد. اما این با اضافه کردن سبک های مناسب به راحتی حل می شود:

#nav li li (عرض: 180 پیکسل؛)

همه چیز، مشکل حل شد:

همه چیز عالی کار می کند. وقتی ماوس را روی آیتم اصلی نگه می دارید، منوی کشویی مربوطه ظاهر می شود. اگر مکان نما را به کناری ببرید، ناپدید می شود. اگر مکان نما را به خود موارد تو در تو منتقل کنید، می توانید روی آنها کلیک کرده و به قسمت مورد نظر سایت بروید. بنابراین، ما با شما یک منوی کشویی بسیار ساده و سبک بدون اسکریپت درست کرده ایم.

تبدیل منو به عمودی

خوب، خوب، ما با ناوبری افقی کاملاً متوجه شده ایم، اما علاوه بر آن، ناوبری عمودی در سایت ها بسیار رایج است و می تواند به صورت کشویی نیز باشد. در واقع، تغییر منو از افقی به عمودی بسیار آسان است، فقط باید چند خط کد را تغییر دهیم.

ابتدا باید float: سمت چپ را از آیتم های لیست اصلی حذف کنید. این ویژگی است که به این واقعیت کمک می کند که موارد ما در یک خط نمایش داده شوند، اما اگر ناوبری باید عمودی باشد، چرا به این نیاز داریم؟

اکنون باقی مانده است که قوانین انتخابگر #nav li .second را تغییر دهیم، یعنی برای لیست های تودرتو، یعنی آنها باید کمی متفاوت قرار گیرند. مثل این:

#nav li .second (نمایش: هیچکدام؛ موقعیت: مطلق؛ چپ: 100%؛ بالا: 0؛)

یعنی به جای یک مختصات باید دو مختصات ثبت کرد. اولاً در مورد ناوبری افقی گفتم که طبق خواسته، آیتم های منوهای تو در تو زیر آیتم های اصلی نمایش داده شوند. در مورد منوی عمودی، این مناسب نیست - موارد باید در کنار نمایش داده شوند.

بنابراین بالا را تغییر دهید: 100% به چپ: 100%. علاوه بر این، ما به مختصات بالا نیز نیاز داریم. آن را روی 0 قرار می دهیم تا زیرمنو با آیتم مربوط به آن هم سطح باشد.

همه چیز، اکنون همه چیز همانطور که باید کار می کند. می توانید آن را تست کنید. همانطور که می بینید، من دروغ نگفتم که گفتم فقط باید چند خط کد را بازنویسی کنم.

منوی افقی با سطوح مختلف

با استفاده از تقریباً همان رویکرد، می‌توانید سطوح منوی بیشتری را در صورت نیاز ایجاد کنید. به عنوان مثال، بیایید یک لیست برای چهارمین مورد از منوی اصلی ایجاد کنیم که در یکی از موارد فرعی تو در تو قرار می گیرد.