آموزش برنامه نویسی وب و مهارتهای مرتبط

چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

ساخت منوی آبشاری (عمودی) با تگ ul li و CSS

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر CSS و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در HTML برای کدنویسی منوها و اهمیت آنها برای موتورهای جستجو و افزایش قابلیت های کاربری (Accessibility) و SEO صفحات وب اشاره کردیم، این بار و در ادامه آموزش ها می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا منوی عمودی (Vertical) با تگ ul li با استفاده صرف از خاصیت های زبان استایل نویسی CSS آشنا شویم، از نقاط مثبت این منو سازگاری با زبان فارسی (چینش متن از سمت راست به چپ) و نمایش یکسان در مرورگرهای مختلف در عین سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگرهای قدیمی از جمله اینترنت اکسپلورر نسخه 6 (منسوخ شده) قابل استفاده نیست.

ایجاد چارچوب اولیه با کدنویسی HTML و تگ ul li

قبل از هر چیز طبق روال باید چارچوب اولیه منوها را با استفاده از تگ های ساخت لیست در HTML یعنی دو تگ ul و li کدنویسی کنیم، در رابطه با این دو تگ و نحوه ایجاد آیتم ها به شکل لیست به صورت مفصل در آموزش های مقدماتی CSS گفته ایم که جهت یادآوری در آدرس زیر در دسترس است:
نحوه تنظیم لیست با تگ ul li در CSS
کدنویسی HTML چارچوب اولیه منو با استفاده از تگ های ul و li:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- Webgoo.ir -->
</head>
<body>
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="https://webgoo.ir">خانه &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
   </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خدمات &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li><a href="#">درباه</a></li>
<li><a href="#">تماس</a></li>
</ul>
</div>
<hr>
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.
</body>
</html>

توضیح:
- اگر کد بالا را در فایل متنی برنامه Notepad درج و با پسوند html (یونیکد UTF-8) ذخیره و اجراء کنیم خواهیم دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه از قابلیت لیست های آشیانه ای (Nested) یا تو در تو استفاده کرده ایم، نحوه چینش دقیق ساختار تگ های ul و li به این صورت یکی از قسمت های اصلی ساخت لیست منوها است، به صورت خلاصه و ساده ساختار منوی بالا به شکل زیر است:

<ul>
<li>منو سطح بالا
  <ul>
    <li>منو سطح یک
      <ul>
        <li>منو سطح دو</li>
      </ul>
    </li>
   </ul>
</li>
</ul>

با درک صحیح این ساختار به ظاهر پیچیده می توانیم هر تعداد منوهای تو در تو که نیاز داشتیم ایجاد کنیم.

سفارشی سازی ظاهر منو و ایجاد قابلیت تعاملی با استایل CSS

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

<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#vertical-nav {
    width: 150px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    /*float: right;*/
    direction: rtl;
    text-align: center;
    z-index: 1000;
}
#vertical-nav ul {
    margin: 0px;
    padding: 0px;
    *border-top: 1px #333 solid;/*IE 7*/
}
ul.vertical-top-level {
    background-color: #333;
}
#vertical-nav li {
    list-style: none;
}
ul.vertical-top-level li {
    border-bottom: #fff solid 1px;
}
#vertical-nav a {
    color: #fff;
    display: block;    
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    width: 100%;    
}
#vertical-nav a:hover{
    _background-color: #39C;/*IE 6*/
    _display: block;/*IE 6*/     
}
#vertical-nav li:hover {
    background-color: #39C;
    position: relative;
}
ul.vertical-sub-level {
    display: none;
}
li:hover .vertical-sub-level {
    background-color: #666;
    border: #fff solid 1px;
    display: block;
    position: absolute;
    right: 150px;
    top: 0px;
}
ul.vertical-sub-level li {
    border: none;
    float: right;
    width: 150px;
    *background-color: #666;/*IE 7*/    
}
#vertical-nav .vertical-sub-level {
    background-color: #666;
}
#vertical-nav .vertical-sub-level .vertical-sub-level {
    background-color: #666;
}
li:hover .vertical-sub-level .vertical-sub-level {
    display: none;
}
.vertical-sub-level li:hover .vertical-sub-level {
    display: block;
    *left: 0px;/*IE 7*/
}
</style>

توضیح:
- position و display دو خاصیت کلیدی CSS هستند که در عملکرد منو نقش تعیین کننده دارند، تغییر مقادیر پیش فرض این خاصیت ها می تواند در نحوه نمایش صحیح منو تاثیرگذار باشد.
- باید به نحوه تعریف چند سلکتور کلاس به صورت سلسله مراتبی و والد فرزندی توجه داشته باشیم، به فرض تنظیم سلکتور به صورت زیر در کد استایل بالا بر روی عناصر منوی زیر مجموعه سطح دوم تاثیرگذار است:

#vertical-nav .vertical-sub-level .vertical-sub-level

یا به طور مثال اگر به انتهای استایل دقت کنیم این قسمت:

li:hover .vertical-sub-level .vertical-sub-level

در حالتی که ماوس را روی منوی سطح بالا می بریم باعث محو شدن منوی زیرمجموعه سطح دوم می شود.
- قسمت هایی که با یک علامت زیر خط (underline) و ستاره در ابتدای آنها تعریف شده اند، هک CSS مخصوص مرورگر اینترنت اکسپلورر است تا خاصیت های منو در این مرورگر به درستی نمایش داده شوند (علامت _ هک برای اینترنت اکسپلورر نسخه 6 و علامت * هک برای اینترنت اکسپلورر نسخه 7 است).
- به جزء برخی از ویژگی های منو که برای کارکرد صحیح آن ضروری است سایر موارد مربوط به ظاهر و نمایش محتوا قابل سفارشی سازی و تغییر هستند.

سازگاری منو با مرورگرهای قدیمی

یکی از مواردی که در استفاده از این نوع منوها و امکانات تعاملی در وب باید به آن توجه نمود، قابلیت سازگاری با مرورگرهای قدیمی است، اشکال عمده برنامه هایی که تحت عنوان ساخت منوی آماده استفاده می شوند نیز همین مسئله است که اغلب محصول نهایی آنها تنها در مرورگرهای به روز به درستی نشان داده می شود یا اینکه برای کارکرد صحیح به حجم زیادی از فایل های جانبی نیاز است، اما در مورد این منو تلاش زیادی کرده ایم که بدون استفاده از فایل ها و اسکریپت های جانبی جلوه های آن را تقریبا با تمام مرورگرهای جدید و قدیمی سازگار کنیم و در عین سادگی و سبکی قابلیت های کاربردی منو تقریبا در تمام مرورگرها (Firefox, Opera, Internet Explorer +6, Google Chrome و...) یکسان است، منتها در مورد مشکل همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر نسخه منسوخ شده 6 به دلیل پشتیبانی نشدن قابلیت hover برای تگ li، زیر مجموعه های این منو در این نسخه از اینترنت اکسپلورر به درستی نمایش داده نخواهد شد، لذا بهترین گزینه در چنین شرایطی به اصطلاح ایمپورت استایل خاص برای این مرورگر است یا اینکه به بازدیدکنندگان خود که از این مرورگر قدیمی و آسیب پذیر استفاده می کنند پیامی مبنی بر پشتیبانی نشدن امکانات سایت توسط مرورگر آنها نمایش دهیم، به طور مثال با دستور شرطی زیر می توان این کار را انجام داد:

<!--[if IE 6]>
کاربر گرامی مرورگر شما از امکانات این سایت به درستی پشتیبانی نمی کند، لطفا نسخه مرورگر خود را ارتقاء دهید!
<![endif]-->

کد و پیش نمایش آنلاین

کد نهایی منوی آبشاری عمودی با استایل CSS و تگ ul li و همچنین پیش نمایش آنلاین آن را جهت تست و بررسی در ادامه قرار داده ایم که می توانیم برای تست و بررسی بیشتر از آن استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#vertical-nav {
    width: 150px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    /*float: right;*/
    direction: rtl;
    text-align: center;
    z-index: 1000;
}
#vertical-nav ul {
    margin: 0px;
    padding: 0px;
    *border-top: 1px #333 solid;/*IE 7*/
}
ul.vertical-top-level {
    background-color: #333;
}
#vertical-nav li {
    list-style: none;
}
ul.vertical-top-level li {
    border-bottom: #fff solid 1px;
}
#vertical-nav a {
    color: #fff;
    display: block;    
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    width: 100%;    
}
#vertical-nav a:hover{
    _background-color: #39C;/*IE 6*/
    _display: block;/*IE 6*/     
}
#vertical-nav li:hover {
    background-color: #39C;
    position: relative;
}
ul.vertical-sub-level {
    display: none;
}
li:hover .vertical-sub-level {
    background-color: #666;
    border: #fff solid 1px;
    display: block;
    position: absolute;
    right: 150px;
    top: 0px;
}
ul.vertical-sub-level li {
    border: none;
    float: right;
    width: 150px;
    *background-color: #666;/*IE 7*/    
}
#vertical-nav .vertical-sub-level {
    background-color: #666;
}
#vertical-nav .vertical-sub-level .vertical-sub-level {
    background-color: #666;
}
li:hover .vertical-sub-level .vertical-sub-level {
    display: none;
}
.vertical-sub-level li:hover .vertical-sub-level {
    display: block;
    *left: 0px;/*IE 7*/
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="https://webgoo.ir">خانه &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
   </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خدمات &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
        <li><a href="#">منوی زیر مجموعه - 2</a></li>
      </ul>
    </li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li><a href="#">درباه</a></li>
<li><a href="#">تماس</a></li>
</ul>
</div>
<hr>
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.
</body>
</html>

پیش نمایش آنلاین
نکته: برای استفاده از این منو در وبلاگ ها و سایت ها باید بخش های اضافه نظیر تگ html، head و body از کد منو حذف شوند که نیازمند آشنایی قبلی با HTML است، همچنین دقت داشته باشیم که خاصیت های منو با موارد دیگری در استایل CSS قالب وبلاگ و سایت تداخل و هم نامی نداشته باشند.

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

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
چسبیدن فوتر قالب به پائین صفحه با CSS
ساخت بلاک شناور عمودی با CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3

دیدگاه

۶۸ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

امیرسون

۱۲:۰۷ ۱۳۹۳/۱۲/۰۲

خیلی عالیه

جلیل

۱۷:۲۳ ۱۳۹۳/۱۱/۲۳

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

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

یاس

۱۴:۴۹ ۱۳۹۳/۱۰/۲۸

سلام
میشه بفرمایید لطفا چجوری می توانم به منوی اصلی بشود صفحه اصلی لینک دهم جهت سایتم و همچنین به زیر منوها چه جوری می توانم لینک دهم؟؟؟ با تشکر

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

حسن

۱۵:۱۱ ۱۳۹۳/۰۹/۲۶

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

انجام این کار نیازمند ارائه آموزشی مجزا است، جزء اینکه خودتان با CSS و خاصیت هایی مانند position آشنایی کافی داشته باشید.

akram

۱۵:۵۷ ۱۳۹۳/۰۸/۰۱

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

قاعدتا بدون آشنایی مقدماتی استفاده از کدهای خام و پیشرفته توصیه نمی شود، شاید بهتر باشد از برنامه های منو ساز یا کدها آماده استفاده کنید، هرچند در هر صورت داشتن حداقل دانش HTML ضروری است!

رضا

۲۰:۴۴ ۱۳۹۳/۰۷/۰۸

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

حسین

۱۴:۴۳ ۱۳۹۳/۰۶/۰۹

سلام. کد css زیر از آموزش بالا گرفته شده ：

li:hover .vertical-sub-level {
    background-color:#666;
    border:#fff solid 1px;
    display:block;
    position:absolute;
    right:150px;
    top:0px;
}

سوالم این است که اگر به جای

li:hover .vertical-sub-level

از

#vertical-nav li:hover .vertical-sub-level

استفاده کنیم در نمایش منو مشکل پیش می آید (مشکل اینه که این کد برای ul های سطح دو هم اعمال می شود در حالی که فقط باید برای ul های سطح یک اعمال شود.)
علت چیست؟؟؟
ببخشید باعث زحمت شما شدیم.

برای تمایز بین دو سطح می توانید مستقیما برای سطح دوم استایلی متفاوت تعریف کنید، مثال:

#vertical-nav .vertical-sub-level .vertical-sub-level {
    background-color: #C30;
}

حسین

۲۰:۴۱ ۱۳۹۳/۰۶/۰۷

سلام. لطفا در مورد استفاده از چند کلاس به صورت پلکانی که در بین آموزشتون استفاده کردید توضیحاتی بفرمایید من خیلی با این موضوع مشکل دارم.
مثلا اگر یک تگ a داخل یک li و ul و div باشد چطور می شود یک کلاس بصورت پلکانی به تگ a داد؟
ببخشید ممکنه سوالام مبهم باشه ولی ما رو از آموزش های عالیتون محروم نکنید.

خیلی سخت نیست، بر اساس اصول HTML DOM و تبعیت CSS از آن:

li ul div a{
}

این ویژگی بر روی آخرین تگ تعریف شده (a) در عناصر مد نظر شما (li ul div) اعمال می شود؛ مثال:

