Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ساخت منوی کشویی با تگ ul li و css
همانطور که می دانیم، امروزه از کدها و استایل های css علاوه بر کاربرد های معمول و روزمره، برای خلق جلوه های خاص در بستر وب، استفاده های زیادی می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد، خلق منوهای کشویی (بازشونده) یا به اصطلاح drop down مبتنی بر تگ های ul li و css است، به این صورت که لیستی از منوها با قابلیت داشتن زیر مجموعه که تنها هنگام بردن ماوس روی آنها، ظاهر می شوند و با خارج کردن ماوس، مجددا به طور خودکار محو می شوند؛ نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که البته یک قاعده نانوشته در وب می گوید هر چه قدر ظرافت و جلوه های ویژه کار افزایش یابد، به همان نسبت از سازگاری کم می شود

چرا از ul li استفاده کنیم؟
اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم به این علت است که در درجه اول این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly گویند، از طرفی برای کاربرانی که به هر دلیل از استایل css نمی توانند استفاده کنند (screen readers)، وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن استایل css، همچنان منوها به صورت دسته بندی شده و زیرمجموعه ای قابل روئیت و استفاده باشند؛ دلیل دیگر نیز می تواند اصولی تر بودن کدنویسی باشد، در html مبحثی تحت عنوان semantic یا معنایی وجود دارد که به طور خلاصه مفهوم آن، استفاده ی به جا از تگ ها است، مثلا برای ایجاد لیستی از آیتم ها، تگ ul li کاربرد دارد و نباید از موارد مشابه که فلسفه ای متفاوت دارند، استفاده شود.

ساخت چارچوب کار با html


ابتدا قبل از پرداختن به کدنویسی css، چارچوب کار و منوهای خود را مبتنی بر ul li در html به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه آورده شده است و شما می توانید با توجه به نیاز خودتان آن را ویرایش کنید.

<!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>وبگو | آموزش منوی کشویی با ul li و css</title>
<!-- http://webgoo.ir -->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="http://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 در حالت تو در تو دقت کنید.
- همانطور که ملاحظه می کنید، ابتدا یک بلاک با آی دی فرضی main-menu ساخته ایم که درون خود یک تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.
- در تگ های ul سطح دو، از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آن را خواهیم دید.

تعریف استایل css


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

<style type="text/css">
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 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 لازم است.

سازگاری با مرورگرها


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

<!--[if IE 7]>
<style type="text/css">
#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 که منوی زیرمجموعه سطح دوl را در خود دارد) باید مخفی باشد.
خاصیت display با مقادیر block در تکه کد دوم، برای حالتی است که تگ li دوم در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای سطح اول می برد)، لذا تگ ul دربرگیرنده منوی زیر مجموعه سطح دوم، باید نمایش داده شود.

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


در زیر کد نهایی منو و پیش نمایشی از آن را به صورت آنلاین می توانید ملاحظه کنید.

<!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>وبگو | آموزش منوی کشویی با ul li و css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
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 type="text/css">
#main-menu ul.sub-menu {
    left:0px;    
}
</style>
<![endif]-->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="http://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 />
برای بررسی ویژگی های منو، ماوس را بر روی لینک ها ببرید.
<br />
[<a href="http://webgoo.ir/92/%D8%B3%D8%A7%D8%AE%D8%AA-%D9%85%D9%86%D9%88%DB%8C-%DA%A9%D8%B4%D9%88%DB%8C%DB%8C-%D8%A8%D8%A7-%D8%AA%DA%AF-ul-li-%D9%88-css" title="ساخت منوی کشویی با تگ ul li و css">ساخت منوی کشویی با تگ ul li و css</a>]
</body>
</html>


1394/05/31 6:48:52 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما