آموزش ساخت منو با CSS و HTML | جدیدترین + سورس کد منو کشویی

m-gharibi
1399/04/13
740
آموزش ساخت منو با CSS و HTML | جدیدترین + سورس کد منو کشویی

برای درک راحت تر ساخت منو با HTML  و CSS، فرض کنید قراره یک کوزه دکوراتیو زیبا درست کنید، گل و قالبش با HTML  و طراحی و رنگ و لعاب ظاهری با CSS  . مثال از این ساده تر؟! یکی از کوزه های مهم دکوراسیون سایت هم بخش منو و زیرمنو هست که بیشترین استفاده رو برای کاربر داره. منوی خوب و استاندارد باعث میشه کاربر بتونه مثل فهرست یک کتاب، همه سرفصل های محتوای سایت رو در چند لحظه چک کنه و بین صفحات مختلف راحت جابجا بشه. نه اینکه با یه منوی ناقص، زشت و بهم ریخته سردرگم بشه و به سمت رقیب فرار کنه!

اگه دوست دارید از قدم صفرم، طراحی منو با  CSS و HTML رو در قالب مثال عملی یاد بگیرید، جای خوبی اومدید. جدا از اون شما آموزش HTML  و آموزش CSS را اگه دیده باشید این روش ساخت منو با CSS و HTML برای شما بسیار ساده تر خواهد بود .قبل از هرچیز یک نکته رو یادآوری کنیم که در سبزلرن، نوشتن محتوای آموزشی با فرض بر مبتدی بودن کاربر انجام میشه تا مطمئن بشیم همه شما میتونید از اونها استفاده کنید اما اگر کاربر حرفه ای هستید و با اصول و تعاریف هر موضوع آشنایی کامل دارید، میتونید از بخش‌های اولیه محتوا گذشته و یه راست وارد بخش کدنویسی بشید. حالا ببینیم قراره در ادامه مقاله  از کجا به کجا برسیم ؟!

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

قدم دوم : ویژگی های یک منوی حرفه ای رو بررسی میکنیم تا بدونید کلا یک منوی استاندارد باید چه ویژگی هایی داشته باشه. دونستن این نکات به شما کمک میکنه با HTML و CSS یک منوی جذاب و کاربرپسند بسازید.

قدم سوم : سراغ تگ های شرکت کننده در ساخت منو با HTML  میریم و اسم و کاربردشون رو دونه دونه به شما میگیم تا بهتر تو ذهنتون بمونه تا وقتی اونها بین کدهای شلوغ و غریبه دیدید، مثل یه رفیق قدیمی راحت بشناسید.

قدم چهارم : شروع به ساخت منو با HTML  و طراحی و استایل دهی با CSS  می کنیم و خط به خط کدهارو براتون ترجمه می کنیم تا خیلی خوب و عمیق درکشون کنید به حدی که اگر بخواید هم نتونید فراموش کنید! علاوه بر اون چندتا نکته طلایی و سایت مفید و کاربردی بهتون معرفی میکنیم که عاشقشون میشید!

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

تعریف و تفاوت انواع منو

به زبان ساده، منو به مجموعه ای از لینک های لیستی یا تودرتو گفته میشه که مثل فهرست یک کتاب عمل میکنه و بخش های مختلف وب سایت و محتوای اون رو را به کاربر نشان میده!

با این تعریف ساده ممکنه این سوال برای شما پیش بیاد که ریشه نامگذاری انواع منو مثل منوی افقی، منوی کشویی، منوی رسپانسیو چی بوده و مثلا منظور از منوی ناوبری(Navigation Bar  ) دقیقا چیه؟!

منوی افقی (Horizontal Menu)

اگر گزینه های منو به صورت افقی و کنار هم قرار بگیرن، به این حالت منوی افقی میگن و معمولا بالای صفحه سایت قرار میگیره. مثل منویی که در سبزلرن می بینید.

منوی عمودی (Vertical Menu)

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

منوی کشویی (DropDown Menu)

منوهایی که گزینه هاشون دارای زیرمنو باشن و در دو سطح و بیشتر طراحی شدن، منوی کشویی محسوب میشن.

منوی فوتر (Footer Menu)

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

مگا منو (Mega Menu)

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

منوی رسپانسیو (Responsive Menu)

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

منوی ناوبری (Navigation Bar)

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

