آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

ساخت منوی کشویی با تگ ul li و CSS

از کدها و استایل CSS علاوه بر کاربردهای معمول و روزمره برای خلق جلوه های خاص در بستر وب نیز استفاده می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد خلق منوهای کشویی (بازشونده) یا به اصطلاح Dropdown مبتنی بر تگ های ul li و CSS است، عملکرد این امکان به این صورت است که لیستی از منوها با قابلیت داشتن زیر مجموعه هنگام بردن نشانه گر ماوس روی تگ والد ظاهر و با خارج کردن ماوس از محدوده تگ والد مجددا به طور خودکار محو می شوند، نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که معمولا حجم بالاتر و از نظر اجرا به اصطلاح سنگینتر هستند، به هر صورت در این آموزش می خواهیم با نحوه ساخت منوهای کشویی یا بازشونده مبتنی بر تگ ul li و صرف استیال CSS آشنا شویم.

چرا از تگ ul li استفاده کنیم؟

اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم در درجه اول به این علت است که این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly (موتور جستجو پسند) می گویند، از طرفی برای کاربران نابینا یا دارای معلولیت جسمی (Screen Readers) که از ابزارهای سخنگو و خط بریل استفاده می کنند و نمی توانند از امکانات مبتنی بر استایل CSS به نحو مطلوب بهره بگیرند وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن ویژگی های ظاهری همچنان منوها به صورت دسته بندی شده، ترتیبی و زیرمجموعه ای قابل استفاده باشند، دلیل دیگر نیز می تواند رعایت اصل کدنویسی معنایی باشد، در HTML مبحثی تحت عنوان Semantic یا معنایی وجود دارد که به طور خلاصه یعنی استفاده ی به جا از تگ ها در هدف مد نظر از معرفی آن تگ، به طور مثال برای ایجاد لیستی از آیتم ها تگ ul li کاربرد دارد و نباید از تگ های دیگر که فلسفه ای متفاوت دارند استفاده کنیم.

ساخت چارچوب کار با کدنویسی HTML

قبل از پرداختن به استایل CSS منو ابتدا چارچوب کار و منوهای خود را مبتنی بر تگ ul li در HTML به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه است و می توانیم با توجه به نیازمان آن را ویرایش و سفارشی سازی کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی کشويی با تگ ul li و CSS</title>
<!-- Webgoo.ir -->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="https://webgoo.ir">منوی اصلی</a>
   <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
   </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
    </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
    </ul>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>

توضیح:
- به نحوه قرار گرفتن آیتم های منو به صورت تگ های ul li در حالت تو در تو دقت کنیم، هر تگ ul یک سطح از منو را تعریف می کند.
- برای مدیریت یکپارچه جایگاه و نحوه نمایش منو، یک بلاک والد با آی دی فرضی main-menu ساخته ایم که درون خود تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.
- در تگ های ul سطح دو از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آیتم های آن را در CSS خواهیم دید.

تعریف استایل CSS منو

پس از اینکه اسکلت بندی و چارچوب کار را با کدنویسی HTML ساختیم نوبت به تعریف ویژگی های ظاهری با اختصاص آی دی و کلاس در CSS است، بر همین مبنا در کد بالا یک آی دی و یک کلاس به کار رفته است (آی دی main-menu و کلاس sub-menu)، لذا قسمت عمده کار ما تعریف ویژگی ها برای این دو سلکتور خواهد بود که در استایل زیر این کار را انجام داده ایم و علاوه بر دو سلکتور آی دی و کلاس موارد عمومی مثل فونت صفحه، رنگ و حالت لینک ها و... را نیز تنظیم کرده ایم:

<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 20px;
}
a {
    text-decoration: none;
    color: #03C;
}
a:hover {
    color: #CCC;
}
#main-menu {
    position: relative;
    line-height: 16px;
}
#main-menu a {
    display: block;
    width: 150px;
    padding: 8px;
    border: #666 solid 1px;
    background-color: #030;
    color: #FFF;           
}
#main-menu a:hover {
    background-color: #060;        
}
#main-menu ul {
    list-style-type: none;
    padding-top: 0px;    
}
#main-menu li {
    float: right;
    position: relative;
    text-align: center;
}
#main-menu li ul a {
    text-align: center;
    border: 0px;
    border-bottom: #666 1px solid;
}
#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}
#main-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    margin-right: 0px;
    padding: 0px;
    z-index: 999;
}
#main-menu ul.sub-menu li {
    text-align: center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear {
    clear: both;
}
</style>

