آموزش ساخت منوی کشوی در طراحی سایت با استفاده از html و css

0 74

آموزش ساخت منوی کشوی با استفاده از html و css

یکی از امکاناتی که CSS3 در اختیار ما قرار داده است،این است که بتوانیم بدون استفاده از کدهای جاوا اسکریپت یک منوی کشوی یا همان دراپ داون را با استفاده از کدهای html و css را طراحی کنیم.

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

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

پیش نیاز :در این آموزش فرض بر این است که شما با مفاهیم پایه html و css آشنایی دارید.

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

نمونه ای که قرار است با آن آموزش ببینیم در زیر نمایش داده شده است:

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

 

گام اول

ساخت چارچوب کار با HTML

مرحله اول کد html

قبل از اینکه سراغ کدهای css برویم باید کدهای html را پیاده سازی کنیم.برای ایجاد منو در html  از تگ های ul و li استفاده می کنیم.ابتدا دستور زیر را در محیط برنامه نویسی خود پیاده سازی می کنیم.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

همانطور که در کدهای بالا ملاحظه می کنید،کدهای html منو،از چند لیست تودرتو ساخته شده است. با استفاده از تگ <a> هم می‌توان یک لینک در صفحه به وجود آورد. مقدار پارامتر href این تگ، در واقع آدرسی است که قرار است با کلیک روی آن، به صفحهٔ مد نظر برویم.ما در این جا مقدار اتری بیوت آن را برابر # قرار می دهیم تا با کلیک روی آن به صفحه دیگری نرود.و در بین حالت آغازی و پایانی تگ <a> متن مورد نظر خود را می نویسیم.

خروجی کد بالا به صورت زیر درآمده است:

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

مرحله دوم کد html

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

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

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

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

مرحله سوم کد html

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

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

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

گام دوم

ساختار کدهای CSS(ایجاد استایل به منوها)

تا اینجای کار، اسکلت بندی منو را با استفاده ازیک طرح منظم از زبان html ایجاد کرده ایم. حال در ادامه، به بررسی ساختار کدهای CSS خواهیم می پردازیم.

مرحله اول کد css

ابتدا منوهای فرعی را با قرار دادن هر تگ <ul> در داخل تگ <ul> اصلی با استفاده از کد ;display: none پنهان می‌کنیم و مقدار پراپرتی مرتبط با display را برای وقتی که ماوس را روی آن منو قرار می‌گیرد ، برابر با block قرار دهیم.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

مرحله دوم کد css

به تمام ul ها پراپرتی ;position:relative را قرار می دهیم تا موقعیت منوهای فرعی را با توجه به نوار منوی اصلی تنظیم کند.و پراپرتی ;display:inline-table را برای کوچک کردن پهنای منو به کار می بریم.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

 

مرحله سوم کد css

در این مرحله نوبت به طراحی منوها رسیده است که باید استایل ها را به تگ<li> نسبت دهیم.ابتدا پراپرتی ;float:rightرا قرار می دهیم تا تمام منوها از سمت راست کنار هم قرار گیرند.سپس برای اینکه روی هر کدام از منوها قرار گرفتیم  رنگ مشخصی داشته باشند به آن background و رنگ مشخصی هم به لینک ها (نوشته های داخل هر کدام از خانه ها) می دهیم.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

مرحله چهارم کد css

حالا که استایل های منوهای اصلی تمام شد نوبت به استایل های زیر منوها رسیده است. در حال حاضر، آن‌ها طرح خود را از طرح منوی اصلی به ارث می‌برند.در این قسمت ;position:absolute را برای قرارگیری ul های زیرمنو تعریف کرده ایم تا بتوانیم موقعیت آنها را نسبت به آیتم والد تعیین کنیم. که این کار را با تعیین فاصله ۱۰۰ درصد از بالا و ۰ از سمت راست انجام داده ایم.همچنین می توانید برای زیبایی، عرض زیرمنو را نیز تعیین کنید.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

مرحله آخر کد css

مرحلهٔ آخر، تنظیم موقعیت زیرمجموعه‌های زیرمجموعه‌ها است. آن‌ها تمامی خصوصیات زیرمجموعه را به ارث می‌برند.ما در این مرحله ;right:100% قرار می دهیم تا کاملا به سمت چپ منتقل شوند.

آموزش ایجاد منوی کشوی(آبشاری) در طراحی سایت با استفاده از HTML و CSS

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

امیدوارم از این آموزش بهره کافی را برده باشید.

برای دانلود کدهای کامل نمونه ذکر شده،فایل زیر را دانلود کنید.

شما همچنین ممکن است مانند بیشتر از نویسنده

ترک یک پاسخ

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