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

چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

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

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر 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

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

قبلی »

« بعدی

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

دیدگاه

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

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

monje

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

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

monje

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

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

برای ایجاد منو با سطح چهارم استایل CSS را به صورت زیر تغییر دهید:

<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: 1000px;
}
#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 .vertical-sub-level {
	background-color: #666;
}
li:hover .vertical-sub-level .vertical-sub-level {
	display: none;
}
.vertical-sub-level li:hover .vertical-sub-level .vertical-sub-level {
	display: none;
}
.vertical-sub-level li:hover .vertical-sub-level {
	display: block;
	*left: 0px;/*IE 7*/
}
.vertical-sub-level .vertical-sub-level li:hover .vertical-sub-level {
	display: block;
	*left: 0px;/*IE 7*/
}
</style>

و کدهای منو را بر اساس الگوی زیر اضافه کنید:

<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="http://webgoo.ir/">خانه »</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 »</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="#">خدمات »</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 »</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>
          <ul class="vertical-sub-level">
            <li><a href="#">منوی زیر مجموعه - 3</a></li>
            <li><a href="#">منوی زیر مجموعه - 3</a></li>
            <li><a href="#">منوی زیر مجموعه - 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید »</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1 »</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>

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

tohid gholizadeh

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

مرسي از زحماتي كه مي كشيد
كارتون بيسته بيست

جواد

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

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

لطفا سوالتان را با جزئیات بیشتری مطرح کنید.

patriot

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

تشکر
بسیار عالی و کاربردی بود.
توضیحاتتون درباره مطالب خیلی مفید و سودمنده!
لطفا ادامه بدید.

farzan

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

سلام
من یه منو نوشتم که در صفحه اول بعد از اینکه اسلاید شو گذاشتم وقتی رو منو میرم قسمت آبشاریش زیر اسلاید شو باز میشه چیکار کنم رو قرار بگیره؟؟؟؟؟؟؟؟؟

برای بلاک اصلی از خاصیت z-index در CSS استفاده کنید، هر چه مقدار z-index بیشتر باشد، عنصر بالاتر از سایر موارد نشان داده می شود، مثال:

z-index:1000px;

فرزاد

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

ممنون از توضیحتون ولی من منظورم برای صفحات دینامیک بود و نه استاتیک... از طریق CSS برای صفحات دینامیک میخوام...

برای این کار کافی است به تگ li مورد نظر یا به تگ a یک کلاس CSS اختصاص دهید و داخل آن کلاس با استفاده از خاصیت background تصویر پس زمینه ای تنظیم کنید، به طور مثال این یک نمونه استایل خطی است:

<li style="background:url(img.jpg) left center no-repeat";>

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

فرزاد

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

سلام،
خیلی آموزش هاتون خوبه ... واقعا لذت بردم...
فقط یه سوال چه جوری میشه برای submenu هایی که دارای SubSubMenu هستن چطور میشه آیکونی مثلا فلش گذاشت که بشه گفت یعنی این قسمت submenu داره ؟

می توانید با استفاده از تگ img در HTML تصویر مورد نظر خودتان را بین تگ li و در قسمت لینک منوی زیرمجموعه آن قرار دهید (اگر توجه کنید، در پیش نمایش منو این کار با علامت ;raquo& انجام شده)، از این نظر محدودیتی نیست.

lpln

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

با سلام ممنون از آموزشتون
من میخوام این کد افتی شه باید چیکار کنم
اینی که گذاشتین عمودیه

از قسمت جستجوی سایت، عبارت منوی کشویی را جستجو کنید.

nahid

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

سلام ممنون از همکاریتون
من از این مثال واسه منوهای آبشاری استفاده کردم تو IE جواب نمیده. این کد

<!DOCTYPE html>

گذاشتم فایده نداشت. نمیتونم که به مشتری بگم تو IE کار نکن.
چیکار کنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

این منو با اینترنت اکسپلورر نسخه 7 و مابعد سازگار است، اما اگر منظور شما سازگاری با مرورگر از رده خارج شده و غیر استاندارد اینترنت اکسپلورر 6 است، خیر این منو در این نسخه کاربرد ندارد و بهتر است از منوهای جی کئوری استفاده نمائید.

صادق

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

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

مطلب مربوط به منوی کشویی (افقی) با این مطلب متفاوت است، از قسمت جستجوی سایت عبارت "منو کشویی" را تایپ کنید، یا از بخش آموزش های کاربردی CSS استفاده نمائید، اگر همچنان مشکل دیگری بود اطلاع دهید تا بررسی کنیم.

Scepter

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

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

http://lord2352.blogfa.com

چینش تگ های ul و li در منوی وبلاگ صحیح نیست، باید دقیقا مطابق الگویی که در مثال می بینید و توضیحات راهنما، منوها را تنظیم کنید.

مهدی

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

خیلی زحمت کشیدید. عالی بود.
ایشاا... که همیشه
سلامت، خوش و موفق باشید.

ممنون از نظر لطف شما.

ansherli

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

راستش این اولین سایتی هست که دارم طراحی میکنم و به عنوان پروژه پایانیم هستش که باید با PHP , HTML باشه . برای همین خیلی بی تجربم و فقط از مطالبی که توی نت هست استفاده می کنم .
سایتی مثل وبگو برای من یه استاد عالی محسوب میشه.
ممنونم از زحماتتون

خواهش می کنیم، باعث خوشحالی است اگر کمکی کرده باشیم.

ansherli

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

خیلی ممنونم از راهنماییتون
کاری که گفتید رو انجام دادم و درست شد ، هر چند که مجبور شدم 83 صفحه رو ویرایش کنم :(
چون با IE جواب میداد برای همین فکر نمی کردم مشکل این باشه.
مرسی از لطفتون

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

صفحه 4 از 5

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