آگهی
article

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

css-vertical-menu

در مطالب قبلی از بخش آموزش های کاربردی، با نحوه ساخت چند نوع منوی متفاوت مبتنی بر css و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در html و اهمیت آنها برای موتورهای جستجو و نیز بالابردن قابلیت کاربری (accessibility) صفحه وب، اشاره کردیم، این بار در ادامه آموزش ها، می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا عمودی (vertical) با تگ ul li و استفاده صرف از css آشنا شویم، از نقاط قوت این منو سازگاری با زبان فارسی و نمایش یکسان در مرورگرهای مختلف و در عین حال سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگر اینترنت اکسپلورر نسخه 6 قابل استفاده نیست.

ایجاد چارچوب کار با html و تگ ul li


قبل از هر چیز، طبق روال باید چارچوب منوهای خود را با استفاده از تگ های ساخت لیست در html یعنی دو تگ ul و li شکل دهیم، در این رابطه به صورت مفصل در آموزش مقدماتی css گفته ایم که می توانید مطلب مربوطه را در لینک زیر مطالعه کنید:
نحوه تنظیم لیست با تگ ul li در css
کد html منو با استفاده از تگ ul و li:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- https://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>
توضیح:
- اگر کد بالا را در صفحه ای با فرمت html ذخیره و آن را اجراء کنید، خواهید دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه، از قابلیت لیست های آشیانه ای یا تو در تو استفاده کرده ایم، نحوه چینش دقیق تگ های ul و li به این صورت، یکی از قسمت های اصلی ساخت لیست منوها است، به صورت ساده ساختار منوی بالا به شکل زیر است:
<ul>
<li>منو سطح بالا
  <ul>
    <li>منو سطح یک
      <ul>
        <li>منو سطح دو</li>
      </ul>
    </li>
   </ul>
</li>
</ul>
با درک صحیح این ساختار به ظاهر پیچیده، می توان به هر تعداد منوهای تو در تو ایجاد نمود.

استفاده از استایل css و ایجاد قابلیت تعاملی


همان طور که می دانیم، کد های html به تنهایی، قدرت چندانی در ایجاد قابلیت های تعاملی ندارند، لذا با استفاده از css و تنظیم ویژگی های display، position و... رفتار مورد انتظارمان را به تگ ها نسبت می دهیم، این کار را در استایل زیر انجام داده ایم.
<style type="text/css">
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 دو ویژگی کلیدی هستند که در عملکرد منو، نقش مستقیم بازی می کنند، تغییر مقادیر پیش فرض آنها، می تواند در نحوه نمایش صحیح عناصر تاثیر بگذارد.
- به نحوه تعریف چند کلاس به صورت پلکانی توجه کنید، به فرض تنظیم استایل به صورت زیر در کد بالا، بر روی عناصر منوی زیر مجموعه سطح دوم تاثیرگذار است.
<style type="text/css">
#vertical-nav .vertical-sub-level .vertical-sub-level
</style>
یا به طور مثال اگر به انتهای استایل دقت کنید، قسمت 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- https://webgoo.ir -->
<style type="text/css">
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>
<!--[if IE 6]>
کاربر گرامی، مرورگر شما از امکانات این سایت به درستی پشتیبانی نمی کند، لطفا نسخه مرورگر خود را ارتقا دهید!
<![endif]-->