نکات مهمی که قبل از ساخت منو با HTML و CSS  باید بدانید

پیشبینی تعداد آیتم های منو و زیرمنوها

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

استایل مطابق با UI (رابط کاربری) وب سایت

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

پوشش کامل محتوا

فرض کنید یک وب سایت آموزشی با 30 موضوع مختلف وجود داره اما در بخش منو به همراه زیرمنوها، کاربر فقط 8 مورد از اونهارو می بینه و مابقی از دیدش مخفی میمونن! در حالی که شاید محتوای موردنظرش تو همون 22 بخشی بوده که لینک مستقیم در منو نداشتن!

بنابراین سطح بندی اصولی و کامل منو برای فراهم کردن امکان پیمایش همه قسمت های اصلی سایت خیلی خیلی مهمه!

رعایت اولویت

رعایت اصل کل به جزء و همینطور چیدمان گزینه های منو و زیرمنو به ترتیب اولویت و اهمیت، جزو اساسی ترین نکات ساخت منو با HTML و CSS هست چون باعث میشه درخت محتوای سایت به خوبی در ذهن کاربر شکل بگیره و به درک بهتر و عمیق تر اون کمک کنه!

 

مختصر و مفید

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

کدنویسی سبک و بهینه

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

معرفی تگ های HTML در ساخت منو

مهمترین تگ هایی که برای ساخت منو در HTML  با اونها کار داریم :

تگ <ul>

اصلی ترین تگ برای ساخت منو در HTML هست چون میتونیم به وسیله اون یک لیست به عنوان منو بسازیم و با تگ های  بعدی، گزینه ها، چیدمان، استایل و زیرمنوهای اون رو تکمیل کنیم. (منو اساسا همون لیسته که افقی عمودی میشه! )

تگ <li>

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

تگ <a>

تا قبل از ورود این تگ به بازی، گزینه ها متن خالی هستن و لینک محسوب نمیشن چون هنوز آدرس مشخصی برای اونها تعریف نشده. کار این تگ اختصاص آدرس (URL) به هر کدوم از آیتم هاست. (لینک موقعی لینکه که بشه روش کلیک کرد و مارو به صفحه دیگه ای منتقل کنه )

تگ <nav>

این تگ برای اولین بار در HTML5 اضافه شد و همونطور که در بخش قبلی اشاره شد، برای ایجاد منوهای ناوبری که در همه صفحات ثابت هستن به کار میره.

تگ <div>

با استفاده از این تگ می تونید فضای مورد استفاده در یک صفحه وب  تقسیم بندی کرده و به هر بخش سایت، فضای مناسب رو اختصاص بدید. (مسئول زمین های سایته ایشون )

ساخت منو با HTML و CSS به زبان ساده

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

1 – تعریف لیست (منو)

اولین قدم ایجاد منو در HTML ، تعریف یک لیسته! دلیلشم واضحه چون منو ذاتا یه لیسته و همیشه بیشتر از یک گزینه داره. بنابراین با استفاده از تگ <ul> یک لیست ایجاد کنید.

<ul class="list"></ul>

2 – تعریف آیتم های منو

قصد دارید نوار منوی شما چندتا گزینه داشته باشه؟ در داخل تگ <ul> که در مرحله قبل تعریف کردیم، به ازای هر گزینه یک تگ <li>  ایجاد کنید. مثلا اگر بخوایم یک منو با 4 گزینه  “خانه” ، “دسته‌بندی‌ها” ، “درباره‌ما” و “ارتباط با ما ” بسازیم، باید 4 بار از این تگ استفاده کنیم. به این شکل :

<ul class="list">
→ <li class="list-item">خانه</li>
→  <li class="list-item">دسته بندی ها</li>
→ <li class="list-item">درباره ما</li>
→    <li class="list-item">ارتباط با ما</li>
</ul>

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

3 – تبدیل آیتم ها به لینک با آدرس دهی

حالا یه منو داریم با 4 تا گزینه.  اما اینا فقط متن خالی هستن و لینک محسوب نمیشن چون هنوز به هیچ آدرس اینترنتی (سایت یا صفحه یا فایل) وصل نشدن که بشه روی اونها کلیک کرد. اینجا نوبت استفاده از تگ <a> هست تا به این گزینه ها یک آدرس مشخص اختصاص بدیم و لینک های منو ساخته بشن.