توضیح:
- مقادیر مربوط به سلکتور body و a به صورت کلی ویژگی های ظاهری صفحه وب را تعریف می کنند و در واقع حالت پیش فرض هستند.
- مقادیر position در آی دی main-menu باید به صورت relative یا نسبی تعیین شود، به این صورت ویژگی های تگ های زیرمجموعه آن از موقعیت این تگ به عنوان والد تبعیت می کنند.
- در قسمت main-menu li به این جهت از float و مقادیر right استفاده کرده ایم که منوها در کنار هم در یک سطح و از راست به چپ قرار بگیرند.
- به نحوه تعریف استایل برای تگ های زیرمجموعه ای در کد بالا دقت کنیم، به طور مثال تعریف به صورت main-menu li ul a بر روی عنصر ul که خود زیر مجموعه li است و li نیز داخل بلاک div با آی دی main-menu قرار دارد در حالت لینک شده اثرگذار است.
- کلیه مقادیر مربوط به رنگ های پس زمینه با توجه به سلیقه قابل تغییر است و از این لحاظ مشکلی نخواهد بود.
- ویژگی z-index برای قرار گرفتن لایه مربوط به آیتم های منو در بالاترین سطح کاربرد دارد، هرچقدر عدد z-index بیشتر باشد آن لایه بالاتر از سایر لایه ها در صفحه نمایش داده می شود.
- قسمت مربوط به clear و مقادیر both برای قرار گرفتن صحیح منو داخل بلاک main-menu لازم است، این خاصیت از سمت چپ و راست بلاک یک خط فرضی ترسیم می کند و اجازه چینش سایر المان ها در یک ردیف را نمیدهد.

سازگاری منو با مرورگرهای مختلف

این منو با نسخه های به روز تمام مرورگرها سازگار است و تنها ممکن است در برخی مرورگرهای قدیمی و منسوخ شده به طور مثال مرورگر غیراستاندارد و قدیمی اینترنت اکسپلورر نسخه 6 که به درستی از ویژگی های CSS پشتیبانی نمی کنند مشکل ناسازگاری داشته باشیم، برخی مرورگرها نیز به صورت ناقص از امکانات منو پشتیبانی می کنند که می توانیم استایل مخصوص آنها را در صفحه وارد کنیم، این کار را برای سازگاری منو با مرورگر اینترنت اکسپلورر 7 با دستور شرطی زیر انجام داده ایم:

<!--[if IE 7]>
<style>
#main-menu ul.sub-menu {
    left: 0px;    
}
</style>
<![endif]-->

ایجاد منوی زیر مجموعه سطح دوم

با استفاده از خاصیت display و مقادیر none و block می توانیم منوی کشویی را توسعه داده و به هر تعداد منوی زیر مجموعه ایجاد کنیم، به طور مثال با افزودن ویژگی های CSS زیر به استایل منو این کار را برای ایجاد منوهای زیر مجموعه سطح دوم انجام می دهیم:

#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}

توضیح:
- خاصیت display با مقادیر none در تکه کد اول برای حالتی است که تگ li اول در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای اصلی می برد)، لذا تگ ul در دو سطح پائین تر از تگ li (یعنی همان تگ ul که منوی زیرمجموعه سطح دو را در خود دارد) باید مخفی باشد.
- خاصیت display با مقادیر block در تکه کد دوم برای حالتی است که تگ li دوم در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای سطح اول می برد)، لذا تگ ul دربرگیرنده منوی زیر مجموعه سطح دوم باید نمایش داده شود.
- با درک قانون سلکتورها در CSS و کمی آزمایش و خطا می توانیم سطح منو را به تعداد بیشتری توسعه دهیم.

کد منو و پیش نمایش آنلاین

در زیر کد نهایی منو و پیش نمایش آن را به صورت آنلاین می توانیم بررسی و تست کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی کشویی با تگ ul li و CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 20px;
}
a {
    text-decoration: none;
    color: #03C;
}
a:hover {
    color: #CCC;
}
#main-menu {
    position: relative;
    line-height: 16px;
}
#main-menu a {
    display: block;
    width: 150px;
    padding: 8px;
    border: #666 solid 1px;
    background-color: #030;
    color: #FFF;           
}
#main-menu a:hover {
    background-color: #060;        
}
#main-menu ul {
    list-style-type: none;
    padding-top: 0px;    
}
#main-menu li {
    float: right;
    position: relative;
    text-align: center;
}
#main-menu li ul a {
    text-align: center;
    border: 0px;
    border-bottom: #666 1px solid;
}
#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}
#main-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    margin-right: 0px;
    padding: 0px;
    z-index: 999;
}
#main-menu ul.sub-menu li {
    text-align: center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear {
    clear: both;
}
</style>
<!--IE 7-->
<!--[if IE 7]>
<style>
#main-menu ul.sub-menu {
    left: 0px;    
}
</style>
<![endif]-->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="https://webgoo.ir">منوی اصلی</a>
   <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <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="#">منوی زیرمجموعه</a></li>        
   </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <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="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>        
    </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <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="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <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>
