امروز پنجشنبه ۱۴۰۰/۰۱/۲۶

2021/04/15 GMT +4:30

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

css-vertical-menu

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر 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
related مطالب بیشتر:
» آموزش استفاده از فونت فارسی در وب با CSS
» ساخت بلاک شناور عمودی با CSS
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
» چسبیدن فوتر قالب به پائین صفحه با 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>
این کد معرف قالب های HTML5 است، نکته دوم اینکه در مرورگرهای مختلف قالب خود را تست کنید، مرورگر اینترنت اکسپلورر دارای نواقصی برای پشتیبانی از HTML5 است و باید استایل خاص آن را در صفحه ایمپورت کنید.
نویسنده: کد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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





9 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

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

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

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

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

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

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

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.