سلام دوستان، همکاران! حال شما چطور است؟ امیدوارم همه خوب باشند :) امروز یک منوی تطبیقی ساده برای صفحه فرود خود ایجاد می کنیم. مردم بیشتر و بیشتر در این مورد می پرسند و من چنین سؤالاتی را در آن یادداشت می کنم و سعی می کنم در اوقات فراغت خود مقاله هایی در مورد این موضوعات بنویسم.
ممنون از اینکه در این راه ایده های جدیدی به من دادید و به توسعه وبلاگ کمک کردید. به هر حال، دوست دارید مقاله بعدی را در چه موضوعی بخوانید؟ لطفا در نظرات بنویسید، این برای من بسیار مهم است. حالا بیایید شروع کنیم ...
نحوه ایجاد منوی واکنش گرا برای یک وب سایتگوگل تایید کرده است که از اواسط آوریل، پاسخگویی وب سایت برای دستگاه های تلفن همراه به یکی از فاکتورهای رتبه بندی تبدیل خواهد شد. در این راستا، همه مطالب در مورد چگونگی تطبیق صفحه فرود خود بیش از همیشه مرتبط هستند. امروز هیچ چیز پیچیده ای را توضیح نمی دهم، اما برعکس، به شما خواهم گفت که چگونه یک منوی تطبیقی بسیار ساده با حداقل زمان بسازید.
اساساً html + css خواهد بود، اما برای پردازش کلیک به یک اسکریپت بسیار کوچک نیاز دارید. بنابراین…
منوی افقی پاسخگوبیایید با html شروع کنیم. اول از همه، بیایید کتابخانه jquery را در نظر بگیریم. احتمالاً برای مدت طولانی از آن استفاده می کنید، بنابراین مطمئن شوید که آن را برای بار دوم وصل نکنید:
حالا علامت گذاری ها یک لیست منظم نامرتب و یک div کوچک که حاوی نماد منو است. فقط در وضوح پایین قابل مشاهده خواهد بود.
قیمت دانلود
مخاطب
بررسی هاهمانطور که می بینید، پیچیده نیست، من فکر می کنم شما می توانید خودتان آن را در صورت نیاز بهبود بخشید.
حالا بیایید استایل ها را اضافه کنیم:
#menu ( پس‌زمینه: #2ba9c0؛ عرض: 100%؛ بالشتک: 10px 0؛ متن-تراز: وسط؛ ) #menu a (رنگ: #fff؛ متن-تزیین: هیچ؛ بالشتک: 12px 12px؛ ) #menu a: نشانگر (حاشیه پایین: 4 پیکسل ثابت #fff؛ پس‌زمینه: #078ecb؛ ) .itemsMenu li (نمایش: درون خطی؛ بالشتک سمت راست: 35 پیکسل؛ عرض: 100%؛ حاشیه: 0 خودکار؛ ) .itemsMenu li img( تراز عمودی : وسط; حاشیه سمت راست: 10px; a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ) )
حالا وقتی پنجره مرورگر را کم می کنید، تصویر زیر را می بینید:
من واقعاً دوست ندارم هر خطی را توصیف کنم، زیرا وبلاگ به این ترتیب درباره چیدمان نیست. فقط سعی کنم توضیح بدم
ابتدا خاصیت display:inline را روی عناصر li قرار می دهیم تا به صورت افقی در کنار یکدیگر ظاهر شوند. من می توانستم از float:left استفاده کنم، اما تصمیم گرفتم این کار را به این صورت انجام دهم. و نماد منو را با ویژگی display:none مخفی کنید. هنگامی که وضوح صفحه کمتر از 600 پیکسل است، خط درونی را از عناصر li حذف کنید، آنها را پنهان کنید و نماد را نشان دهید. به طور خلاصه - بله.
اکنون ما به یک اسکریپت ساده نیاز داریم که یک کلیک روی نماد منو را پردازش کند و عناصر آن را نشان دهد:
$(function() ($(".iconMenu"). کلیک کنید(function() (if($(".itemsMenu").is(":visible")) ($(".itemsMenu").removeClass(" showitems"); ) else ($(".itemsMenu").addClass("showitems"); ) )); ));
مثل این. من آن را در یک فایل جداگانه قرار دادم و آن را قبل از تگ بدنه بسته قرار دادم. 
همین. به این ترتیب می توانید به سرعت یک منوی تطبیقی ساده برای صفحه فرود خود ایجاد کنید.
البته معایبی هم دارد. تورفتگی ها بر حسب پیکسل مشخص می شوند، اما می توانید تمام فاصله ها را نیز به صورت درصد تعیین کنید. فقط لازم نبود اگر این یک سایت کامل بود، از آیکون‌های svg یا فونت استفاده می‌کردم، نه png، و تورفتگی‌ها را دوباره به صورت درصد محاسبه می‌کردم. و بنابراین، کمی بداهه بود :) امیدوارم همه چیز روشن باشد؟ خدا حافظ.
وقتی کار با طراحی واکنش‌گرا را شروع می‌کنیم، با تکنیک‌های مختلفی مواجه می‌شویم که چگونه می‌توان با تغییر منوی ناوبری خود برای صفحه‌های با وضوح پایین به بهترین نحو رفتار کرد. احتمالات بی پایان به نظر می رسند. بنابراین، من چهار رویکرد اصلی را با مزایا و معایب آنها به شما نشان خواهم داد. سه مورد از آنها فقط با استفاده از CSS و یکی با مقدار کمی جاوا اسکریپت ساخته شده است.
مقدمه در کد ارائه شده در این مقاله، من از پیشوندهای مرورگر برای آسان نگه داشتن کد سبک برای خواندن و درک استفاده نمی کنم. نمونه های پیچیده تر از SCSS استفاده می کنند. هر یک از نمونه ها در CodePen میزبانی می شوند، جایی که می توانید CSS کامپایل شده را ببینید.همه رویکردهای این مقاله از کد HTML ساده استفاده می کنند که من آن را "منوی اصلی" می نامم. ویژگی نقش برای نشان دادن یک نوع خاص استفاده می شود: منوی افقی (تمام افقی)، لیست کشویی (انتخاب)، منوی کشویی (کاشوی سفارشی) و بوم.
- جریان
- آزمایشگاه
- پروژه ها
- در باره
- مخاطب
برای یک ظاهر طراحی، من از همان درخواست رسانه برای همه گزینه ها استفاده می کنم:
صفحه رسانه @ و (حداکثر عرض: 44em) ( )
1. منوی افقی این ساده ترین روش است زیرا شما فقط باید فهرست موارد را به عرض کل صفحه تنظیم کنید:
- جریان
- آزمایشگاه
- پروژه ها
- در باره
- مخاطب
صفحه رسانه @ و (حداکثر عرض: 44em) ( nav (ul > li (عرض: 100%؛ )))
- بدون نیاز به جاوا اسکریپت
- بدون نشانه گذاری اضافی
- کد سبک ساده
- فضای بیش از حد صفحه را اشغال می کند
برای دستیابی به این اثر، باید یک لیست کشویی به نشانه گذاری اصلی اضافه کنیم. برای اینکه کار کند، باید کد جاوا اسکریپت را اضافه کنیم که مقدار window.location .href را زمانی که رویداد onchange رخ می دهد تغییر می دهد.
پروژه های آزمایشگاه جریان درباره تماس
پنهان کردن لیست در صفحه نمایش های بزرگ:
nav (> انتخاب (نمایش: هیچ؛ ))
در صفحه های کوچک، منوی اصلی را پنهان می کنیم و یک لیست کشویی را نشان می دهیم. برای کمک به کاربر در درک اینکه این یک منو است - ما یک عنصر شبه با متن "منو" اضافه می کنیم.
صفحه رسانه @ و (حداکثر عرض: 44em) ( nav ( ul (نمایش: هیچ؛ ) انتخاب (نمایش: بلوک؛ عرض: 100%؛ ) &:after ( موقعیت: مطلق؛ محتوا: "منو"؛ سمت راست: 0 پایین: -1em )
با طراحی اضافی، در صفحه نمایش های با وضوح پایین اینگونه به نظر می رسد: 
- فضای زیادی را اشغال نمی کند
- از کنترل های "بومی" استفاده می کند
- برای کار کردن به جاوا اسکریپت نیاز دارد
- محتوای تکراری رخ می دهد
- فهرست کشویی در همه مرورگرها سبک نمی شود
مشکلات استفاده از چک باکس هک دو مشکل اصلی این راه حل عبارتند از:
H1 ~ p (رنگ: سیاه؛ ) h1: شناور ~ p (رنگ: قرمز؛ )
این هیچ تأثیری نداشت زیرا هک چک باکس از کلاس شبه :checked با انتخابگر ~ استفاده می کرد. و تا زمانی که این باگ در WebKit 535.1 (Chrome 13) و در WebKit 534.30، فعلی برای اندروید 4.1.2 برطرف نشد، هک روی هیچ دستگاهی با سیستم عامل اندروید کار نمی کرد.
در صفحه های بزرگ ما برچسب را پنهان می کنیم.
برچسب (موقعیت: مطلق؛ چپ: 0؛ نمایش: هیچکدام؛ )
در صفحه های کوچک، منو را خارج از محتوای پنجره قرار می دهیم و برچسب و ورودی را نشان می دهیم. برای مخفی کردن منو، عرض و مقدار موقعیت منفی آن را تنظیم می کنیم. برای کمک به درک کاربر از این منو، ما همچنین یک شبه عنصر با متن "≡" در برچسب (به عنوان کد "\2261" برای استفاده به عنوان محتوای شبه عنصر) اضافه می کنیم.
صفحه رسانه @ و (حداکثر عرض: 44em) ($menu_width: 20em؛ بدنه ( overflow-x: hidden; ) nav ( موقعیت: مطلق؛ سمت چپ: -$menu_width؛ عرض: $menu_width؛ ul > li ( عرض: 100 ٪; menu_width + 0.5em; margin-right: -($menu_width + 0.5em)
با طراحی اضافی، در صفحه نمایش های با وضوح پایین اینگونه به نظر می رسد:
- کد غیر معنایی (ورودی/برچسب)
- HTML اضافی مورد نیاز است
- موقعیت مطلق عنصر بدن احساس یک موقعیت ثابت را می دهد
پورتال با منوهای پیچیده ما تصمیم گرفتیم اسکریپت ها را فقط در صورتی بنویسیم که آنچه را که به صورت آنلاین نیاز داریم پیدا نکنیم. چندین ناوبری مختلف با ویژگی های مختلف تصور شد. از شانس ما تقریباً همه چیز پیدا شد به جز یکی. با این حال، درست قبل از شروع کار بر روی نوشتن این منو، ما هنوز موفق شدیم آنچه را که نیاز داشتیم پیدا کنیم.
ما چندین منوی تطبیقی را امتحان کردیم. در این تاپیک تصمیم گرفتم گلچینی از با ارزش ترین و جالب ترین مواردی که باید امتحان می کردیم تهیه کنم. همه منوهای تطبیقی یکسان نیستند و منحصراً برای کارهای خاص طراحی شده اند.
بنابراین. در اینجا 5 منوی تطبیقی برای همه موارد وجود دارد.
flexMenu - منویی که برای سایت هایی با عرض پویا در حال تغییر مناسب است. ویژگی اصلی و منحصر به فرد آن افزودن آیتم "بیشتر" و انتقال مواردی است که در عرض کل ناوبری به لیست کشویی آن نمی گنجد. یعنی اگر به مانیتورهای بزرگ نگاه کنیم تمام نکات را می بینیم. به محض اینکه شروع به کوچک کردن پنجره مرورگر می کنیم، مورد "بیشتر" در انتهای منو ظاهر می شود و مواردی که با کوچک شدن پنجره مناسب نیستند به صورت پویا به لیست کشویی آن منتقل می شوند. بنابراین، ما یک منو با ارتفاع ثابت و عرض "بازی" خواهیم داشت.
هنگام کار با flexMenu با یک مشکل مواجه شدیم. در مورد ما، در سمت راست یک لوگو با float: left;، در سمت راست این منو با float: left; و در سمت راست با شناور: راست; یک بلوک دیگر وجود داشت. هنگام تغییر اندازه پنجره مرورگر، مشخص شد که بلوک سمت راست به زیر منو پرید، سپس همه اینها زیر لوگو پرید و سپس عملکرد فشرده سازی منو فعال شد. نحوه برخورد با این ویژگی چیدمان در مباحث بعدی مورد بحث قرار خواهد گرفت. در ادامه با ما همراه باشید. هنگام تغییر اندازه پنجره مرورگر، خواهیم دید که موارد روی یکدیگر همپوشانی دارند و از نظر عرض هم تراز هستند. خیلی مرتب به نظر میرسه مهمتر از همه، این منوی تطبیقی در دستگاه های تلفن همراه عالی به نظر می رسد و مهمتر از آن، استفاده از آن در دستگاه های دارای صفحه نمایش لمسی راحت است.
اگر نیاز به صرفه جویی در فضای صفحه دارید، منوی مسطح چند سطحی یک انتخاب عالی است.
امروز در مورد نحوه ایجاد یک منوی پاسخگو با استفاده از CSS3 صحبت خواهیم کرد. چرا تطبیقی؟ به نظر من این بسیار مهم است و باید به یک هنجار تبدیل شود، زیرا امروزه تعداد زیادی از مردم از طریق دستگاه های تلفن همراه (آی پد، آیفون...) به اینترنت دسترسی دارند. این کاربران باید بتوانند به راحتی در سایت شما حرکت کنند. برای حل این مشکل، می توانید از جی کوئری یا جاوا اسکریپت استفاده کنید، اما امروز به چیز متفاوتی نگاه خواهیم کرد.
اساسا، ما یک منوی کشویی منظم بر اساس لیست UL > LI خواهیم داشت. اگر صفحه را کوچکتر کنیم، با کلیک کردن، همه زیر منوها در دسترس خواهند بود. بیایید ببینیم چه چیزی باید بدست آوریم:
در اینجا کد html نمونه آزمایشی ما آمده است:
index.html
منوی واکنش گرا | آموزش اسکریپت
در اینجا می خواهم به یک نکته اشاره کنم - متا با ویژگی name='viewpoint'. این برچسب برای مقیاس بندی صحیح محتوای صفحه بر روی صفحه نمایش شما ضروری است، خواه مانیتور کامپیوتر باشد یا تلفن همراه. درک بقیه کدها سخت نیست. فهرست چند سطحی UL > LI.
مرحله 2: CSSبنابراین، سبک ها. اول از همه برای خود صفحه:
css/main.css
* ( حاشیه: 0؛ بالشتک: 0؛ ) html (رنگ پس‌زمینه: #fff؛ ارتفاع: 100%؛ ) بدنه (رنگ: #333333؛ فونت: 0.75em/1.5em Arial,sans-serif;) .container ( margin-left: auto margin-right: auto margin-top: 30px;
حالا بیایید برای عناصر منوی بالایی استایل بنویسیم:
/* سبک های معمول و سطح بالا */ #nav span ( نمایش: هیچ؛ ) #nav، #nav ul (لیست-سبک: هیچ خارج از هیچ؛ حاشیه: 0؛ بالشتک: 0؛ ) #nav ( پس‌زمینه رنگ: # F5F5F5: 5px: 0.2 : بالای مطلق: 96% . 0s -ms-transition : همه 300ms ease-in-out 0s: همه 300ms ease-in-out 0s; : بلوک -تزیینات: هیچکدام -moz-transition: رنگ 450ms ease-in-out 0s، پس زمینه-رنگ 450ms-in-out 0s -ms-transition: رنگ 450ms -ease-out 0s; رنگ 450 میلی‌ثانیه ease-in-out 0s; -o-transition: رنگ 450 میلی‌ثانیه ease-in-out 0s، پس‌زمینه رنگی 450ms ease-in-out 0s. -webkit-transition: رنگی 450 میلی‌ثانیه ease-in-out 0s، پس‌زمینه رنگی 450ms سهولت در خروجی 0s. انتقال: رنگ 450 میلی‌ثانیه ease-in-out 0s، رنگ پس‌زمینه 450 میلی‌ثانیه ease-in-out 0s. فضای سفید: عادی؛ ) #nav > li > a ( رنگ: #333333؛ نمایشگر: بلوک؛ اندازه قلم: 1.3em؛ ارتفاع خط: 49 پیکسل؛ بالشتک: 0 15 پیکسل؛ تبدیل متن: بزرگ؛ ) #nav > li:hover > a , #nav > a:hover ( پس‌زمینه رنگ: #F55856؛ رنگ: #FFFFFF؛ ) #nav li.active > a ( پس‌زمینه رنگ: #333333؛ رنگ: #FFFFFF؛ )
بیایید استایل ها را برای زیر منو (لیست کشویی) پیاده سازی کنیم:
/* زیر منو */ #nav li:hover ul.subs ( display: block; ) #nav ul.subs > li (نمایش: inline-block; float: none; padding: 10px 1%; vertical-align: top; عرض : 33%; font-size: 1.3em; margin-bottom: 10px; -ms-transition: padding 150ms ease-out 0s -o-transition: padding ease-out 0s -webkit-transition: padding ease-out .subs > li:hover: 1; ;)
عالی. اکنون مهمترین چیز این است که چگونه منو تطبیقی می شود؟ در واقع، همه چیز بسیار ساده است! ما از پرس‌وجوهای رسانه‌ای CSS3 برای تعیین اینکه کدام سبک‌ها را بر اساس اندازه صفحه نمایش کاربر نمایش دهیم، استفاده می‌کنیم. همچنین با استفاده از ترفند زیر منو را تغییر می دهیم. در کد HTML ما، بلافاصله بعد از سطوح بالای منو، SPANهای مخصوص قرار دادم. ما از آنها استفاده خواهیم کرد و یک حالت فعال (شبه کلاس: هدف) را هنگام کلیک کردن بر روی عناصر منوی بالایی اختصاص خواهیم داد. با این کار یک زیر منو باز می شود. بیایید به کد نگاه کنیم:
/* قوانین پاسخگو */ @media all and (max-width: 980px) ( #nav > li ( float: none; border-bottom: 0; margin-bottom: 0; ) #nav ul.subs ( position: relative; بالای صفحه: 0; ul.subs > li (نمایش: بلوک؛ عرض: خودکار؛ ))
خط پایینبنابراین، ما فقط یک منوی واکنش‌گرای جالب را از ابتدا ایجاد کردیم. امیدوارم برایتان مفید بوده باشد. موفق باشید! دوباره می بینمت!
من تکنیکی را برای ایجاد یک منوی ساده، بسیار انعطاف‌پذیر در تنظیمات، و همچنین کاملاً مؤثر، منوی تطبیقی، با استفاده از نشانه‌گذاری معنایی خالص، برای پیاده‌سازی یک طرح تطبیقی، بدون اتصال جاوا اسکریپت، پیشنهاد می‌کنم. در نتیجه، با استفاده از CSS، منویی دریافت می‌کنیم که می‌تواند در سمت چپ، راست یا دقیقاً در مرکز قرار گیرد، با موارد فعال/جاری برجسته شده، منویی که می‌تواند هنگام تغییر اندازه پنجره مرورگر، به سرعت خود را تغییر دهد. در یک نوار پیمایش عمودی کشویی که روی صفحه نمایش دستگاه های مختلف کاربر تلفن همراه (تبلت، تلفن های هوشمند، لپ تاپ و تلفن همراه) عالی به نظر می رسد.
ما به مثال نگاه کردیم و مطمئن شدیم که منوی ما کار می کند. این روش به طور کلی زمانی بسیار مفید است که یک منو از تعداد زیادی لینک استفاده می کند. شما به راحتی می توانید همه دکمه ها را در یک پانل جذاب که در حالت شناور باز می شود، گروه بندی کنید.
اول از همه، ما باید کل ساختار اصلی منو را علامت گذاری کنیم. ما در حال ایجاد یک عنصر ناوبری هستیم، به این معنی که منطقی و حتی عملی است که از یک عنصر HTML5، یک برچسب با کلاسی به همین نام اختصاص داده شده به آن، برای قالب‌بندی بعدی سبک‌های CSS، و همچنین ایجاد و موقعیت‌یابی مطلق استفاده کنیم. نوار پیمایش کشویی کلاس فعلی به پیوند منوی فعال / فعلی اشاره می کند که ظاهر آن با استفاده از css ایجاد می شود.
- خانه
- درباره ما
- نمونه کارها
- خدمات ما
- مخاطب
همانطور که می بینید، منو یک لیست ساده و نامرتب با تعداد مشخصی لینک است. ممکن است تعداد امتیازها متفاوت باشد، اما هنوز نیازی به سر و صدا نیست، همه چیز در محدوده معقول است.
بعلاوه، قبل از اینکه خیلی جلو برویم، می‌خواهم به شما یادآوری کنم و برای کسانی که نمی‌دانند توضیح دهم که HTML5 و پرسش‌های رسانه‌ای توسط نسخه‌های IE قدیمی‌تر از 9 پشتیبانی نمی‌شوند (اصلا جای تعجب نیست). برای اینکه در آینده دچار سردرد نشوید و همه کارها را به درستی انجام دهید، اسکریپت های خاصی وجود دارد که با کمک آنها می توانیم با وصل کردن محتاطانه آنها به سند در بخش، مشکل سازگاری را حل کنیم.
همه. ما نشانه گذاری اولیه را مرتب کرده ایم، کلاس ها ثبت شده اند و عصاها اضافه شده اند. حالا بیایید به تعریف سبک های آیتم های منو، شکل دادن به ظاهر و تبدیل منوی ما واقعاً سازگار بپردازیم.
مجموعه ای از سبک های منوی CSS برای صفحه نمایش مانیتورهای دسکتاپ کاملاً استاندارد است. فقط می خواهم توجه شما را به این واقعیت جلب کنم که من به جای عنصر float:left، display:inline-block را مشخص کردم.
- .
- امتیاز */ حاشیه : 0 ; .nav .current (نمایش: مسدود کردن؛ /* فقط در حال حاضر فعال است
- موارد */) .nav a (نمایش: بلوک؛ پد: 5px 5px 5px 32px؛ تراز کردن متن: چپ؛) / .nav ul: شناور (تصویر پس‌زمینه: هیچکدام؛ ) .nav ul: نشانگر لی (نمایش: بلوک؛ حاشیه: 0 0 5px;) png ) no-repeat 10px . 50% ) حاشیه چپ : -90 پیکسل ;
- امتیاز */ حاشیه: 0; ) .nav .current ( نمایش: مسدود؛ /* فقط در حال حاضر فعال است
- موارد */ ) .nav a (نمایش: بلوک؛ بالشتک: 5px 5px 5px 32px؛ تراز متن: چپ؛ ) / .nav ul:hover ( پس‌زمینه-تصویر: هیچکدام؛ ) .nav ul:hover li (نمایش: بلوک؛ حاشیه: 0 0 5px; ) .nav ul:hover .current ( پس‌زمینه: url(تصاویر/بررسی نماد png) no-repeat 10px ) /* منوی پاسخگو در سمت راست */ .nav.right ul ( چپ: خودکار؛ راست: 0; ) /* منوی پاسخگو در مرکز */ .nav.center ul ( سمت چپ: 50% حاشیه چپ: -90px )
احتمالاً همین است! منوی فوق العاده و 100% تطبیقی ما آماده است، همانطور که با نگاهی دوباره به مثال می بینید. برای مطالعه دقیق تر مطالب، می توانید منابع را دانلود کرده و با آرامش، بدون هیاهوهای غیر ضروری، به موضوع بپردازید.
درس با استفاده از مواد تهیه شد
ترجمه و اقتباس رایگان: آندری /راننده/
| /* menu */ .nav ( margin : 20px 0 ; ) .nav ul ( margin : 0 ; padding : 0 ; ) .nav li ( margin : 0 5px 10px 0 ; padding : 0 , list-style : none , display : inline-block * display : inline ; : #000 .nav .current a ( پس زمینه : #999 ; رنگ : #fff ; حاشیه : 3px |
/* منو */ .nav ( حاشیه: 20px 0; ) .nav ul ( حاشیه: 0؛ بالشتک: 0; ) .nav li ( حاشیه: 0 5px 10px 0؛ بالشتک: 0؛ سبک فهرست: هیچکدام؛ نمایش: inline-block; /* ie7 */. : #000;
بخش‌های .nav a:hover و .nav.current a به ترتیب مسئول تغییر رنگ پیوندها و پس‌زمینه آیتم‌های منوی فعال/فعال هستند. من در این مثال سعی نکردم خیلی باهوش باشم، همه کارها را با روح مینیمالیسم انجام دادم، وقتی روی پیوند می روید رنگ تغییر می کند، متن سیاه می شود: #000; و برای آیتم های فعال پس زمینه اضافه کردم: #999; ، رنگ فونت را با رنگ سفید جایگزین کرد: #fff; و لبه ها را کمی گرد کرد: 3px; در دکمه به دست آمده شما می توانید در این زمینه خیال پردازی کنید و به دلخواه خود آزمایش کنید.
تراز وسط و راستهمانطور که در بالا ذکر کردم، می‌توانیم تراز آیتم‌های ناوبری را با استفاده از ویژگی text-align با افزودن چند خط کد CSS تغییر دهیم:
| منوی /* در سمت راست */ .nav .right ul (Text-align : right ; ) /* منو در مرکز */ .nav .center ul ( text-align : center ; ) |
منوی /* در سمت راست */ .nav.right ul (تراز متن: راست؛ ) /* منو در مرکز */ .nav.center ul (تراز متن: مرکز؛ )
تطبیق منوسرگرمی شروع می شود. منوی ما در این مرحله فرمت لاستیکی دارد (عرض به صورت درصد تعیین می شود) و هنوز اصلاً سازگار نیست. تغییر اندازه صفحه نمایش را شروع کنید و خواهید دید که منو در ترکیبی از دکمه های آشفته ساخته شده است.
ما با استفاده از پرسش های رسانه ای وضعیت را اصلاح خواهیم کرد. در نقطه برنامه درخواست رسانه در 600 پیکسل، موقعیت نسبی را روی موقعیت قرار دادم: relative; برای عنصر nav به طوری که بعداً بتوانیم لیست منو را قرار دهیم
- در بالا در موقعیت مطلق: مطلق; . با استفاده از ویژگی display: none، همه آیتم های منوی li را مخفی می کنیم و فقط پیوندهای فعال فعلی را با کلاس فعلی باقی می گذاریم و ویژگی display: block را به آنها اختصاص می دهیم.
هنگامی که ماوس را روی یک نوار ناوبری گروه‌بندی‌شده نگه می‌دارید، همه آیتم‌های منو باید به صورت یک لیست کشویی نشان داده شوند. برای آیتم‌های فعال/جاری، یک نماد اضافه می‌کنیم تا آنها را از بقیه برجسته کنیم.
اگر می‌خواهید منو را به سمت راست یا وسط آن ببرید، از ویژگی‌های موقعیت‌یابی چپ و راست برای فهرست اول منوی ما استفاده کنید.
| صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) (.nav (موقعیت: نسبی؛ حداقل ارتفاع: 40 پیکسل؛). حاشیه: 1px #aaa ; .nav li ( نمایش : هیچ ; /* پنهان کردن همه |
صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) ( .nav ( موقعیت: نسبی؛ حداقل ارتفاع: 40 پیکسل؛ ) .nav ul (عرض: 180 پیکسل؛ بالشتک: 5 پیکسل 0؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0 حاشیه: 1px #aaa; 3) .nav li (نمایش: هیچ؛ /* پنهان کردن همه
