ساخت انواع منو در CSS

How to Build Various Menus with CSS & HTML

0 803

Navigation Bar چیست؟

Navigation Bar به معنی «نوار جهت یابی» است و معمولا همان نواری است که در بالای صفحات وب سایت ها قرار می گیرد و به کاربر کمک می کند که راه خود را در سایت پیدا کند. در روکسو این نوار به شکل زیر است:

navigation bar در سایت روکسو پلاس
navigation bar در سایت روکسو پلاس

در این مقاله می خواهیم با نحوه ی ساخت آن ها آشنا شویم.

هر navigation bar نیاز به کدهای پایه ای HTML دارد بنابراین در این مثال از شایع ترین روش ساخت navigation bar، یعنی استفاده از لیست های HTML ای استفاده می کنیم. در واقع به زبان ساده می توان گفت که navigation bar ها لیستی از لینک ها هستند که به صورت خاصی چیده شده اند.

مشاهده ی خروجی در JSBin

خب تا اینجا اساس کار را پایه ریزی کردیم. حالا باید bullet ها را حذف کنیم و مقادیر margin و padding پیش فرض را نیز حذف کنیم:

مشاهده ی خروجی در JSBin

با دستور ;list-style-type: none در مقالات قبلی HTML آشنا شده ایم؛ با این دستور می توان استایل لیست ها (bullet یا نشانگانشان) را حذف کرد. مقدار margin: 0 و padding: 0 نیز برای حذف margin و padding پیش فرض است.

چه بخواهید منوی navigation شما افقی باشد و چه عمودی، باید تمام این مراحل را طی کنید اما از این قسمت به بعد برای منوی های افقی و عمودی متفاوت عمل خواهیم کرد.

منوهای عمودی

برای منوهای عمودی میتوانیم عناصر <a> را در لیست بالا استایل دهی کنیم:

مشاهده ی خروجی در JSBin