<!-- بلاک اصلی -->
<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>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
» مخفی کردن عناصر وب با CSS
» ساخت منوی کشویی با تگ ul li و CSS
» آموزش استفاده از فونت فارسی در وب با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
commentنظرات (۶۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: فرزاد
زمان: ۰۰:۵۲:۲۴ - تاریخ: ۱۳۹۲/۰۱/۰۴
سلام،
خیلی آموزش هاتون خوبه ... واقعا لذت بردم...
فقط یه سوال چه جوری میشه برای submenu هایی که دارای SubSubMenu هستن چطور میشه آیکونی مثلا فلش گذاشت که بشه گفت یعنی این قسمت submenu داره ؟
پاسخ: 
سلام
می توانید با استفاده از تگ img در html تصویر مورد نظر خودتان را بین تگ li و در قسمت لینک منوی زیرمجموعه آن قرار دهید (اگر توجه کنید، در پیش نمایش منو این کار با علامت ;raquo& انجام شده)، از این نظر محدودیتی نیست.
نویسنده: فرزاد
زمان: ۲۰:۱۹:۴۰ - تاریخ: ۱۳۹۲/۰۱/۰۴
ممنون از توضیحتون ولی من منظورم برای صفحات دینامیک بود و نه استاتیک... از طریق CSS برای صفحات دینامیک میخوام...
پاسخ: 
برای این کار کافی است به تگ li مورد نظر یا به تگ a یک کلاس css اختصاص دهید و داخل آن کلاس با استفاده از خاصیت background تصویر پس زمینه ای تنظیم کنید، به طور مثال این یک نمونه استایل خطی است:
<li style="background:url(img.jpg) left center no-repeat";>
که می توانید به صورت کلاس نیز استایل را به تگ نسبت دهید.
نویسنده: farzan
زمان: ۱۲:۰۵:۲۹ - تاریخ: ۱۳۹۲/۰۲/۱۰
سلام
من یه منو نوشتم که در صفحه اول بعد از اینکه اسلاید شو گذاشتم وقتی رو منو میرم قسمت آبشاریش زیر اسلاید شو باز میشه چیکار کنم رو قرار بگیره؟؟؟؟؟؟؟؟؟
پاسخ: 
سلام
برای بلاک اصلی از خاصیت z-index در CSS استفاده کنید، هر چه مقدار z-index بیشتر باشد، عنصر بالاتر از سایر موارد نشان داده می شود، مثال:
z-index:1000px;
نویسنده: patriot
زمان: ۱۵:۰۵:۵۳ - تاریخ: ۱۳۹۲/۰۲/۲۳
تشکر
بسیار عالی و کاربردی بود.
توضیحاتتون درباره مطالب خیلی مفید و سودمنده!
لطفا ادامه بدید.
نویسنده: جواد
زمان: ۱۶:۵۹:۲۲ - تاریخ: ۱۳۹۲/۰۲/۲۴
اگه میشه چگونه تب در وب سایتم درست کنم
پاسخ: 
لطفا سوالتان را با جزئیات بیشتری مطرح کنید.
نویسنده: tohid gholizadeh
زمان: ۱۷:۳۸:۰۰ - تاریخ: ۱۳۹۲/۰۳/۲۲
مرسي از زحماتي كه مي كشيد
كارتون بيسته بيست
نویسنده: monje
زمان: ۱۳:۱۸:۰۲ - تاریخ: ۱۳۹۲/۰۳/۲۶
سلام خدمت شما دوست گرامی
آموزش واقعا زیبا و کاربردی بود ، ممنون
فقط یه سوال :
من نیاز دارم لایه چهارم رو هم اضافه کنم ، یعنی در حقیقت چهار بلوک داشته باشم ، خودت هر کاری کردم نشد و با کدا مشکل پیدا کردم.
لطفا در صورت امکان در سریعترین زمان ممکن کمکم کنید ، چون بد جور بهش احتیاج دارم.
ممنون
پاسخ: 
سلام
برای ایجاد منو با سطح چهارم، استایل CSS را به صورت زیر تغییر دهید:
<style type="text/css">
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:1000px;
}
#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 .vertical-sub-level {
background-color:#666;
}
li:hover .vertical-sub-level .vertical-sub-level {
display:none;
}
.vertical-sub-level li:hover .vertical-sub-level .vertical-sub-level {
display:none;
}
.vertical-sub-level li:hover .vertical-sub-level {
display:block;
*left:0px;/*IE 7*/
}
.vertical-sub-level .vertical-sub-level li:hover .vertical-sub-level {
display:block;
*left:0px;/*IE 7*/
}
</style>
و کدهای منو را بر اساس الگوی زیر اضافه کنید:
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="http://webgoo.ir/">خانه »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1</a></li>
<li><a href="#">منوی زیر مجموعه - 1 »</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="#">خدمات »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1</a></li>
<li><a href="#">منوی زیر مجموعه - 1 »</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>
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 3</a></li>
<li><a href="#">منوی زیر مجموعه - 3</a></li>
<li><a href="#">منوی زیر مجموعه - 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید »</a>
<!-- زیر مجموعه سطح 1 -->
<ul class="vertical-sub-level">
<li><a href="#">منوی زیر مجموعه - 1 »</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>
در الگوی بالا منوی زیر مجموعه سطح 3 به کدهای قسمت فرضی خدمات اضافه شده است.
نویسنده: monje
زمان: ۲۱:۲۵:۴۸ - تاریخ: ۱۳۹۲/۰۳/۲۶
ممنون و سپاس از شما سرور گرامی
براتون آرزوی موفقیت روز افزون رو دارم
در پناه خالق هستی
یا مهدی
نویسنده: احسان
زمان: ۱۸:۱۷:۵۰ - تاریخ: ۱۳۹۲/۰۳/۲۷
واقعا از شما ممنونم خیلی به دردم خورد...
نویسنده: 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;
}
برای ایجاد منوی سطح چهارم لطفا به پاسخ چند نظر بالاتر مراجعه نمائید، با نمونه کد توضیح داده شده است (متاسفانه امکان توضیحی راحت تر از این وجود ندارد!)
نویسنده: razetarikh
زمان: ۰۶:۰۹:۵۳ - تاریخ: ۱۳۹۲/۰۴/۲۶
اوکی ممنون
کارم راه افتاد فقط یک مشکل هست منو سوم میخواهم اندازه بزرگ تر کنم قسمت
width:150px;
که 150 میخوام 180 کنم
ولی یک مشکل هست منو چهارم از نصفه منو سوم میاد اون چه طور اندازه درست کنم
ممنون از راهنمایی شما
یک چیز دیگه هست می خوام اول منو یک منو جستجو هم اندازه منو اول بگذارم کد برام میگذاری ممنون میشم
پاسخ: 
برای تغیر اندازه ها، در کنار تغییر قسمت width، خاصیت right را نیز تغییر دهید (تست نشده)، برای سایر تغییرات نیز باید با CSS آشنا باشید، متاسفانه فرصتی برای افزودن قابلیت های بیشتر در اختیار نداریم.
نویسنده: razetarikh
زمان: ۱۷:۲۰:۴۵ - تاریخ: ۱۳۹۲/۰۴/۲۶
سلام
من تست کردم چون منو سوم و چهارم درگیر است
و منو اول دوم خوب هستند من right را تغییر دادم ولی منو دوم یکم به جلو پرش می کرد
متاسفانه به منو دوم دسترسی نداشتم پس جواب منفی من منو جستجوگر گوگل را گذاشتم ولی دکمه سرچ اذیت می کند اگر منو جستجو گر خالی دارید بدون سرچ بگو من تست میکنم
ممنون از منو زیبا مشکل من حل نشد ولی کارم رو راه انداخت
پاسخ: 
سلام
همان طور که گفتیم، متاسفانه آنقدر فرصت نداریم که به صورت جزئی به مشکلات کاربران رسیدگی کنیم، در حد معمول و بر محور آموزش ارائه شده تنها می توانیم کمک کنیم.
نویسنده: razetarikh
زمان: ۱۸:۵۱:۵۳ - تاریخ: ۱۳۹۲/۰۴/۲۶
سلام شرمنده که دوباره اومدم من دو کد را دو جا گذاشتم یک جا خوبه یک جا خرابه مشکل کجاست
یکی سایت خودم که خرابه یکی بلاگر ازمایشی که درست کار می کنه
http://amin11326.blogfa.com/
هر دو کد یکسان دلیلش نمیدونم
پاسخ: 
سلام
ممکن است مشکل از تداخل سایر استایل های CSS موجود در صفحه با استایل منو باشد، برای تنظیم دلخواه منو باید با CSS و خاصیت های آن آشنا باشید، آَشنایی با HTML و CSS جزء نیازهای اولیه مدیران وب است!
نویسنده: razetarikh
زمان: ۱۹:۵۲:۴۷ - تاریخ: ۱۳۹۲/۰۴/۲۶
من اشنایی نسبی دارم بد نیستم ولی همین کد ها را در این سایت
http://www.neopersia.org/
چک کردم چند تست html چک کردم همان طوری نشان می دهد که در سایت اصلی
ولی موندم که چه طوری در این بلاگر دوم خوب نشان میده
دیگه واقعا هنگ کردم
من بی خیال شدم
کارم راه انداخت
در ضمن من این منو نامحدود کردم با یکم دست کاری یعنی n تا تب باز میکنم پس بلدم به این موضوعات
بازم دست درد نکنه
نویسنده: مهسا
زمان: ۰۰:۲۳:۴۲ - تاریخ: ۱۳۹۲/۰۵/۰۲
سلام
با تشکر فراوان از آموزش شما
من از این منو در سایتم استفاده کردم و کاملا مفید واقع شد
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





8 × 3
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهدی
در:
سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم
۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

form سلماسی
در:
سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند
۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...
۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا...
۱۴:۴۶:۲۴ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...
۱۲:۰۵:۰۷ ۱۳۹۹/۰۴/۲۲

form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

form کافه کتاب
در:
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴

form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱
form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱
form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷
form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷
form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶
form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
در انتظار بررسی: ۴