0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

نحوه­ ی ایجاد منو و زیر منو با HTML و CSS

نویسنده پشتیبانی وب یار
امتیاز مطلب
3.5/5 - (6 امتیاز)
تعداد بازدید 2675
تاریخ بروزرسانی ۳۰ خرداد ۱۴۰۱

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

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

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

مرحله اول-ساخت منو ساده

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

کد بالا یک فهرست توسط ul ایجاد می کند. آیتم­ های منو در درون این فهرست و در تگ li قرار می گیرند. کد های بالا لیستی از منوی ساده ی عمودی فاقد زیر منو را نمایش می دهد.این کد ها شامل 5 منوی اصلی می باشد.

نحوه­ ی ایجاد منو و زیر منو

مرحله دوم- ساخت زیر منو

تا اینجا تنها منو های اصلی طراحی شده است، حال برای این که منو هایی با زیر منو داشته باشیم باید درون آیتم دلخواه خود که می خواهیم زیر منو داشته باشد یک بلاک ul و li اضافه کنیم. برای مثال می خواهیم به منوی ” طراحی سایت ” خود 3 زیر منو اضافه کنیم. به کد های زیر توجه کنید.

با توجه به کد های بالا برای اضافه کردن زیر منو به منوی اصلی “طراحی سایت” باید یک بلاک کامل ul  و li به تگ li آن اضافه کنیم. به همین ترتیب می توانید به سایر منو ها هم زیر منو اضافه کنید.

بعد از این که نوشتن کد های html تمام شد. نوبت به استایل دهی و تعریف کلاس های css می شود.

مرحله سوم- ساخت منو حرفه ای با css

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

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

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

نکته ی مهم دیگر استفاده از Position:relative می باشد. که قرار دادن Position در حالت relative باعث می شود که محل قرار گیری هر زیر منو با توجه به منوی راس آن باشد.

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

کد های زیر نمونه کد css برای ایجاد یک منویی با طراحی ساده می باشد. این کد ها صرفا به عنوان نمونه می باشد.شما می توانید بنابر نیاز خود این کد ها را تغییر دهید.

menu_submenu

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

3.5/5 - (6 امتیاز)
مطالب مرتبط
دیدگاه ها

۳ پاسخ به “نحوه­ ی ایجاد منو و زیر منو با HTML و CSS”

  1. آرمان گفت:

    عالی بود خیلی ممنون

  2. فاطمه گفت:

    بسیار عالی بود ممنون

  3. سینا گفت:

    آموزش خیلی خوبی بود ممنون

دیدگاهتان را بنویسید

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