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

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

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 - طراحی وب

قبلی »

« بعدی

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

دیدگاه

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

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

علیرضا

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

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

http://barzok.ir/Default.aspx

سپاسگزارم
موفق باشید

البته پیش نمایش منو نشان می دهد که مورد از کدها نیست، با این حال برای حل مشکل باید ببینید خاصیت z-index در استایل CSS مربوط به بلاک مطالب یا بلاک های بالاتر از آن با چه عددی تنظیم شده، خاصیت z-index را برای منو بیشتر از آن تنظیم کنید، اگر با این روش مشکل بر طرف نشد یا خاصیت z-index را پیدا نکردید:
- خاصیت z-index به کار رفته در استایل منو را به میزان زیاد افزایش داده و تست کنید.
- برای تمام کلاس های تعریف شده در منو با آزمایش و خطا، خاصیت z-index را (مطابق یک مورد که استفاده شده) اضافه کرده و تست کنید.

روح اله

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

سلام بسیار ممنون از آموزش شما
=====================
من می خوام تو سایتم زیر قسمت سرچ که الان یه کادر سبز رنگی هست یه سری منو به صورت آبشاری بزارم
می تونید کمکم کنید ...
ممنون

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

ناهید

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

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

 http://www.drbakhshaee.com/

اگه ممکن راهنماییم کنید وگرنه مجبورم قیدش بزنم!!

حذف شد

سلام
به نظر مشکل از عدم استفاده از DOCTYPE مناسب در کدنویسی HTML سایتتان است.

ناهید

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

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

<!DOCTYPE html>

گذاشتم فایده نداشت. نمیتونم که به مشتری بگم تو IE کار نکن.
چیکار کنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
تکرار میکنم من از مرور گر IE8 استفاده می کنم!!
البته نمی دونم چرا پیش نمایش کد خودتون که تو این صفحه گذاشتین تو IE8 باز میشه اما تو سایت من باز نمیشه

این منو صرفا در مرورگر منسوخ IE 6 با مشکل روبرو است، در سایر مرورگرها مشکلی وجود ندارد، به نظر ایراد از استایل های CSS یا کدهای HTML است که در صفحه شما به کار رفته (حل مشکل نیاز به بررسی سورس سایت دارد).

روح الله

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

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

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

روح الله

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

سلام
توی نظرات فرموده بودین برای این که منوی کشویی باز شده زیر دیگر عناصر نرود

z-index:50000000px;

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

مقادیر z-index را بدون px درج کنید (آموزش اصلاح شد!).
دقت کنید که تگ embed پارامتری به صورت زیر داشته باشد:

wmode="transparent"

همچنین به تگ object پارامتر زیر را اضافه کنید:

<param name="wmode" value="transparent/opaque">

نکته: ظاهرا این نوع مشکلات تنها در مرورگر گوگل کروم وجود دارد!

حامد

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

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

http://www.iran-mg.com/

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

زهرا

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

سلام می خواستم تفاوت text-align و direction در css رو بدونم. واقعا لطف می کنید.

خاصیت text-align برای تعیین نوع چینش و نمایش متن (یا سایر محتوا) درون بلاک به کار می رود، به طور مثال چینش در سمت چپ یا راست یا چینش در هر دو طرف (justify)، اما خاصیت direction برای تعیین جهت نوشتن و نمایش متن است، برای حروف فارسی مقادیر rtl یا right to left و برای حروف انگلیسی ltr.

مهسا

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

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

razetarikh

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

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

http://www.neopersia.org/

چک کردم چند تست html چک کردم همان طوری نشان می دهد که در سایت اصلی
ولی موندم که چه طوری در این بلاگر دوم خوب نشان میده
دیگه واقعا هنگ کردم
من بی خیال شدم
کارم راه انداخت
در ضمن من این منو نامحدود کردم با یکم دست کاری یعنی n تا تب باز میکنم پس بلدم به این موضوعات
بازم دست درد نکنه

razetarikh

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

سلام شرمنده که دوباره اومدم من دو کد را دو جا گذاشتم یک جا خوبه یک جا خرابه مشکل کجاست
یکی سایت خودم که خرابه یکی بلاگر ازمایشی که درست کار می کنه

http://amin11326.blogfa.com/

هر دو کد یکسان دلیلش نمیدونم

ممکن است مشکل از تداخل سایر استایل های CSS موجود در صفحه با استایل منو باشد، برای تنظیم دلخواه منو باید با CSS و خاصیت های آن آشنا باشید، آَشنایی با HTML و CSS جزء نیازهای اولیه مدیران وب است!

razetarikh

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

سلام
من تست کردم چون منو سوم و چهارم درگیر است
و منو اول دوم خوب هستند من right را تغییر دادم ولی منو دوم یکم به جلو پرش می کرد
متاسفانه به منو دوم دسترسی نداشتم پس جواب منفی من منو جستجوگر گوگل را گذاشتم ولی دکمه سرچ اذیت می کند اگر منو جستجو گر خالی دارید بدون سرچ بگو من تست میکنم
ممنون از منو زیبا مشکل من حل نشد ولی کارم رو راه انداخت

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

razetarikh

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

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

width:150px;

که 150 میخوام 180 کنم
ولی یک مشکل هست منو چهارم از نصفه منو سوم میاد اون چه طور اندازه درست کنم
ممنون از راهنمایی شما
یک چیز دیگه هست می خوام اول منو یک منو جستجو هم اندازه منو اول بگذارم کد برام میگذاری ممنون میشم

برای تغیر اندازه ها در کنار تغییر قسمت width، خاصیت right را نیز تغییر دهید (تست نشده)، برای سایر تغییرات نیز باید با CSS آشنا باشید، متاسفانه فرصتی برای افزودن قابلیت های بیشتر در اختیار نداریم.

razetarikh

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

سلام به این سایت مراجعه بکنید من یک مشکلی دارم منو دوم جدول بندی نشده مثل منو اول می خواهم باشه
میشه راهنمایی کنم در ضمن منو چهارم کدوم کد تغییر بدم متوجه منظورتان نشدم
اگر ممکنه یکم در اسرع وقت جواب بدهید

برای ظاهر شدن خطوط بین منوها، در استایل CSS منو خط زیر را پیدا کنید:

ul.vertical-top-level li{
	border-bottom: #fff solid 1px;
}

و آن را به صورت زیر ویرایش کنید:

ul.vertical-top-level li, ul.vertical-top-level li li{
	border-bottom: #fff solid 1px;
}

برای ایجاد منوی سطح چهارم لطفا به پاسخ چند نظر بالاتر مراجعه نمائید، با نمونه کد توضیح داده شده است.

احسان

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

واقعا از شما ممنونم خیلی به دردم خورد...

صفحه 3 از 5

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