سه شنبه ۰۱ تیر ۱۴۰۰

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





6 × 4
 refresh

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

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

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

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

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

form رها
در:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...
۱۴۰۰/۰۳/۲۴

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

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

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

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

form الی
در:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...
۱۴۰۰/۰۳/۱۸

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

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

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

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

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

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

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

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

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

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

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

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.