</ul>
<div class="clear"></div>
</div>
<hr>
برای بررسی ویژگی ها و سطوح منو ماوس را روی آیتم ها ببرید.
</body>
</html>

پیش نمایش آنلاین

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
چسبیدن فوتر قالب به پائین صفحه با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
حذف اسکرول افقی (Horizontal Scroll) با CSS
ساخت بلاک شناور عمودی با CSS

دیدگاه

۱۲۸ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

سارا

۱۴:۲۰ ۱۳۹۳/۱۰/۱۵

با سلام
در کنار منوها سمت راست یه دایره کوچک مشکی قرار می گیرد!!
چگونه حدف شود ؟؟

می توانید از list-style با مقادیر none در استایل CSS استفاده کنید.

katebi

۰۶:۱۵ ۱۳۹۳/۱۰/۰۴

سلام
خسته نباشيد
واقعا وبتون عاليه
خيلي خيلي ازتون ممنونم
هميشه موفق باشيد
دوستدار شما
حامد

محمد

۱۶:۱۶ ۱۳۹۳/۰۷/۳۰

دستت درد نکنه که دانشت رو شیر می کنی

raha

۱۰:۵۶ ۱۳۹۳/۰۶/۲۳

سلام ممنون از اموزشتون. من وقتی از منوی ابشاری که حاوی فایل js توی صفحه html استفاده میکنم تو مرورگر درست جواب میده ولی وقتی همون فایل منو رو توی صفحه مستر سایتم که با asp.net نوشتم قرار میدم فقط نوشته ها رو مثل لیست نشون میده اگه میشه راهنماییم کنید

فایل CSS را در صفحه وارد کرده اید؟
در هر صورت مشکل شما نیاز به بررسی و تست خروجی صفحه دارد.

محمد

۱۲:۳۲ ۱۳۹۳/۰۶/۱۶

با سلام خدمت شما
چه کدی رو باید اضافه یا ویرایش کرد که بعنوان مثال زیر مجموعه منوی اصلی (در همین منویی که شما اموزش داده اید) دو ستون داشته باشد نه یک ستون

این منو در حد آشنایی با مبانی کار و صرفا جنبه آموزشی دارد، برای توسعه آن مطابق با نیازتان باید بر HTML و CSS مسلط بوده و با آزمایش و خطا تغییرات مد نظرتان را اعمال کنید، جواب خاصی نمی توان به سوالتان داد چون نیاز به کدنویسی، آزمایش و خطا و صرف زمان دارد که متاسفانه چنین کاری به دلیل زمانبر بودن میسر نیست!

پریسا کوچکعلی

۱۵:۱۹ ۱۳۹۳/۰۶/۱۱

با سلام
من یک مشکلی دارم منویی که ساختم به صورت عمودی است نه افقی اگر امکان دارد کمک کنید خیلی ممنون می شوم

منظور سوالتان مشخص نیست!
منوی آموزش داده شده افقی است!

رها

۱۵:۳۳ ۱۳۹۳/۰۶/۰۶

سلام
ممنون از آموزشتون. من منوها رو طراحی کردم فقط میخوام موقع که ماوس روی منو رفت به آهستگی منو باز و بسته بشه. از خاصیت transition-timing-function نمی دونم کجاش باید استفاده کنم. میشه راهنماییم کنید

راهنمایی دقیق نیاز به تست دارد که متاسفانه فرصت آن مهیا نیست، اما به طور خلاصه باید در حالت عادی و hover افکت خود را تعریف کنید (لطفا به آموزش های CSS3 مراجعه کنید).
مثال:

http://codepen.io/thomasjwicker/pen/xpJjq

http://jsbin.com/UXETuBi/1/edit

مهدی

۱۸:۱۸ ۱۳۹۳/۰۵/۲۸

با سلام. این کدی که شما منتشر کردی تا دو مرحله زیر شاخه است. میشه بگید برای دسترسی به مرحله سوم کد css و html که باید بنویسم چی میشه؟

انجام این کار شاید به ظاهر ساده به نظر برسد، اما در واقع نیازمند آزمایش و خطا و صرف وقت است که متاسفانه به لحاظ زمانی امکان توسعه بیشتر منو وجود ندارد، باید سعی کنید با تسلط بر CSS و پیروی از نمونه دستورات منو را توسعه دهید.

