ساخت منو در css

ساخت منو در css

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

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

 

ساخت منو در css ساخت منو در css ساخت منو در css Build menu in css

ساخت منو در css

نحوه ی ساخت منوی بازشو (آبشاری) با HTML و CSS

پیش نیازها:

  1. داشتن اطلاعات پایه در خصوص لیست های نامرتب (بولت دار) در HTML
  2. داشتن اطلاعات اولیه در خصوص css و نحوه ی بکارگیری آن
  3. یک محیط نوشتاری متنی مانند NotePad

همانطور که در گزینه ی نخست پیش نیاز ذکر شد، برای منوهای آبشاری از لیست ها (تگ ul و li) در html استفاده میکنیم و با استفاده از css نحوه ی نمایش آنها را تعیین میکنیم. پس در گام نخست به سراغ کد HTML خواهیم رفت.

navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند: 

حالا اجازه دهید تا bulletها ، margin و padding را از لیستمان حذف کنیم:

به صورت زیر امتحا ن کنید

ساخت منو در css ساخت منو در css ساخت منو در css menu css

ساخت منو در css

  • list-style-type:none – علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
  • خصوصیت margin و padding را با مقدار ۰ تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.
کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.

همانطور که گفتیم برای ایجاد منو در html از لیست های تو در تو کمک خواهیم گرفت، یعنی تگهای ul و li. اجازه بدهید کمتر توضیح دهیم و سریعتر کدها را بررسی کنیم!

در بالا کد html منو را مشاهده میکنید که از چند لیست تودرتو ساخته شده و ممکن است کمی برای شما گیج کننده باشد. به همین دلیل ما تصویر زیر را برای درک بهتر شما رسم کرده ایم:

menu-list-diagram ساخت منو در css ساخت منو در css menu list diagram

همانطور که مشاهده میکنید، لیست اصلی توسط تگ <ul> آغاز شده است که حاوی ۵ تگ <li> اصلی میباشد که این ۵ آیتم تشکیل دهنده ی آیتم های اولیه ی منو می باشند. (آیتم یک، آیتم دو، آیتم سه، آیتم ..).

آیتم سوم (تگ <li> سوم) دارای زیرمجموعه است بنابراین قبل از اینکه تگ خاتمه (یعنی <li/>) بسته شود، باید کد منوی زیرمجموعه نوشته شود پس با استفاده از تگ <ul> منوی زیرمجموعه ی آیتم سوم را ایجاد میکنیم.

دومین آیتم زیرمجموعه از آیتم سه، خود دارای یک زیر مجموعه است، پس در اینجا نیز قبل از بسته شده تگ <li> باید کد مربوط به زیرمجموعه ی آن ذکر شود.

در واقع هرکدام از <ul> تا <ul/> ها یک منو (یا زیر منو) محسوب میشوند و هر کدام از <li> تا <li/> ها آیتم مربوط به آن!

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

خوب تا اینجا یک کد HTML ساده هست و با باز کردن فایل html در مرورگر، تنها یک لیست ساده نمایش داده می شود. برای ادامه باید با کمک CSS منوی اصلی را استایل دهی کنیم. برای این کار در بخش head داخل تگ style کدهای CSS زیر را اضافه می کنیم:

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

menu-1 ساخت منو در css ساخت منو در css menu 1

در مرحله بعد باید برای منوی های مورد نظرمون زیر منو تعریف کنیم. برای اینکار باید داخل تگ های li مربوطه یک تگ ul دیگه برای منوها تعریف کنیم. برای مثال، فرض کنیم در نظر داریم برای منوی Community زیر منوهای Forum، PodCasts و Videos رو ایجاد کنیم. برای اینکار کد HTML مربوط به بخش Community رو به شکل زیر تغییر می دهیم:

حالا باید کد CSS مربوط به زیر منو رو بنویسیم. برای اینکار کدهای زیر را به تگ style اضافه می کنیم:

menu-2 ساخت منو در css ساخت منو در css menu 2

حالا فرض کنیم بخواییم به هر یک زیر منوها هم یک زیر منوی دیگه اضافه کنیم و این کار به صورت درختی تا هر مرحله ای که خواستیم ادامه بدیم. برای مثال، فرض کنید تصمیم داریم زیر منوی Videos در منوی Community دارای زیر منوی های Programming، Database و Network باشه و خود زیر زیر منوی Database دارای زیر منوهای SQL Server، Oralce و MySQL باشه. برای اینکار ابتدا کد HTML بخش Community رو به صورت زیر تغییر می دیم:

menu-3 ساخت منو در css ساخت منو در css menu 3

اما نتیجه هنوز مورد نظر ما نیست، برای اینکه زیر منوهایی که زیر مجموعه یک زیر منوی دیگه هستند، باید جلوی منو باز بشوند، زیر زیر آن. برای اینکار باید موقعیت sub-menu هایی داخل یک sub-menu هستند رو تنظیم بکنیم. برای اینکار کد CSS زیر رو به تگ style صفحه اضافه می کنیم:

menu-4 ساخت منو در css ساخت منو در css menu 4

با استفاده از تکنیک آموزش داده شده به هر میزان که مایل باشیم میتونیم زیر منو به منوهامون اضافه کنیم. فقط کافیه تگ ul ای که به عنوان زیر منو استفاده میشه کلاس sub-menu رو داشته باشید.

کد   HTML به صورت زیر می باشد.

 

از این شیوه میتوانید در قالب وردپرس نیز استفاده کنید. کافی است کد منوی ناوبری را داخل تگ div با کلاس navigation قرار دهید.
آموزش CSS آموزش طراحی وب

یک نظر

دیدگاه خود را بیان کنید