جلسه ۵۴ – منو های عمودی در CSS

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

برای یاد گرفتن نحوه طراحی این منو ها، یک منوی ساده رو مرحله به مرحله با هم طراحی می‌کنیم.

مرحله اول – ساختار منو های عمودی

برای شناخت این منو ها، قبل از هرچیزی باید ساختار HTML اون ها رو بشناسیم.

ساختار HTML منو های عمودی، از عناصر unordered list یا لیست های بدون ترتیب بهره می‌بره.

مثال زیر، یک ساختار ساده HTML از منو ها رو نشون می‌ده:

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>

که نتیجه زیر رو به ما ارائه می‌کنه:

اما هنوز چندان شبیه یه منو نشده، پس باید تغییرات بیشتری رو انجام بدیم.

مرحله دوم – خاصیت list-style-type

مرحله دوم ساخت یک منوی خوب تو CSS، استفاده از خاصیت list-style-type هست که ترتیب دهی عناصر li تو یک عنصر ul رو با استفاده از مقادیر زیر مشخص می‌کنه:

• decimal
• georgian
• none
• square
• disc
• …

در اینجا فقط با مقدار none کار داریم که اون دایره بدرد نخور رو (البته فقط در اینجا بدردمون نمی‌خوره! ) از پشت عناصر li برمی‌داره.

همچنین باید یه دستور padding-right:0px به عنصر ul اضافه کنیم تا پدینگ اضافه ای که برای دایره ی حذف شده به صورت پیش فرض اضافه شده، از بین بره.

کد CSS زیر رو به عنوان چاشنی به کد HTML‌ اضافه می‌کنیم.

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>

ul{
   list-style-type: none;
   padding-right:0px;
}

نتیجه رو به فرم زیر مشاهده می‌کنیم:

مرحله سوم – استایل دهی به عناصر li و ul

حالا زمان این می‌رسه که یک سری استایل های مهم رو به ul و li اختصاص بدیم که منو های ما به اون ها نیازمندن.

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

توسط کد CSS زیر، این کار رو انجام می‌دیم:

ul{
   list-style-type: none;
   background-color: #141414;
}
li{
   color:#00b318;
   font-family: iransansweb;
}

منوی ما به شکل زیر تغییر می‌کنه:

از بین بردن حالت block

همونطور که می‌بینیم،‌منو تا انتهای صفحه گسترده شده که مطمئنا ما اینطور چیزی رو نمی‌خوایم! دلیلش چیه؟

همونطور که از فصل های قبل یاد گرفتیم، عنصر ul از عناصر بلاک هست که یک سطر کامل رو برای خودش اشغال می‌کنه.

پس دومین استایل ، از بین بردن دستور display:block هست.

برای این منظور می‌تونیم از یکی از دو راه زیر استفاده کنیم:

• استفاده از دستور display:inline-block برای عنصر ul
• استفاده از خاصیت width برای ul و li

اگه از روش اول استفاده کنیم، عرض منوی ما متناسب با محتوای داخلش می‌شه. یعنی اگه عرض کلمات ما ۱۰۰ پیکسل باشه، عرض منوی ما هم به تناسب، برابر ۱۰۰ پیکسل می‌شه.

ما اینجا از روش دوم استفاده می‌کنیم که در اون، عرض منو، ربطی به عرض کلمات ما نداره.

توسط کد CSS زیر، عرض منو رو ۳۰ درصد عرض صفحه قرار می‌دیم:

ul{
   list-style-type: none;
   background-color: #141414;
   width:30%;
}
li{
   color:#00b318;
   font-family: iransansweb;
}

استفاده از padding‌ مناسب

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

عملکردش اینه که دور محتوای درون یک عنصر فاصله ایجاد کنه، اما به شدت اهمیت بالایی داره.

پس خاصیت padding رو همراه با یک مقدار منطقی به کد CSS اضافه می‌کنیم:

ul{
   list-style-type: none;
   background-color: #141414;
   width:30%;
}
li{
   color:#00b318;
   padding: 20px;
   font-family: iransansweb;
}

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

استفاده از border-bottom

مسئله بعدی، اینه که باید مجزا بودن لینک های داخل منو، از هم دیگه مشخص باشه. برای این منظور، از خاصیت border-bottom استفاده می‌کنیم:

ul{
   list-style-type: none;
   background-color: #141414;
   padding-right:0px;
   width:30%;
}
li{
   color:#00b318;
   padding: 20px;
   font-family: iransansweb;
   border-bottom: 1px solid rgba(0, 179, 24, 0.4);
}

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

اگه جایی براتون سوال پیش اومد، حتما تو قسمت نظرات بپرسین تا کمکتون کنیم 🙂

نتیجه گیری

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

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

در مقاله بعدی، ساختن یک منوی افقی رو با هم یاد می‌گیریم. 🙂

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

مدیر محتوا: علی اسمعیلی‌