milad

۲۲:۲۰ ۱۳۹۳/۰۵/۱۸

سلام دادا. دادا میشه بگی رنگ منوها رو از سبز پر رنگ به سیاه چطوری تغیر بدم؟.
کد رنگ تو کدوم خطه؟

باید CSS بلد باشید یا لااقل کدهای HEX را بشناسید، خاصیت background-color در استایل CSS جهت تعیین رنگ منو در حالت عادی و فعال به کار رفته است.

علی

۲۳:۴۱ ۱۳۹۳/۰۵/۱۳

خیلی ازتون ممنونم واقعا نمی دونم چطور باید ازتون تشکر امید وارم همیشه سربلند و پیروز باشید
علی یارتان

zahra

۰۸:۵۲ ۱۳۹۳/۰۵/۰۹

با سلام و خسته نباشي. خواهش ميكنم اين كدها رو كه براي ساختن منو گذاشتيد حتما بگيد تو كدوم قسمت بايد بنويسيم. source يا در قسمتي كه يك فايل css ايجاد ميكنيم؟ لطفا. ممنونم

سوالتان مبهم است! قاعدتا تگ های HTML و کدهای CSS هم می توانند در کنار هم استفاده شوند (مانند پیش نمایش) و هم می توان فایل های CSS را به صورت یک فایل خارجی وارد صفحه HTML کرد، اینکه کجا از آنها استفاده کنید بستگی به سایت یا وبلاگتان دارد که کجا از کدهای HTML پشتیبانی کند.

ali

۰۶:۲۶ ۱۳۹۳/۰۵/۰۷

با سلام خدمت شما
من خیلی تلاش کردم اما هر چه تلاش کردم لایه ها در اکسپلور باز نشد برای نمونه آزمایشی ای که قرار دادید و در فایر فاکس باز می شود اما در اکسپلور باز نمیشود
تمام راه هایی که به نظرم میرسید امتحان کردم اما باز هم نشد
اگر امکان دارد راهنمایی ام کنید
اگر امکان دارد جواب را به ایمیلم ارسال نمایید
با تشکر

کد در نسخه 8 و بالاتر مرورگر IE تست شده و هیچ مشکلی وجود ندارد!
احتمالا مورد به مسله دیگری مروبط می شود (به طور مثال مشکل مرورگر، سیستم عامل و...)

حسین

۱۱:۴۸ ۱۳۹۳/۰۵/۰۴

سلام. آیا با استفاده از css می توان منویی طراحی کرد به گونه ای که بر فرض مثال وقتی از یک li مشخص به سطح زیرین می رویم آن li همواره در حالت hover باقی بماند؟

هرچند منظورتان از "همواره" مشخص نیست، اما چنین مواردی با سلکتورهای CSS امکانپذیر است که باید نحوه استفاده از آنها را درک کنید.

حسین

۱۰:۵۰ ۱۳۹۳/۰۵/۰۴

سلام. آیا عنصری با خاصیت position:relative می تواند خاصیت float:right را هم داشته باشد؟؟ من هر چه سعی کردم نشد.
با تشکر لطفا توضیح مختصری بدهید.

خاصیت position با مقدار relative موقعیت بلاک سطح پائین را نسبت به بلاک والد خود مشخص می کند، در این حالت خاصیت های بلاک فرزند نسبت به بلاک والد لحاظ می شوند نه نسبت به تگ body، لذا استفاده از float در این حالت مشکلی ندارد، اما نسبت به بلاک والد پردازش می شود.

فرشاد

۰۱:۴۷ ۱۳۹۳/۰۴/۲۴

من یک کدی احتیاج دارم که داینامیک باشه. مثلا تو دیتابیس یک سری منو با زیر شاخه هاش ریخته میشه که شاید هر زیر شاخه خودش با مثلا 10 مرحله دیگه . اینی که شما داری تا دو مرحله زیر شاخه است. این کد سی اس اسش چی میشه؟ من پی اچ پی و دیتابیس رو میتونم بزنم ولی سی اس اس رو نمیتونم لطفا کمکم کنید واجبه

تا آنجا که اطلاع داریم برای این نوع منو عملا CSS با حالت داینامیکی وجود ندارد! باید تا یک سطح مشخص داشته باشید و برای هر سطح استایل CSS تعریف کنید. (کمتر دیده شده که منوها از سطح 4 یا 5 فراتر روند، لذا داشتن منویی با 10 سطح خیلی متداول نیست!)

صفحه 4 از 9

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.