ایجاد چارچوب کار با 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>
<!-- http://webgoo.ir -->
</head>
<body>
<!-- بلاک اصلی -->
<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></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>
<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>
<!-- http://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="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></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>
<hr />
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.
</body>
</html>