<style>
li ul div p{
	color: #C00;
	font-size: 36px;
}
</style>
<p>1</p>
<li>
<ul>
<div>
<p>
2
</p>
</div>
</ul>
</li>

davood

۱۶:۵۱ ۱۳۹۳/۰۵/۲۱

سلام خسته نباشید و ممنون از وب عالی تون
من منو ها رو میخواستم از بالا به پایین باز بشه مثل منو ی خودتون باید کجای کد رو تغیر بدم؟

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

وحید

۲۰:۵۰ ۱۳۹۳/۰۳/۲۵

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

تنظیم منو مطابق سلیقه خودتان نیاز به آشنایی با CSS دارد، به طور مثال می توانید منو را داخل یک بلاک با text-align: right یا float با مقادیر right قرار دهید، در کل این بستگی به سایر المان های موجود در صفحه وب نیز دارد.

ندا

۱۰:۴۴ ۱۳۹۳/۰۳/۱۸

سلام. ممنون از آموزشهای خوبتون. من width سطح اولو بزرگ کردم اما سطح های بعدی رو هر کاری میکنم تنظیم نمیشن. یعنی وقتی مثلا "خرید" رو بخوام باز کنم، سطح بعدی روی همین سطح اول میفته. کدوم ویژگی رو باید دستکاری کنم؟

ویرایش منو به این شکل خیلی ساده نیست و باید قوانین CSS را رعایت کنید، به طور مثال با افزایش width سطح بالا باید برای سطح های بعدی، استایل زیر را اضافه کنید:

ul li:hover .vertical-sub-level {
    right: 250px;
}

ul li ul li:hover .vertical-sub-level {
    right: 250px;
}

و یا با افزایش width زیرمجموعه سطح اول باید استایل زیر را برای زیرمجموعه سطح دوم اضافه کنید:

ul li ul li:hover .vertical-sub-level {
    right: 250px;
}

در کل باید بر اساس نحوه چینش درختی تگ ها استایل CSS را به آنها با در نظر گرفتن حالت های مختلف نسبت دهید.

علیرضا

۱۰:۱۸ ۱۳۹۳/۰۲/۰۶

سلام خیلی مطلب خوبی بود . فقط من می خواهم به صورت افتی استفاده کنم میشه بفرمایید کجا هاش رو باید درست کنم

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

محمد

۱۹:۲۵ ۱۳۹۲/۱۲/۱۹

بسیار خوب خیلی ممنون بابت راهنماییتون و سپاس فراوان

محمد

۱۴:۰۴ ۱۳۹۲/۱۲/۱۹

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

#nav 
#nav li
# a

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

#nav ul
#nav ul li
#nav ul a

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

# nav ul ul

اگر دستور

#nav li:hover > ul

را اجرا کنم تمام زیر منوهای اولی نمایش داده می‌شود همچنین دستور

#nav li:hover > ul ul{
    display:none;
}

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

#nav li ul li:hover ul ul
{
	display: block;
	position:absolute;
}

اگه ممکنه من رو راهنمایی کنید
خیلی ممنون و بی نهایت سپاس
با احترام
محمد

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

محمد

۲۰:۴۵ ۱۳۹۲/۱۲/۱۸

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

#main-menu li li:hover ul{
    display:block;
    position:absolute;
    top:10px;
    right:125px;
    z-index:1000;
}

شما برای این که زیر منوی دوم را تغییر دهداز دستور li li:hover ul استفاده کردین؟ اگه امکانش هست می‌تونید که در مورد آن بیشتر توضیح بدین. من یک منو طراحی کردم ولی کاملا طراحی آن با طراحی شما تفاوت داره. الان تقریبا مثل شما عمل کردم ولی هر چی روی زیر منوی اول میرم زیر منوی دوم رو باز نمی کنه اگه ممکنه لطفا من رو راهنمایی کنید . خیلی ضروری هست.
با تشکر فروان از مطلب با ارزشتون

در تحلیل استایل های اینچنین باید به دو قسمت ابتدای استایل (نقطه شروع عنصر در صفحه) و انتهای استایل (نقطه هدف استایل) توجه کنید، نقطه شروع در استایل بالا آی دی main-menu است، سپس یک تگ li و یک تگ li دیگر درون آن (در حالت فعال باشد)، سپس تگ ul که اثر استایل بر روی آن اعمال می شود.
نکته دیگر نحوه استفاده از خاصیت position است که برای تگ های بالادستی باید به صورت relative و تگ های پائین دستی به صورت absolute باشد.

صفحه 2 از 5

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