ترجمه کدها :

یادآوری : هرجا با آیتم کار دارید تگ <li>  رو باز کنید

  • اول به سیستم میگی class=”list-item” .

” یعنی برای آیتم های لیست (گزینه های منو) یک کلاس ایجاد کن تا بعدا بتونم صداش کنم و هر تغییری خواستم به صورت یکجا رو همشون اعمال کنم! ”

  • بعد هم تگ <a> رو باز کن بگو href=”index.html”

” یعنی این آدرس رو فعلا داشته باش تا بهت بگم (میتونه “www.google.com” باشه مثلا ) ”

  • بعد بلافاصله میگی : خانهclass=”list-link”>

” یعنی به گزینه “خانه”کلاس لینک بده (به لینک تبدیلش کن و به آدرسی که بهت گفتم وصلش کن) ”

بعد هم تگ <a> و بعدشم <li> رو می بندی و میری برای آیتم بعدی دقیقا همین کارو تکرار می کنی. یعنی 4 خط کد عین همدیگه. فقط اسم گزینه های منو تغییر می کنه. ساخت لینک در HTML به همین سادگیه گول شلوغی کدهارو نخورید.

<ul class="list">
<li class="list-item"><a href="index.html" class="list-link">خانه</a></li>
<li class="list-item"><a href="index.html" class="list-link">دسته بندی ها</a></li>
<li class="list-item"><a href="index.html" class="list-link">درباره ما</a></li>
<li class="list-item"><a href="index.html" class="list-link">ارتباط با ما</a></li>
</ul>

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

(حالا گزینه ها یه لینک واقعی شدن که وقتی روشون کلیک می کنیم یک صفحه خاص باز میشه. یعنی همون چیزی که ما به خاطر اون منو رو میسازیم)

4 – ایجاد زیرمنو

حالا که منوی اصلی تموم شد میخوایم ساخت زیرمنو در HTML رو هم استارت بزنیم تا با منوی چندسطحی یا کشویی هم آشنا بشید. بریم با سیستم صحبت کنیم برامون درستش کنه.

<ul class="list">
<li class="list-item"><a href="index.html" class="list-link">خانه</a></li>
<li class="list-item">
<a href="index.html" class="list-link">دسته بندی ها</a>
→ <ul class="sublist">
→ <li class="sublist-item"><a href="#" class="sublist-link">فرانت اند</a></li>
→ <li class="sublist-item"><a href="#" class="sublist-link">بک اند</a></li>
→ <li class="sublist-item"><a href="#" class="sublist-link">امنیت</a></li>
</ul>
</li>
<li class="list-item"><a href="index.html" class="list-link">درباره ما</a></li>
<li class="list-item"><a href="index.html" class="list-link">ارتباط با ما</a></li>
</ul>

ترجمه کدها :

  • زیر هر گزینه (آیتمی) از منوی اصلی بخواید زیرمنو ایجاد کنید، باید همون جایی که کدهای اون هستن کدهای جدید رو بنویسید تا سیستم بدونه دستورات رو برای کدوم گزینه اجرا کنه (اینجا ما گزینه “دسته بندی ها” رو انتخاب کردیم برای تست)
  • ما چی نیاز داریم؟ زیرمنو ، آیا زیرمنو خودش لیست محسوب نمیشه ؟ چرا اون هم یه لیسته فرقی نداره . پس دوباره باید از متخصص لیست سازی یعنی تگ <ul> استفاده کنید و این بار موقع تعریف، به جای class=”list” از عبارت class=”sublist”  به معنی زیرمنو استفاده می کنیم.
  • حالا همون کاری که برای لینکی شدن گزینه های منوی اصلی انجام دادیم برای زیرمنو هم انجام میدیم که با فلش زرد مشخص شدن.

می بینید که ساخت منوی کشویی در HTML چقدر ساده ست. اما قطعا این منوی فکستنی چیزی نیست که شما بخواید تو سایت استفاده کنید. پس باید یه دستی روش بکشید که هم ‌مرتب‌تر بشه و هم ظاهر جذاب تری پیدا کنه. اینجاست که داستان طراحی منو با CSS شروع میشه.

طراحـی و استایل‌دهی به منـو با CSS

