parsgreen.com
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>
<!-- http://webgoo.ir -->
</head>
<body>
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="http://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>
<!-- http://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="http://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 مطالب بیشتر:
» ساخت منوی کشویی با تگ ul li و css
» چسبیدن فوتر قالب به پائین صفحه با CSS
» مخفی کردن عناصر وب با CSS
» ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3
» حذف اسکرول افقی (horizontal scroll) با css
commentنظرات (۶۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: میلاد
زمان: ۲۳:۴۷:۲۷ - تاریخ: ۱۳۹۱/۰۵/۰۲
سلام استاد آموزش های css و php عالیییییییییییییییییییییییه
پاسخ: 
دوست گرامی، نظر لطف شماست، مسلما مسئولیت ما نیز با این اوصاف بیشتر خواهد شد.
نویسنده: فريبا
زمان: ۰۹:۳۳:۳۰ - تاریخ: ۱۳۹۱/۰۵/۰۴
سلام
عاليه.
نویسنده: سعید
زمان: ۱۴:۳۴:۱۶ - تاریخ: ۱۳۹۱/۰۵/۰۶
سلام
بازم فوق العاده و کاربردی بود. ممنون
نویسنده: کد 1009
زمان: ۱۱:۵۳:۰۲ - تاریخ: ۱۳۹۱/۰۵/۱۴
با سلام
ممنون از بابت این آموزش
من یه مشکل اساسی دارم و اینکه قالب با <html> می شه و حالت آبشاری منو توش کار نمی کنه و وقتی که کد زیر رو جاش قرار میدم منو کار میکنه ولی قالبم به هم می ریزه...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
اگر امکانش هست راهنماییم کنید.
پاسخ: 
سلام
بالاتر از تگ <html> کد زیر را قرار دهید، احتمالا مشکل شما حل می شود:
<!DOCTYPE html>
این کد معرف قالب های html 5 است، نکته دوم اینکه در مرورگرهای مختلف قالب خود را تست کنید، مرورگر اینترنت اکسپلورر دارای نواقصی برای پشتیبانی از html 5 است و باید استایل خاص آن را در صفحه ایمپورت کنید.
نویسنده: کد1009
زمان: ۱۶:۵۰:۴۱ - تاریخ: ۱۳۹۱/۰۵/۱۴
عذر می خوام
من DOCTYEP های مختلفی رو امتحان کردم. منو درست می شه اما قالب به هم می ریزه..
کد Html 5 رو هم که محبت کردین قبلا گذاشتم باز جواب نداده..
با مرور گرهای مختلفی هم امتحان کردم..
من از یه قالب آماده استفاده کردم برای وبلاگم..
دوست داشتم که یه منوی آبشاری تو وبلاگم داشته باشم که ظاهرا نمی شه
پاسخ: 
ظاهرا مشکل از طراحی قالب شما است، تگ html به تنهایی نباید در ابتدای صفحه بیاید و باید با یک DOCTYEP استاندارد w3c باشد، در غیر این صورت کد نویسی شما معتبر نیست! یک راه حل این است که سایر عناصر وبلاگ را با DOCTYEP جدید سازگار کنید که البته کمی تسلط بر css نیاز است.
نویسنده: کد 1009
زمان: ۱۰:۵۱:۰۰ - تاریخ: ۱۳۹۱/۰۵/۲۱
با سلام
از راهنمایی شما در مورد سوال قبل بسیار تشکر می کنم چون باعث شد من اطلاعات زیادی در این مورد پیدا کنم.
یه سوال داشتم؟ من سعی کردم منوی آبشاری و کشویی که آموزش دادین با هم ترکیب کنم. یعنی منوی اصلی از بالا به پایین باز بشه و زیر منوی خاصی به صورت کشویی زیر منوهای خودش رو بیاره. ایرادهایی داره. فکر می کنم از نظر تگ های html مشکل نداشته باشم و مشکل از کدهای css باشه. حتی کلاس هم برای هر کد تعریف کردم که قاطی نشن ولی باز نشد.
امکانش هست راهنماییم کنید یا اگر زحمتی نباشه آموزشش رو بذارین؟
اصلا امکان این موضوع هست؟ ممنون
پاسخ: 
سلام
در مجموع چنین امکانی را می توان ایجاد کرد اما نیازمند تعریف دقیق خاصیت های css است، علاوه بر این باید با ساختار منوهای مبتنی بر تگ ul و li به طور کامل آشنا باشید و ویژگی های css را به عناصر به طور صحیح نسبت دهید، البته این کار نیازمند صرف مدتی وقت و آزمایش و خطا است.
با توجه به اینکه در مورد منوها چند آموزش را منتشر کرده ایم، اجازه بدهید این بحث را به فرصتی دیگر موکول کنیم.
نویسنده: جواد
زمان: ۱۱:۰۷:۴۱ - تاریخ: ۱۳۹۱/۰۹/۱۹
عالی بود خیلی ممنون
نویسنده: ansherli
زمان: ۱۹:۱۰:۲۲ - تاریخ: ۱۳۹۱/۱۰/۰۶
سلام
من همین منو آبشاری رو برای سایتم استفاده کردم . با IE نمایش داده میشه ولی با فایرفاکس نه!
ممنون میشم به کدهام نگاه کنید و بهم بگید مشکل از چیه.
آدرس آپلود فایل ها:
http://uplod.ir/l0muprnbqpua/webgoo.zip.htm
styles و mosic2.php کد قالب اصلی سایتم هستش و meno_abshari.html کد منو، یه سوال دیگه هم داشتم اونم اینکه چطور میشه لینکی داخل قالب اصلی قرار داد تا کدهای منو رو براش تکرار نکنیم؟
منظورم اسم منوها و زیر منوها است نه کد css.
ممنونم از توجهتون
پاسخ: 
سلام
چند اشتباه در صفحات شما وجود دارد، استایل css خارجی درست در صفحه اصلی وارد نشده است (فایل css باید با فرمت css باشد و درون آن تنها کدهای css وجود داشته باشد، نه سایر تگ های html (مشابه فایل styles.css)، در قسمت link rel در صفحه اصلی، فایل meno_abshari.html را وارد کرده اید که باید meno_abshari.css باشد (در ادامه مشکل اول).
اما در مورد سوال آخر دقیقا متوجه منظورتان نشدیم، اما اگر منظور وارد کردن تگ های html منو به صورت جداگانه در صفحه اصلی است، در php می توانید از include فایل ها در هم استفاده کنید، یعنی کدهای منو را داخل یک فایل php دیگر قرار داده و در صفحه اصلی include کنید.
نویسنده: ansherli
زمان: ۲۲:۵۹:۵۷ - تاریخ: ۱۳۹۱/۱۰/۰۶
خیلی ممنونم از راهنماییتون
کاری که گفتید رو انجام دادم و درست شد ، هر چند که مجبور شدم 83 صفحه رو ویرایش کنم :(
چون با IE جواب میداد برای همین فکر نمی کردم مشکل این باشه.
مرسی از لطفتون
پاسخ: 
سلام
مدیریت سایت به شکل استاتیک و صفحات ثابت به جزء در موارد خاص، دیرزمانی است که منسوخ شده (به دلیل محدودیت های اینچنینی)، سعی کنید یا از سیستم های مدیریت محتوای رایگان مانند جوملا، وردپرس و... استفاده کنید یا اینکه (اگر به برنامه نویسی علاقه و آشنایی دارید) به سمت ایجاد CMS های شخصی بروید و به تدریج آنها را توسعه دهید.
نویسنده: ansherli
زمان: ۲۳:۲۶:۰۴ - تاریخ: ۱۳۹۱/۱۰/۰۶
راستش این اولین سایتی هست که دارم طراحی میکنم و به عنوان پروژه پایانیم هستش که باید با PHP , HTML باشه . برای همین خیلی بی تجربم و فقط از مطالبی که توی نت هست استفاده می کنم .
سایتی مثل وبگو برای من یه استاد عالی محسوب میشه.
ممنونم از زحماتتون
پاسخ: 
خواهش می کنیم، باعث خوشحالی است اگر کمکی کرده باشیم.
نویسنده: مهدی
زمان: ۰۲:۰۳:۰۴ - تاریخ: ۱۳۹۱/۱۰/۰۹
خیلی زحمت کشیدید. عالی بود.
ایشاا... که همیشه
سلامت، خوش و موفق باشید.
پاسخ: 
ممنون از نظر لطف شما.
نویسنده: Scepter
زمان: ۱۴:۰۳:۲۱ - تاریخ: ۱۳۹۱/۱۰/۲۷
سلام ببخشید من از این منو برای ساخت یک قالب برای وبلاگم درست کردم و تگ های بلاگفا را هم در اون قرار دادم اما نمیدونم چرا مشکلاتی در منو پیش میاد و در هم میشه از منوی کشویی هم استفاده کردم تو هم شد
یه وبالگ آزمایشی ساختم برید ببنید به من کمک کنید .
من وقتی آفلاین امتحان می کنم مشکلی نداره وقتی میزارمش توی وبلاگ مشکل دار میشه
ممنون
وبلاگ آزمایشی من :
http://lord2352.blogfa.com
پاسخ: 
سلام
چینش تگ های ul و li در منوی وبلاگ صحیح نیست، باید دقیقا مطابق الگویی که در مثال می بینید و توضیحات راهنما، منوها را تنظیم کنید.
نویسنده: صادق
زمان: ۰۹:۴۴:۱۷ - تاریخ: ۱۳۹۱/۱۱/۱۵
سلام دوست عزیز تو رو خدا چرا منو رو از حالت افقی خارج کردی منوی وبلاگم حالت افقی بود یه ذره تغیرش دادم کاملا به هم ریخته الان اومدم اینجا نگاه که کردم منو عمودی و تنظیمات رو ندارم
کمکم کنید
پاسخ: 
سلام
مطلب مربوط به منوی کشویی (افقی) با این مطلب متفاوت است، از قسمت جستجوی سایت عبارت "منو کشویی" را تایپ کنید، یا از بخش آموزش های کاربردی css استفاده نمائید، اگر همچنان مشکل دیگری بود اطلاع دهید تا بررسی کنیم.
نویسنده: nahid
زمان: ۰۰:۰۶:۰۵ - تاریخ: ۱۳۹۱/۱۱/۲۲
سلام ممنون از همکاریتون
من از این مثال واسه منوهای آبشاری استفاده کردم تو IE جواب نمیده. این کد
<!DOCTYPE html>
گذاشتم فایده نداشت. نمیتونم که به مشتری بگم تو IE کار نکن.
چیکار کنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
پاسخ: 
سلام
این منو با اینترنت اکسپلورر نسخه 7 و مابعد سازگار است، اما اگر منظور شما سازگاری با مرورگر از رده خارج شده و غیر استاندارد اینترنت اکسپلورر 6 است، خیر این منو در این نسخه کاربرد ندارد و بهتر است از منوهای جی کئوری استفاده نمائید.
نویسنده: lpln
زمان: ۰۸:۵۸:۵۵ - تاریخ: ۱۳۹۱/۱۲/۰۵
با سلام ممنون از آموزشتون
من میخوام این کد افتی شه باید چیکار کنم
اینی که گذاشتین عمودیه
پاسخ: 
سلام
از قسمت جستجوی سایت، عبارت منوی کشویی را جستجو کنید.
paged صفحه 1 از 5




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

1 × 9
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...