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

آشنایی با منو های Vertical در CSS

آشنایی با منو های عمودی در CSS
آشنایی با منو های عمودی در 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;
}

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

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

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

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

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

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

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

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

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

از بین بردن حالت 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;
}

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

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

استفاده از 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);
}

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

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

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

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

12 نظر

12 پاسخ

  1. سلام وقت بخیر.چگونه typeهای متفاوت بر فرض مثال تصویر دلخواه برای تگulقرار دهیم.

    1. سلام نرگس خانم وقت شمام بخیر. برای این منظور میتونین از دستور list-style-image استفاده کنین. نمونه کدش در وب سایت w3schools موجوده.

  2. سلام من وقتی سی اس اس بعضی از سایتا رو میبینم از یه
    * {
    padding: 0;
    margin: 0;
    }
    همچین چیزی استفاده میکنن
    میشه توضیح بدین برای چی استفاده میشه؟

    1. سلام متين. انتخابگر * رو تو مقاله انتخابگر ها در CSS توضيح داديم كه تمام عناصر در صفحه رو ميتونه انتخاب كنه.
      اما در مورد دستوراتي كه نوشته شده، بايد بگم كه هميشه يك سري از عناصر HTML داراي پدينگ ها و مارجين هاي پيش فرض هستن كه اين موضوع ميتونه باعث بشه مارجين ها و پدينگ هايي كه ما ميديم به درستي كار نكنن. توسط اين دستور، به صفحه ميگيم هرچي مارجين و پدينگ ديفالت ميبيني رو حذف كن كه ما ديگه دچار مشكل نشيم 🙂

  3. سلام
    من وقتی لیست ها رو با متن فارسی ایجاد میکنم بصورت چپ چین نمایش داده میشند و مثل مثالی که تو مقاله زدین راست چین نیستند.
    از direction: rtl استفاده کردم ولی وقتی عرض رو کم کردم (width:30%) دوباره به حالت چپ چین برگشت.
    ممنون میشم راهنمایی کنید.

  4. با عرض سلام من چطور متوجه شوم که به یک تگ اچ تی ام ال مثلا li یا ul چه خاصیت هایی از سی اس اس قابل اعمال است و چه خاصیت هایی قابل اعمال نیست با تشکر ؟

    1. سلام ابراهیم جان
      تا جایی که میدونم به تگ های ul و li تمام خاصیت ها رو میشه اعمال کرد. اگه در مورد خاصیت مشخصی شک داری کارکردش رو بررسی کن، یا اگه با اون خاصیت آشنایی نداری معرفیش کن که بررسیش کنیم

  5. سلام
    من برای nav سایتم یه منوی آبشاری یا همون drop down درست کردم ، وقتی که میرم روی منو و منو باز میشه ، مطالب main که زیر قسمت nav هستن ، میفته روی مطالب منو ، این مشکلو چجوری حل کنم ؟ اینم بگم که هیچ کدوم از قسمت ها position ندارن .
    ممنون

    1. سلام مهرداد
      این مسئله میتونه دلایل خیلی زیادی داشته باشه، بنابراین باید کد رو بررسی کرد و نظر داد.
      اما حدس میزنم که خاصیت z-index بتونه مشکلت رو حل کنه. این خاصیت مشخص می کنه که کدوم عناصر، رو باشن. برای مثال اگه برای یک p، دستور z-index:2 و برای یک div، دستور z-index:4 رو قرار بدی، عنصر div روی عنصر p قرار می گیره.
      عنصر با z-index بالاتر، همیشه روی عناصر با z-index پایین تره.

  6. سلام و خسته نباشید خدمت دوستان.
    سایتتون بسیار عالی هستش.
    من تازگی css رو شروع کردم و سایت شما کمک خیلی خوبی به من کرده و داره میکنه ممنون از زحمات شما 🙂

    1. سلام عارف عزیز.
      خوشحالیم که خدمت شما هستیم و اگر سوالی داشتی حتما بپرس از شما.
      موفق باشی.

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=