در این مثال از display: block استفاده کرده ایم تا تمام فضای لیست قابل کلیک باشد (نه فقط متن لینک ها). همچنین حالا می توانیم طول و عرض تعیین کنیم اما از آنجا که عناصر block به صورت پیش فرض تمام صفحه را می گیرند باید از width: 60px استفاده کنیم (یعنی مقدار مشخصی به آن بدهیم تا تمام صفحه را اشغال نکند.

همچنین می توانیم عرض <ul> را تعیین کرده و عرض <a> را حذف کنیم چرا که خودشان فضای قابل دسترسی را اشغال خواهند کرد. این روش تفاوتی با روش بالا (مثال قبل) ندارد:

مشاهده ی خروجی در JSBin

تا اینجای کار از نظر ظاهری منوی خوبی نداشتیم و تنها پایه ریزی اش کرده ایم. حالا نوبت استایل دهی است! رنگ پس زمینه را خاکستری روشن نگه می داریم و می گوییم اگر کاربر موس خود را روی لینکی آورد، رنگ آن خاکستری تیره شود:

مشاهده ی خروجی در JSBin

حالا باید از یک کلاس به نام active استفاده کنیم تا به کاربر بگوییم در کدام صفحه قرار دارد:

مشاهده ی خروجی در JSBin

حالا می توانیم برای وسط قرار دادن متن منوی خود، از text-align:center استفاده کنیم که به <li> ها یا <a> ها اضافه می شود. همچنین یک border به <ul> ها اضافه می کنیم. اگر می خواهید این حاشیه ها داخل منو هم باشند، باید border-bottom را به عناصر <li> اضافه کنیم (به غیر از مورد آخر، چرا که خودش حاشیه ی پایین دارد):

مشاهده ی خروجی در JSBin

نکته: توجه داشته باشید که تمام این موارد به غیر از موارد پایه ای کاملا به سلیقه ی شما بستگی دارد. ما بر اساس سلیقه ی خود منو را به شکل بالا در آورده ایم اما شما می توانید آن را کاملا متفاوت استایل دهی کنید (در آخر این مقاله مثالی برایتان آماده کرده ایم).

اگر بخواهیم این منو را تبدیل به یک منو عمودی ثابت کنیم، می توانیم به این شکل عمل کنیم:

مشاهده ی خروجی در JSBin

نکته: این مثال ابتدایی است و ممکن است در گوشی های موبایل به طور صحیح نمایش داده نشود.

منوهای افقی

برای ایجاد منوهای افقی دو راه وجود دارد: استفاده از inline و یا استفاده از float. ابتدا از روش inline استفاده می کنیم:

در این روش باید عناصر <li> را به صورت inline قرار دهیم (البته کدهای پایه را که بالاتر تعریف کردیم دست نمی زنیم):

مشاهده ی خروجی در JSBin

عناصر <li> به صورت پیش فرض block هستند، دلیل استفاده از display: inline نیز همین است؛ تا کاری کنیم که کنار هم قرار بگیرند نه زیر هم.

روش دیگر کنار هم قرار دادن این لینک ها استفاده از float برای عناصر <li> است:

مشاهده ی خروجی در JSBin

دلیل اضافه کردن padding: 8px این است که لینک های منوی ما به هم نچسبند و کمی از هم فاصله بگیرند (زمانی که از float استفاده می کنید، عناصر به هم میچسبند).

اگر می خواهید رنگ پس زمینه تمام عرض صفحه را بگیرد می توانید به جای <a>، آن را به <ul> اضافه کنید:

مشاهده ی خروجی در این حالت

تا اینجای کار پایه ی کار را کدنویسی کرده ایم و حالا باید آن را استایل دهی کنیم. ما رنگ پس زمینه را سیاه می کنیم و زمانی که کاربر موس خود را روی گزینه های منو می آورد رنگ آن گزینه سیاه تر می شود:

مشاهده ی خروجی در JSBin

حالا کلاس active را هم اضافه می کنیم:

اگر بخواهید یکی از گزینه ها را به چپ یا راست ببرید می توانید مقدار float را به right یا left تغییر دهید. حتی می توانید آن را در سطح لینک ها پیاده سازی کنید:

مشاهده ی خروجی در JSBin

در مثال زیر یک منوی انگلیسی آورده ایم که به آن حاشیه (border) هم داده ایم:

مشاهده ی خروجی در JSBin

اگر بخواهیم این منو را به صورت ثابت در بیاوریم می توانیم کدها را به این شکل بنویسیم:

مشاهده ی خروجی در JSBin

نکته: این مثال ساده است و ممکن است در گوشی های موبایل به درستی نمایش داده نشود.

منوهای چسبنده

با استفاده از قابلیت ;position: sticky در عناصر <li> می توانید منوهای چسبنده داشته باشید. این نوع از منوها در بالا صفحه ثابت هستند و پس از اسکرول کردن تغییر مکان داده و به شکل دیگری به صفحه می چسبند. یعنی position آن ها بین relative و fixed تغییر می کند. منوی روکسو پلاس از همین نوع است و شما می بینید که با اسکرول کردن موقعیت آن تغییر می کند.

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

مشاهده ی خروجی در JSBin

نکته: مرورگر های IE و Edge 15 و نسخه های قبل تر آن از این قابلیت (sticky) پشتیبانی نمی کنند. مرورگر Safari نیز برای عملکرد صحیح به پیشوند -webkit-  نیاز دارد.

منوهای drop down

این منوها را در تمام وب سایت ها دیده اید. به کد زیر نگاه کنید:

مشاهده ی خروجی در JSBin

در صفحه ی خروجی موس خود را روی گزینه ی drop down ببرید. متوجه می شوید که یک منوی کوچکتر ظاهر می شود. نحوه ی کار آن با توضیحاتی که ما داده ایم مشخص است.

انواع و اقسام منوهای مختلف در دنیای وب وجود دارند و ما نمی توانیم تمام آن ها را در این مقاله بیاوریم اما پایه و اساس آن ها را به شما آموزش داده ایم و با جست و جویی ساده در اینترنت می توانید تمام آن ها را یاد بگیرید. امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle