آگهی
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
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» مخفی کردن عناصر وب با CSS
commentنظرات (۶۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: samaft
زمان: ۱۴:۰۱:۴۹ - تاریخ: ۱۳۹۵/۰۴/۲۸
سلام به کمکتون احتیاج دارم..... من میخوام منو عمودی ام رو طوری طراحی کنم که زیر منو ها در ردیفه منوهای اصلی به صورت عمودی به سمت پایین باز بشوند... (نه به صورت پله ای) و با باز شدنه زیر منوها منوهای زیرینه خود را به سمته پایین براند ....
پاسخ: 
متاسفانه طراحی و کدنویسی قابلیتی مانند منو کار بسیار زمانبری است، لذا باید خودتان بخش اصلی کار را در فرصت مناسب کدنویسی کرده باشید، البته نمونه های آماده در وب وجود دارد که باید جستجو نمائید!
نویسنده: علی
زمان: ۲۰:۵۸:۲۵ - تاریخ: ۱۳۹۵/۰۵/۱۹
با عرض سلام و خسته نباشیین خدمت مدیریت سایت
ببخشید اگر بخواهیم منو را به صورت کلی جابجا کنیم مثلا پایین بیاوریم باید چه کنیم متشکر
پاسخ: 
برای این موارد باید با CSS آشنایی کافی داشته باشید!
نویسنده: علی
زمان: ۱۴:۵۲:۴۹ - تاریخ: ۱۳۹۵/۰۷/۱۲
چطور میتونم برای وردپرس از این منو استفاده کنم
اموزشی برای این کار هست؟؟
پاسخ: 
تفاوت خاصی وجود ندارد، البته باید با نحوه ویرایش قالب های وردپرس آشنا باشید که یک مبحث جداگانه است!
نویسنده: APN
زمان: ۲۰:۱۹:۵۹ - تاریخ: ۱۳۹۵/۰۷/۲۶
سلام ممنون از مطلب مفیدتون
نویسنده: milad
زمان: ۱۳:۳۷:۵۳ - تاریخ: ۱۳۹۵/۰۸/۳۰
سلام استاد
/*IE 7*/ این دستوراتی که تو آخر بعضی از تگ ها استفاده کردید چیه؟
پاسخ: 
لطفا عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر" را در وب جستجو کنید، در مطلب جداگانه ای در این خصوص صحبت شده!
نویسنده: شقایق فرهمند
زمان: ۱۶:۰۹:۲۶ - تاریخ: ۱۳۹۶/۰۸/۰۴
سلام.
منوی خوبی است ولی فقط برای ستون های راست قالب کاربرد داره من میخوام سمت چپ قالبم باشه باید چه تغییری بدم که سمت چب باشه و منوها سمت راستش باز بشن؟ دقیقا برعکس منویی که گذاشتین.
پاسخ: 
اگر با CSS آشنا باشید با تغییر مواردی که به جهت ارتباط دارند (مانند direction از rtl به ltr یا float از right به left) می توانید منو را به اصطلاح چپ چین یا راست چین کنید.
نویسنده: سجاد
زمان: ۱۸:۵۸:۱۵ - تاریخ: ۱۳۹۷/۰۳/۱۵
سلام
آقا دمت گرم کل نتو زیر و رو کردم حتی سعی کردم کد سایت های دیگه رو بردارم ولی نمیشد بهم میریخت ولی این یکی کار کرد واقعا خسته نباشی دمت گرم اجرت با حضرت زهرا
نویسنده: امیر مهدی
زمان: ۱۹:۲۴:۰۱ - تاریخ: ۱۳۹۹/۰۲/۲۸
سلام. من در طراحی منو سایت با مشکل برخوردم. من منو خودم رو ساختم و متوجه شدم که منو من مقداری فضا از سمت چپ رو تشخیص نمی ده.
کدهای css من
<style>
#menu {
width: 100%;
height: 10%;
float: right;
background-color: white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* position: fixed; */
}

a {
text-decoration: none;
}

#main-menu {
list-style: none;
position: relative;
}

#main-menu li {
float: right;
background-color: transparent;
border-radius: 17px;
transition: all 0.5s;
position: relative;
border: 2px solid transparent;
margin: 0px 10px;
display: block;
}

#main-menu li a {
padding: 15px;
float: right;
color: #696969;
}

#main-menu > li:hover {
background-color: #dddddd;
border-radius: 17px;
border: 2px solid #39DAED;
}

#main-menu li ul {
list-style: none;
float: right;
top: 48px;
width: 100%;
margin-top: 50px;
position: absolute;
background-color: rgb(255, 255, 255);
border: 2px solid #39DAED;
border-top: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
left: -24px;
opacity: 0;
transition: all 0.5s;
transform: rotateY(180deg);
visibility: hidden;
}

#main-menu li ul li {
float: none;
/* height: 30%; */
margin-top: 3%;
/* width: 100%; */
left:-14px;
display: block;
text-align: center;
}

#main-menu li ul li:hover {
background-color: #dddddd;
}

#main-menu li ul li a {
float: none;
display: block;
}
/* #main-menu li ul li a {
float: none;

text-align: left;
margin-top: 10px;
} */

#main-menu > li:hover ul {
visibility: visible;
opacity: 1;
transform: rotateY(0deg);
margin-top: 0px;
}
</style>
کدهای html من
<div id="menu">
<nav>
<ul id="main-menu">
<li><a href="#">آموزش طراحی سایت فروشگاهی</a></li>
<li><a href="#">آموزش طراحی سایت</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">آموزش های رایگان</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">فروشگاه</a></li>
<li><a href="#">ارتباط با ما</a></li>
</ul>
</nav>
</div>
اگه جواب بدید ممنون میشم
اگه جواب رو به ایمیلم بفرسیتد که خیلی ممنون میشم
پاسخ: 
دقیقا متوجه منظورتان از "منو من مقداری فضا از سمت چپ رو تشخیص نمی ده" نشدیم اما به صورت کلی با کم و زیاد کردن مقادیر خاصیت هایی مانند left و right در عناصر منو می توانیم فاصله های را تنظیم کنیم، همچنین با در نظر گرفتن ویژگی text-align متن را در وسط یا طرفین چینش کنیم گه این کار در نمونه کد بالا انجام شد (کد بالا ویرایش شد).
نویسنده: امیر مهدی
زمان: ۲۲:۳۰:۱۵ - تاریخ: ۱۳۹۹/۰۲/۲۸
سلام ممنونم از اینکه کمکم کردید ولی من منو رو با زیر منوها می خواستم کد شما زیر منوها رو از بین برد. منظور من از این حرف این بود که وقتی هاور می کنم بجای اینکه کل لیست ایتم (li) رو بک گراندش رو تغییر بده نصفش رو هنگام هاور تغییر میده.
کاشکی می تونستم برای شما عکش رو بفرستم تا ببینید که چی می گم.
اگه جواب بدید ممنون میشم
اگه جواب رو به ایمیلم بفرسیتد که خیلی ممنون میشم
پاسخ: 
اگر به صورت مستقل منو را در یک صفحه HTML تست کنید می بینید که مشکلی ندارد! تغییرات خیلی مختصر بودند و پس از تست مشکلی در نمایش زیرمنوها دیده نشد؟
برای ارسال اسکرین شات می توانید تصویر را در یک سایت آپلود و آدرس URL آن را درج کنید یا از طریق ایمیل ما (موجود در بخش تماس) فایل را ارسال نمائید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





7 × 3
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form سحر
در:
سلام من وقتی میخوام توی قسمت صفحات جداگانه وبلاگم گزینه ادامه مطلب رو بیارم باید چیکار کنم چون فقط قسمت نوشته جدید همچین قابلیتی...
۱۵:۰۸:۱۹ ۱۳۹۹/۰۳/۰۸

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

form علیرضا
در:
با سلام مجدد در پاسخ یکی از کامنت هایم فرمودین که جهت فراخوانی (اجرای) یک فایل در سرور راس ساعت مشخص و صرف...
۱۱:۲۸:۲۴ ۱۳۹۹/۰۳/۰۵

form علیرضا
در:
سلام اگر بخواهیم صفحات سایت رأس ساعت مشخصی مثلا ساعت 12 ظهر رفرش بشه چه کدی رو باید استفاده کنیم. ممنون
۰۴:۴۳:۴۷ ۱۳۹۹/۰۳/۰۵

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

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

form علی
در:
چطور میشه همزمان با کلیک بر روی «تعویض کد» یعنی کد زیر: پوشه ساخته بشه. با سپاس
۰۹:۵۰:۲۷ ۱۳۹۹/۰۳/۰۳

form علی
در:
با سلام... من یه متغیر تعریف کردم مثلا رو بهش متصل کنیم ممنون از پاسختون.
۰۶:۱۶:۲۷ ۱۳۹۹/۰۳/۰۳

form یاسمن
در:
سلام یه برنامه ای که رشته رو به عنوان password دریافت کنه و کاراکتر فاصله نباشد طول رشته هم از 8 تا 50 باشه عدد...
۱۸:۵۲:۴۴ ۱۳۹۹/۰۳/۰۲

form مرتضی ق
در:
سلام خسته نباشید. یک سایت اصلی و مادر دارم مثلا www.m.com حالا سه سایت دیگر زیر مجموعه مثلا m1 و m2 و m3 من...
۱۸:۲۵:۱۱ ۱۳۹۹/۰۳/۰۲

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

form fatemeh
در:
پاراگراف زیر را داریم. چه تنظیماتی در CSS و HTML نیاز است تا در صفحه وببدرستی نمایش داده شود؟ میشه برا جواب این سوال...
۱۶:۳۲:۲۳ ۱۳۹۹/۰۳/۰۱

form علی
در:
با سلام و عرض ادب من یه فانکشن تعریف کردم و کدهای فایل ajax-loading-message.php رو درونش گذاشتم
۰۸:۴۲:۲۱ ۱۳۹۹/۰۳/۰۱

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

form amir
در:
سلام ممنون از سایت خوبتون چطور میشه با جاوااسکریپت ایجکس و پی اچ پی بتونم تمامی جدول های دیتابیس رو هر کدوم با یه...
۲۰:۴۵:۵۲ ۱۳۹۹/۰۲/۳۰
form علی
در:
با سلام و عرض ادب بسیار سایت پر محتوایی دارید تبریک... می خواستم بپرسم اگر بخواهیم مثلا کاربر روی یک لینکی در سایت...
۰۷:۲۲:۰۱ ۱۳۹۹/۰۲/۳۰
form Edward ASharp
در:
سلام میشه همين فایلای کاملشو به من بدید؟
۰۰:۰۲:۲۱ ۱۳۹۹/۰۲/۳۰
form میکاییل
در:
سلام من پروزه ای دارم با mvc نوشته شده و در روت سایت فایل htacsess دارم که کد های زیر توشه ...
۰۲:۳۰:۰۲ ۱۳۹۹/۰۲/۲۹
form mahdi
در:
سلام استاد عزیز ، این درسته که با node.js دیگه نیازی به یادگیری php نخواهیم داشت؟
۲۲:۳۹:۳۶ ۱۳۹۹/۰۲/۲۸
form امیر مهدی
در:
سلام ممنونم از اینکه کمکم کردید ولی من منو رو با زیر منوها می خواستم کد شما زیر منوها رو از بین برد. منظور من...
۲۲:۳۰:۱۵ ۱۳۹۹/۰۲/۲۸
form امیر مهدی
در:
سلام. من در طراحی منو سایت با مشکل برخوردم. من منو خودم رو ساختم و متوجه شدم که منو من مقداری فضا از سمت چپ...
۱۹:۲۴:۰۱ ۱۳۹۹/۰۲/۲۸
form امین
در:
خیلی خیلی ممنون از اینکه جواب دادید اما الان که امتحان کردم مجموع همه ی سفارشات رو میزنه یعنی اگر 3 نفر سفارش دادن...
۱۳:۴۶:۵۵ ۱۳۹۹/۰۲/۲۸
form امین
در:
درود به شما خسته نباشید یک سوال داشتم خیلی گشتم اما پیدا نکردم من دیتابیسی برای مثال invert دارم میخوام یک صفحه...
۰۱:۰۰:۴۵ ۱۳۹۹/۰۲/۲۸
form امیر
در:
عالی بود. سپاس گذارم
۱۰:۱۹:۴۴ ۱۳۹۹/۰۲/۲۷
form فرامرز اسماعیلی
در:
سلام خسته نباشید. من داخل ویرایشگرهای notepad++ یا Braket دستور html رو می نویسم یعنی فایل متنی به صورت index.html رو می خواهم اجرا کنم...
۲۲:۴۱:۴۳ ۱۳۹۹/۰۲/۲۶
form پری
در:
سلام بعضی از سایت ها وقتی اهنگ بعدی رو پلی میگنیم اهنگ قبلی که در حال پخش است به طور خودگار قطع میشود میشه این...
۱۴:۲۲:۲۵ ۱۳۹۹/۰۲/۲۶
form ilia Delbar
در:
خیلییییییییییی خوبه! فقط دلم می خواد یه برنامه درست کنم رنگ ها رو نشون بده (رنگ تگ ها)
۱۳:۱۵:۱۹ ۱۳۹۹/۰۲/۲۶
form زهیر صفری
در:
با سلام چطور میتونم تاریخ تولد فرد ایرانی رو بگیره مثلا از input و سن فرد رو در input بعدی نمایش بده میتونید...
۱۲:۳۸:۵۷ ۱۳۹۹/۰۲/۲۶
form حبیب
در:
با سلام بنده از طریق مودم خانه به اینترنت وصل شدم هم با کامپیوتر و هم با موبایل. اما ای پی در هر...
۰۳:۱۲:۵۴ ۱۳۹۹/۰۲/۲۶
form امین
در:
سلام خسته نباشید امیدوارم جوابمو بدید من داخل یک صفحه این کد جاوا رو دارم میخوام خروجی که میده رو داخل...
۱۳:۴۴:۳۳ ۱۳۹۹/۰۲/۲۵
form امیر هادی نجاتی
در:
ممنون از شما. این قسمت (استفاده از جاوا اسکریپت برای غیر فعال کردن کلیک راست) واقعا به دردم خورد .
۲۱:۰۳:۵۰ ۱۳۹۹/۰۲/۲۴
form لیلا
در:
سلام ، ببخشید من میخوام یک مدرک رو در سایت آپلود کنم ولی ارور زیر رو میده . میشه راهنماییم کنید. ممنون
۱۴:۵۲:۴۷ ۱۳۹۹/۰۲/۲۴
form زهرا جعفری
در:
با سلام بنده میخواهم در جاوااسکریپت یک textbox داشته باشم که در آن یک دکمه چشمک زن بذارم وسط متن و وقتی روی...
۱۰:۰۱:۵۱ ۱۳۹۹/۰۲/۲۴
form جواد
در:
سلام. مقادیر و اطلاعاتی از یک سایت دیگه با همین متد file get contents میگیرم که روی لوکال هاست سرعتش خوبه، روی سرور هم بد...
۲۲:۰۳:۲۲ ۱۳۹۹/۰۲/۲۳
form علی رضایی
در:
در خط آخر خطای نحوه ارسال آرگومان می دهد. خطای syntax است یا دستور مورد دارد؟
۱۳:۲۹:۴۹ ۱۳۹۹/۰۲/۲۳
form علی
در:
سلام میخوام مطالب مرتبط با موضوعات سایتم رو در پایین اونها نمایش بدم چجوری میتونم این کار رو بکنم
۰۱:۲۸:۰۰ ۱۳۹۹/۰۲/۲۳
form امیرحسین
در:
با سلام. من تو css میخوام از اتریبیوت border-radius استفاده کنم ولی وقتی مقدارشو مثلا توی div زیاد میذارم متن داخل div بیرون میاد میخواستم...
۱۹:۵۲:۳۰ ۱۳۹۹/۰۲/۲۲
form امیرعلی
در:
با سلام بنده میخواستم بدانم که میشود تگ div را با این روش ها پنهان کرد من میخواهم افزونه ی وردپرسی را...
۱۲:۳۹:۲۶ ۱۳۹۹/۰۲/۲۲
form یوسف رضایی
در:
با سلام و خسته نباشید خواستم بپرسم خروجی یک فرم (با چند گزینه) بر روی برووزر که اماده برای ارسال برای سرور هست را توی...
۱۱:۱۴:۰۳ ۱۳۹۹/۰۲/۲۲
form سعیده
در:
سلام من یه اهنگ که تو وبلاگم میزارم صفحه پخش اهنگ میاد و بلندگوش ولی اون مثلث پلی کنندش نمیاد یعنی عملا واسم...
۱۵:۴۱:۰۵ ۱۳۹۹/۰۲/۲۱
form مجید اسکندری فر
در:
سلام حدود 700 تصویر رو در وبلاگم بارگذاری کردم و حدود 6000 بازدید داشته علت عدم نمایش تصاویر بارگذاری شده در وبلاگم چیست؟ خیلی زحمت...
۱۰:۳۲:۴۵ ۱۳۹۹/۰۲/۲۱
form علیرضا
در:
سلام، ممنون از مطلب کاملتون یه نکته رو هم من اضافه کنم برای کاملتر شدن مقاله، هر آدرس آی پی از یک شناسه هاست...
۰۹:۳۷:۵۰ ۱۳۹۹/۰۲/۲۱
form mahdi
در:
سلام استاد عزیز ، خیلی ممنون از راهنمایی ، انجامشون میدم، فکر میکنم همه این کارارو بلد باشم فقط WYSIWYG رو اصلا نشنیده بودم که...
۰۷:۱۸:۳۷ ۱۳۹۹/۰۲/۲۱
form معصومه
در:
سلام، امروز دیدم که عکس های وبلاگم حذف شده چرا؟ چطور میتونم برشون گردونم؟ عکس ها رو از سایت پیکو فایل آپلود میکردم، هرچقدرم سعی...
۱۴:۵۳:۵۱ ۱۳۹۹/۰۲/۲۰
form mahdi
در:
سلام استاد عزیز و گرامی ، یه درخواستی داشتم ازتون میخوام اگه براتون ممکنه من رو در جاوا اسکریپت بسنجی که بدونم چیا بلدم...
۱۴:۱۸:۵۸ ۱۳۹۹/۰۲/۱۹
form امیر
در:
با سلام، خدمت دوستان عزیز دو جدول به نام‌های Messages و Comments موجود هستند. در جدول Comments فیلدی به نام IDElement وجود دارد که...
۰۵:۲۹:۳۸ ۱۳۹۹/۰۲/۱۹
form ehsan hoseini sianaki
در:
سلام خیلی عالی و کاربردی بود. خسته نباشید.
۲۳:۰۰:۵۱ ۱۳۹۹/۰۲/۱۷
form امید
در:
با سلام و عرض ادب فیلتری میخوام که تعداد جوابهای فیلترهای سایت tse بورس که با جاوا نوشته شده رو بگه مثلا قرار...
۰۰:۱۰:۵۱ ۱۳۹۹/۰۲/۱۷
form احسان
در:
سلام ببخشید من هر کار میکنم تو گوشی اندروید با Html یه عکس رو در سایت خودم بزارم هیچی نمیشه فقط یه علامت عکس میاد...
۲۲:۲۸:۳۷ ۱۳۹۹/۰۲/۱۶
form hasti
در:
سلام . وقت بخیر . میشه مثالی بزنید که right over join برابر با inner join (داخلی) بشه . /با order و customer/ ...
۲۰:۰۵:۱۷ ۱۳۹۹/۰۲/۱۶
form میثم
در:
سلام مجدد من دیگه اینقدر با این کدها ور رفتم دیوونه شدم. این کل تابع منه. شما می تونید برای حل مشکلی که...
۱۷:۳۰:۳۱ ۱۳۹۹/۰۲/۱۶
form میثم
در:
سلام در تکمیل سوالی که خدمت شما عرض شد: ببینید ما دو تا فیلد فایل داریم توی اولی عکس اپ میشه و توی...
۱۶:۲۶:۲۶ ۱۳۹۹/۰۲/۱۶
form ماردین
در:
سلام من میخواستم ببینم چکار کنم که اولین query رو بدون حذف بقیه query ها حذف کنم
۱۵:۵۲:۵۴ ۱۳۹۹/۰۲/۱۶
form میثم
در:
سلام یه سوال خدمت شما داشتم. من با جاوا اسکریپت میخوام بخش فایل توی فرمم رو چک کنم. توی فرم 2 تا فیلد...
۱۱:۴۷:۵۲ ۱۳۹۹/۰۲/۱۶
form amir mtf
در:
سلام ببخشید من میخواستم در تگ این‌پوت برخی از کلمات و علامت ها رو حذف کنم. یک درخواست دیگر هم دارم اگه میشه کد...
۱۲:۳۷:۰۵ ۱۳۹۹/۰۲/۱۵
form کیوان
در:
سلام ممنون از سایت خوبتون، من یه فرم دارم که اطلاعاتش رو از دیتابیس میگیره، چطور میتونم با نوشتن حلقه بعد از چاپ سه...
۱۸:۲۲:۲۴ ۱۳۹۹/۰۲/۱۳
form mohammad
در:
آموزشتون خیلی فهما و دقیق بود ممنون
۲۱:۵۵:۳۸ ۱۳۹۹/۰۲/۱۲
form محمودی
در:
سلام چطوری میتونم برای سایت ثبت نام کدبورسی و ثبت نام ارز دیجیتال بک لینک بگیرم
۱۵:۲۶:۰۷ ۱۳۹۹/۰۲/۱۲
در انتظار بررسی: ۰