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 مطالب بیشتر:
» ساخت بلاک شناور عمودی با CSS
» مخفی کردن عناصر وب با CSS
» آموزش استفاده از فونت فارسی در وب با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» حذف اسکرول افقی (Horizontal Scroll) با CSS
commentنظرات (۶۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: میلاد
۲۳:۴۷ ۱۳۹۱/۰۵/۰۲
سلام استاد آموزش های 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
۰۸:۵۸ ۱۳۹۱/۱۲/۰۵
با سلام ممنون از آموزشتون
من میخوام این کد افتی شه باید چیکار کنم
اینی که گذاشتین عمودیه
پاسخ: 
سلام
از قسمت جستجوی سایت، عبارت منوی کشویی را جستجو کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 3
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

form فایز پور جهانبخشی
در:
سلام اگر بخواهیم برنامه ای که داخل متلب نوشتیم تا یک ثانیه اجرا شود و بعد از ثانیه اول در حالت خطا که...
۱۳۹۹/۰۷/۲۸

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

form reza
در:
سلام خوبید انشاالله؟ خواستم بدونم این نوار ابزار رو چطور باید اونایی رو دوست دارم بزارم سمت راست وبلاگم. هر چی کد و ......
۱۳۹۹/۰۷/۲۴

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

form فاطمه
در:
سلام ممنونم... خیلی ساده و روون توضیح دادین.. اونقدر که تشویق شدم محتوای یه فایل تکس رو با ایجکس درون یه div بیارم ولی...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
خب متوجه شدم. که باید خط اول عدد فانکشن رو تغییر بدم. بسته به تعداد آرایه یا هر عدد دیگه تغییر بدم جوابمو...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴
form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳
form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲
form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.