بعد از کدهای HTML  که مربوط به ساختار منو هستن ، باید چیدمان و رنگ و لعاب اون رو با CSS  تغییر بدید تا به یک منوی حرفه ای و استاندارد تبدیل بشه. اولین کار اینه که برای محکم کاری، همه اضافات رو حذف کنید تا مطمئن بشید همه چیز از اول شروع میشه. فقط خود لینک ها مهم هست فعلا.

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

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

فونت و رنگ (Font & Color)

از ابتدایی ترین ویژگی ها شروع می کنیم. یعنی فونت و سایز آیتم ها! اما قبلش باید خطوط زیرین گزینه های منو رو پاک کنید چون نیازی به اونها نیست. بنابراین بعد از فراخوانی لیست و زیر لیست به سیستم میگیم :

text-decoration: none  یعنی هیچ خطی به بالا و پایین عبارت اضافه نکن.

color: #00d084   که این مقدار معادل رنگ سبز هست . هر رنگ دیگه ای خواستید میتونید استفاده کنید.

و در نهایت font-family: ‘yekan’  یعنی فونت متن منو به فونت یکان تبدیل بشه

.list-link,
.sublist-link{
text-decoration: none;
color: #00d084;
font-family: 'yekan';
}

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

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

بنابراین بعد از فراخوانی زیرمنوی موردنظر و مقداردهی  display: none  ، خواهید دید که زیرمنوها رفتن تو کشوی خودشون!

.sublist{
display: none;
}

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

تنظیمات موقعیت و چیدمان منو در صفحه

منوها معمولا به صورت افقی در سایت ساخته میشن تا هم فضای کمتری اشغال کنه و هم باعث به هم ریختن بخش های پایین تر اون نشه! پس در اولین قدم تنظیمات موقعیت و چیدمان منو با CSS  ، باید کاری کنیم که نمایش گزینه های منو از حالت عمودی به افقی تبدیل بشه و گزینه ها با فاصله متعادل کنار هم قرار بگیرن

بعد هم بسته به نیاز و سلیقه، تعیین میکنیم به صورت وسط چین باشه یا راست (زبان فارسی) و در منوهای انگلیسی هم وسط چین یا چپ. حالا بریم اینارو به کد تبدیل کنیم.

.list,
.sublist{
list-style-type: none;   نمیخوام گزینه های لیست هیچ علامت یا عددی پشت سرشون باشه
margin: 1.5rem auto; میدونید که وقتی بخوایم فاصله مارجین از 4 جهت به یک اندازه باشه فقط یک بار عددو مینویسیم
width: 70%;    یعنی میخوام عرضش 70 درصد عرض کل باشه
display: flex;     با انتخاب این مقدار، تگ به صورت تمام عرض نمایش داده میشه
flex-direction: row-reverse;گزینه ها را به صورت افقی بچین
align-items: center;آیتم ها را در وسط ظرفشان قرار بده
justify-content: center; کل باکس منو هم در وسط ظرفش قرار بگیرد
}
.list-item,
.sublist-item{
padding: 0.5rem 1rem; مقدار فاصله درونی آیتم با مرز باکسش رو تعیین میکنیم برای 4 طرف و بصورت مساوی
}

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

پس زمینه (Background)

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

توجه کنید که اینجا فقط سه خط کد جدید اضافه کردیم و مابقی همون هایی هست که در مرحله قبل نوشتیم!

.list,
.sublist{
list-style-type: none;
margin: 1.5rem auto;
width: 70%;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
border-radius: 5px; موقعی استفاده میشه که دوست دارید لبه های منو کمی گردتر باشن ( منحنی به جای تیز)
background-color: #000080; کد رنگ پس زمینه
}

.list-item:not(:last-child){  اینجا گفتیم تغییراتی که در ادامه میگیم رو برای همه گزینه های منو به جز آخری انجام بده
border-left: 1px solid #f9f9f9; فعال کردن(ظاهر کردن) خط مرزی یا همان بوردر آیتم برای جداسازی بهتر
}

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

هاور (Hover)

با هاور که آشنا هستید؟! برای یادآوری بدونید که با استفاده از کدهای CSS، میتونیم تعیین کنیم وقتی اشاره‌گر ماوس روی یک متن یا بخشی از سایت (به طور کلی یکی از تگ ها )قرار میگیره ، اتفاق موردنظر ما بیفته. مثلا وقتی روی یک گزینه از منوی سایت رفت، رنگش عوض بشه!

