منوی افقی منوی افقی CSS

از نویسنده:من به همه خوش آمد می گویم. به دلایلی، وب مسترها یک منوی کشویی را با اسکریپت ها مرتبط می کنند، اما برای مدت طولانی می توان با استفاده از 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؛ حاشیه: 1 پیکسل توپر # 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 قرار می دهیم تا زیرمنو با آیتم مربوط به آن هم سطح باشد.

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

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

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

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

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

بیایید طرح منوی افقی خود را شروع کنیم!

همانطور که احتمالا حدس می‌زنید، اولین کاری که باید انجام دهیم این است که یک صفحه html با نشانه‌گذاری استاندارد ایجاد کنیم و صفحه سبک را به آن متصل کنیم. من به جزئیات این مرحله نمی پردازم، زیرا هنوز امیدوارم که شما آنقدر مبتدی نباشید که بتوانید با جزئیات به شما بگویید که بدن و سر چیست و سبک ها چگونه به هم متصل می شوند. فقط می گویم که علاوه بر استایل های منو، ساده ترین ریست را در فایل css می نویسم تا استایل ها را ریست کرده و در همه مرورگرها تورفتگی یکسانی داشته باشیم. ساده ترین تنظیم مجدد من به این صورت است:

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

پس در این مرحله چه داریم؟ ما یک صفحه html با نشانه گذاری استاندارد داریم:

و ما یک شیوه نامه متصل به این صفحه داریم (مال من style.css است)، با محتوای زیر:

مرحله بعدی ایجاد نشانه گذاری html برای منو است.

نحوه ایجاد نشانه گذاری برای منو

در نشانه گذاری خود از یک تگ جدید استفاده خواهیم کرد