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

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

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 - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
مخفی کردن عناصر وب با CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS

دیدگاه

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

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

مهرزاد

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

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

استفاده از مطالب و خدمات معمول سایت رایگان است، اما اگر تمایل به قلم یاری دارید می توانید از درگاه پرداخت سایت اقدام کنید.

رامین

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

ممنون از پاسخ خوبتون
من منوی مورد نظرم رو در نرم افزار Easy CSS Menu پیدا کردم و اون رو ساختم حالا هر کاری میکنم راست چین نمیشه تمام کد های css و جی کوئری رو دست کاری کردم ولی درست نشد
حالا از شما یه در خواستی دارم
این کد ها رو چجوری به دست شما برسونم
ایا می تونید این منو رو برای من راست چین کنید چون تمام چیزی رو که می خام این منو داره و حاضرم برای درست کردنش مبلغی هم به صورت توافقی پرداخت کنم
خیلی ممنون
خیلی خیلی لازمش دارم ممنون

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

رامین

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

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

اصولا انجام چنین حالتی خود مشکلات متعدد دیگری ایجاد می کند و مرسوم نیست، در واقع اگر تلفن همراه یا ... قادر به نمایش صحیح منو نیست نشانگر ضعف مرورگر آن در پردازش صفحات وب و خاصیت های CSS یا به فرض سرعت و دقت لمس آن است و لذا ممکن است در هر سایت یا صفحه دیگری با مشکلات از این دست مواجه شوید، در هر صورت برای خلق منو با قابلیت های سفارشی چاره ای جزء آشنایی با کدنویسی جاوا اسکریپت یا جی کئوری نیست!

مهدی

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

بسیار مفید بود
ممنون

پیام

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

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

<html>
	<head>
		<meta charset ="UTF-8">
		<title>salam</title>
		<style>
			body{
				background-color:black;			
			}
			.x{
				padding: 1px;
				background-color: #55f;
				border-width: 0px 0px 3px;
				border-style: solid;
				border-color: #fff;
				width: 100px;
				height: 30px;
				list-style-type: none;
				text-align: center;
				float: right;
			}
			.x:hover{
				background-color: #aaa;
				padding: 1px;
				border-width: 0px 0px 3px;
				border-style: solid;
				border-color: #f22;
			}
			.l{
				color: #000;
				text-decoration: none;
			}		
			.l:hover{
				color: #f55;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ul dir="rtl">
			<li class="x"><a class="l" href="#">خانه</a></li>
			<li class="x"><a class="l" href="#">دانلود</a></li>
			<li class="x"><a class="l" href="#">تماس با ما</a></li>
			<li class="x"><a class="l" href="#">درباره ما</a></li>
		</ul>
	</body>
</html>

به نظر شما مشکلش چیه؟
ممنون

کدهای منوی آموزش داده شده را با نمونه خود مقایسه کنید، به طور مثال ویژگی block برای تگ a در کدهای شما تعریف نشده!

ناشناس

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

سلام خیلی ممنون از آموزش هاتون
سوال من اینه که تو این منو وقتی اندازه زیر منوها رو تغییر میدم مثلا بزرگتر از li ها اندازه اون li هم همراش تغییر میکنه چطوری جلوش رو بگیرم ؟

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

علیرضا

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

چرا clear:both را قرار دادیم؟؟؟

بلاک زیر را حذف کنید:

<div class="clear"></div>

علت استفاده از این خاصیت مشخص می شود!
نکته: از clear برای پاکسازی اطراف یک عنصر به طور مثال برای عدم تداخل در نمایش محتوای زیرین با محتوای سطح بالاتر استفاده می شود، به عبارتی این خاصیت یک خط نامرئی ایجاد می کند!

مهناز

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

با سلام
یکی از ایتمهای منوی اصلی من زیر منو دارد که با تغییر دادن css به آنچه شما فرمودید الان زیر منو نمایش داده نمیشود!
قبلا با کد خودم که ناقص بود مشکل این بود که زیر منو ثابت توی صفحه میموند و با حرکت موس روی منوی اصلی همچنان زیر منو بودش. که الان دیگه زیر منو نشوون داده نمیشه!!
میشه لطفا کمکم کنید!!
ممنون

منظورتان کدام منو و کدام تغییرات است؟! لطفا مشکل را با ارائه یک لینک به منو مد نظر و دقیقتر مطرح کنید تا امکان بررسی و راهنمایی وجود داشته باشد.

amir

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

سلام
سوالم احتمالا خیلی سادست
چرا

href="#"

گذاشتید؟ مگه نباید لینک بدین ؟

صرفا جهت تست از علامت # (استفاده از این علامت در href کاربردهای خاص خود را دارد) استفاده شده، در حالت کاربردی می توانید (و معمولا باید) لینک قرار دهید.

نام شما

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

ممنونم . من واقعا تو این قسمت طراحی مشکل داشتم

afrasiyab

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

با سلام و تشکر از مطالب مفیدتون
من یه قالب طراحی کردم که از قسمت های وارپر، هدر، میدل، سنتر و فوتر تشکیل شده است حالا این منویی را که اموزش دادید را در قسمت هدر که قرار میدم میره بالای هدر قرار میگیره در حالی که من میخوام در پایین سمت راست هدر قرار بگیره با مارجین تاپ هم که میخوام تغییر بدم هدر و این منو با هم پایین می ایند
ممنون میشم راهنماییم کنید

بدون دیدن سورس کدها خیلی نمی توان راهنمایی خاصی کرد، اما معمولا استفاده از یک بلاک با خاصیت clear و مقادیر both برای جداسازی قسمت هایی که باید در زیر هم قرار گیرند کاربرد دارد.

عرفان بختیاری

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

با سلام
در این کدها منو ها زیر هم هستند، اگر من بخواهم کنار هم قرار گیرند چه قسمتی را باید تغییر دهم؟؟

این منو برای این حالت تعریف نشده، لذا ایجاد تغییرات مد نظر شما نیازمند آزمایش و خطا است (زمانبر است!)، لطفا در وب عبارت "منوی افقی" را جستجو کنید.

جواد

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

سلام.
میخوام اطلاعاتی که توی یک table دارم رو بیاد توی لیست کشویی از DB فراخوانی کنه و نشون بده و بعد بتونم یکی از اون مقادیر رو به عنوان گزینه انتخابی لیست کشوییم انتخاب کنم.
منظورم کل اطلاعات یک table نیست مثلا فقط ستون name رو بیاد توی لیست نمایش بده و بعد انتخابش کنم.
اگه میتونین کمکم کنین چون واقعا گیر کردم و لازم دارم :(.
خیلی ممنون تشکر.

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

علی

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

سلام
ممنون از آموزش جامع و کاملتون.
من تمام کارها رو انجام دادم ولی متاسفانه حالا که زیر منو ها باز میشن همشون روی هم می افتن! یعنی انگار منوی من فقط یک زیر منو داره.
از clear هم استفاده کردم ولی درست نشد!
ممنون میشم کمکم کنین.

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

فرشته 24

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

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

متاسفانه به دلیل کمبود زمان امکان اینگونه تغییرات سفارشی میسر نیست.

صفحه 3 از 9

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