حالا ما میخوایم برای مثال، کاری کنیم موقعی که کاربر روی گزینه های منو میره، رنگ پس زمینه اون گزینه تغییر و نوشته ی اون بولد بشه. پس باید بنویسیم :

.list li:hover{
transition: all 0.نیم ثانیه بعد از رفتن نشانگر ماوس روی گزینه های منو ،تغییرات بعدی رو انجام بده
background-color: #dfdfdf;  رنگ پس زمینه اون آیتم وقتی ماوس روی اون قرار میگیره
color: #000080;
}
.list a:hover{
transition: all 0.5s; نیم ثانیه بعد از رفتن نشانگر ماوس روی گزینه های منو ،تغییرات بعدی رو انجام بده
font-weight: bold; متن گزینه منو بولدتر یا همون ضخیم تر بشه
color: currentColor;
}

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

استایل دادن به زیر منو:

مثل همیشه اولین کار برای هر تغییر انتخاب و انتساب درست جایی هست که قصد داریم تغییرش بدیم. بنابراین  بنابراین باید گزینه های زیرمنو رو انتخاب و اونها رو با استفاده از position: relative  ، به عنوان فرزند تعریف می کنیم

در مرحله بعد به تگ ul مربوط به زیر منو استایل میدیم. نحوه چیدمان ایتم های زیرمنو رو مشخص میکنیم، پوزیشن absolute  میدیم تا نسبت به والد خودش موقعیت بندی بشه و در نهایت با دادن عرض و ارتفاع سایز اون رو مشخص میکنیم.

حالا خود ایتم های زیر منو هم انتخاب میکنیم و 100 میدیم تا کل عرض والد خودش رو بگیره

متن رو هم وسط چین میکنیم تا ظاهرش کاملا یکدست و منظم به نظر بیاد.

.list-item__submenu {
position: relative;
}

.sublist{
display: none;
flex-direction: column;
border: none;
position: absolute;
top: 1.2rem;
right: 0;
width: 200px;
height: auto;
}

.sublist-item{
width: 100%;
text-align: center;
}

.list-item__submenu:hover ul.sublist {
display: flex;
}

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

نکات طلایـی ساخت منو حرفه‌ای با HTML  و CSS

  • قبل از استایل دهی، reset کردن استایل های پیش فرض نکته مهمی هست که برای محکم کاری نیازه انجام بدید تا در ادامه کار به مشکل نخورید .گاهی پیش میاد که هر تغییری انجام میدید آخرش یه جای کار درست درنمیاد و دلیلش همین استایل های پیش فرض هست. پس سعی کنید این نکته رو رعایت کنید
  • موقع ساختن زیرمنو، حتما توجه کنید که در تگ <li> همون گزینه منو ، تگ <ul> زیر منو رو تعریف کنید. مثل کاری که ما در این مثال کردیم و نکته رو نوشتیم. با اینکار بعدا در ظاهر کردن و اعمال تغییرات جدید روی زیرمنو به مشکل بر نمیخورید.
  • شما در کدنویسی هر کاری می خواید انجام بدید اول باید اون بخش رو فراخوانی یا اصطلاحا صدا بزنید. بنابراین مثل انسانها هرکدوم باید به کلاس ها هم اسامی خاص و قابل فهم بدید تا کدهای مرتب و منظمی داشته باشید. هرچقدر حجم کدها بیشتر میشه رعایت این نکته هم مهمتر و واجب تر میشه.
  • برای آشنایی بیشتر با کلاس ها و پراپرتی ها و تگ ها و اینکه چه کاربردی دارن و چه مقادیری می پذیرن میتونید از سایت free-learn.ir استفاده کنید.
  • برای شناختن مسیر یادگیری هرکدوم از تخصص های برنامه نویسی ، sh  میتونه به شما دید خیلی خوبی بده
  • اگه دوست دارید همه دستورات ممکن در فضای HTML و CSS  رو یکجا ببینید و نحوه استفاده از اونهارو یاد بگیرید، سایت com  برای شما ساخته شده. فقط کافیه چیزی که نیاز دارید رو سرچ کنید!

خلاصه کلام

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

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

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

دلتون شاد و کدهاتون بی باگ…

نظرات
ثبت نظر جدید

نظری برای این مقاله ثبت نشده است