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

Saturday, September 13, 2025 GMT +3:30

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

css-drop-down-menu

از کدها و استایل 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 - طراحی وب
قبلی »
« بعدی
related مطالب بیشتر:
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
چسبیدن فوتر قالب به پائین صفحه با CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
آموزش استفاده از فونت فارسی در وب با CSS
دیدگاه
more ۱۲۸ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
محسن (مبتدی)
۱۸:۱۶ ۱۳۹۵/۰۴/۲۸
منظورم اینکه چطور میتونیم باکس منو رو جای دلخواه تو قالب قرار بدیم باید مقادیر کدوم عنصر رو تغییر بدیم
انجام این کار ساده نیست و باید با HTML و CSS آشنا باشید، احتمالا نیاز به ویرایش کد قالب خواهد بود که محدود به عنصر خاصی نمی شود، بستگی دارد منو با سایر عناصر موجود در قالب از نظر خاصیت ها مشکلی نداشته باشد، در هر صورت بدون آشنایی با HTML و CSS برای سفارشی سازی با مشکل روبرو خواهید شد!
محسن (مبتدی)
۱۹:۱۳ ۱۳۹۵/۰۴/۲۵
سلام استاد
ما چطور میتونیم منو رو شناور کنیم یعنی مقادیر کدوم عنصر کد مربوط به منو رو باید تغییر بدیم
منظور از شناور کردن مشخص نیست؟! لطف با ارائه یک نمونه آنلاین سوالتان را تکمیل کنید تا امکان راهنمایی وجود داشته باشد.
امیر
۲۰:۳۰ ۱۳۹۵/۰۴/۱۰
باتشکر از پاسخ سریع شما
سایت هنوز ساخته نشده و آنلاین نیست
میشه بفرمایید خاصیت z-index در کدام کلاس منوی کشویی که قرار دادید باید گذاشته بشه ؟ ایا در کلاس باکسی که پشت ان پنهان می شود هم باید تغییری در z-index آن ایجاد کرد ؟
باتشکر فراوان
به صورت نمونه برای کلاس sub-menu این کار انجام شده که در حالت عادی کفایت می کند، در کل اگر هر دو عنصر درگیر دارای خاصیت z-index باشند، عنصری در سطح بالاتر نمایش داده می شود که عدد آن مقدار بیشتری داشته باشد! می توانید برای بلاک زیرین خاصیت z-index با مقدار 1- در نظر بگیرید.
امیر
۰۸:۳۴ ۱۳۹۵/۰۴/۱۰
سلام ممنون بخاطر آموزش هاتون
با این اموزش یک منو کشویی درست کردم فقط یه مشکلی که داره منو های زیر مجموعه زیر پارامتر بعدی صفحه پنهان میشه اگه تعدادشون زیاد باشه مثل عکسی که اپلود کردم واستون اون فلشی که زدم گزینه سومی هست اما پشت باکس پایینی پنهان شده
http://s3.img7.ir/IzhnL.png

از z-index هم استفاده کردم نتیجه نداد (در پاسخ به یکی از کاربران فرموده بودید)
باتشکر فراوان
اگر به درستی از خاصیت z-index استفاده کنید نباشد مشکلی به این لحاظ وجود داشته باشد، لذا این احتمال وجود دارد که این خاصیت به درستی روی عنصر هدف اعمال نشده باشد، یا مقدار در نظر گرفته شده از مقدار عنصر درگیر، کمتر باشد! در صورت تمایل آدرس صفحه را جهت بررسی درج کنید.
Zare
۱۴:۵۱ ۱۳۹۵/۰۴/۰۹
سلام خسته نباشین. من مو به موی کدا رو نوشتم. منتها زیر منوی من که خودش شامل یه زیر منویه دیگه ام میشه رو نمیاره.
میتونین کدشو بذارین واسم؟ واقعا احتیاج دارم. منوی اصلی رو با ۴ زیرمنوها میاره ولی زیر منوها که هر ۴ زیر منو شامل ۴ زیر منوی دیگه هستو نمیاره.
ممنون میشم کدشو بذارین واقعا نیاز دارم
اگرچه مشخص نیست منظورتان منو در چه سطحی است، اما کد همراه پیش نمایش است و ملاحظه می کنید که مشکلی در عملکرد آن وجود ندارد، لذا ممکن است اشتباهی در کدنویسی یا تداخل کدهای منو با سایر کدهای صفحه وجود داشته باشد.
kimia
۱۸:۱۷ ۱۳۹۵/۰۳/۲۲
سلام ممنون از سایت خوبتون...
سوالم اینه که من منوی کشویی مثل منوی شما توی قالبم ایجاد کردم و برای اینکه دکمه ها تو یه ردیف باشن اون ها رو داخل جدول گذاشتم حالا مشکلش اینه که مثلا روی دکمه آموزش مقدماتی میرم منو باز میشه و بقیه دکمه ها توی یه ردیف میان پایین و بعد که دوباره اشاره گر ماوس از روی دکمه میره کنار همه دکمه ها به حالت قبل برمیگردن
ممنون
لطفا آدرس صفحه مورد نظر را جهت بررسی درج نمائید!
محدثه
۱۹:۵۱ ۱۳۹۵/۰۱/۲۷
سلام
ممنون از راهنماییتون
من از کد شما برای منو خودم استفاده کردم و درست شد
اما یک مشکلی ایجاد شده اونم اینه که وقتی منو کشویی باز میشه زیر متن اصلی سایت قرار میگیره
باید چکار کنم ؟
لطفا در خصوص نحوه استفاده از خاصیت z-index در CSS در وب جستجو کنید.
محسن
۲۱:۰۰ ۱۳۹۵/۰۱/۲۴
سلام وقت بخیر
استاد همونطور که می بینید گزینه اول منوی اصلی این قالب رو نتونستم خوب تنظیم کنم اشکال از کجاست؟
<!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>وبگو | تگ های اصلی html</title>
<meta name="description" content="توضیحی برای مطلب شما" />
<meta name="keywords" content="کلمات, کلیدی, شما" />
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:8px;
    direction:rtl;
 background:url

(http://s7.picofile.com/file/8241816434/Found_205170003_20355.jpg)
}
.page{background:white;text-align:left;margin:30px 

auto;padding:30px;height:1450px;width:1000px;}
.header

{padding:0;margin:0;position:relative;height:210px;background:gray;widt

h:1000px;}
.header h1{position:relative;font-family: Arial;font-size: 36pt; font-

weight: bold;color:green;text-align:center;padding-top:40px;margin-

bottom:10px;margin:0px}
.header A:link{font-family: Arial; font-size: 24pt; font-weight: 

bold;color:black;text-decoration:none}
.header A:hover{font-family: Arial; font-size: 18pt; font-weight: 

bold;color:white;text-decoration:none}
.header A:visited  {font-family: Arial; font-size: 18pt; font-weight: 

bold;color:white;text-decoration:none}
.header .subtitle {color:white;font-family: Tahoma; font-size: 

18pt;text-align:center;margin-top:0px;}
.sidebar{float: left; font-family: Tahoma; font-size: 8pt;line-

height:1.8 ; background-color:transparent;width:180px; text-

align:right;}
.sidebar h3 {margin-bottom:3px;margin-top:0px;font-family: 

Tahoma;font-size: 8pt;font-weight: 600;}
a {
    text-decoration:none;
    color:red;
}
a:hover {
    color:blue;
}
#main-menu {
    position:relative;
    line-height:12px;   
}
#main-menu a {
    display:block;
    width:229.5px;
    padding:8px;
    border:#666 solid 1px;
    background-color:black; 
    color:#FFF;
    font-size:20px       
}
#main-menu a:hover {
    background-color:red;        
}
#main-menu ul {
    list-style-type:none;
    padding-top:45px;
    padding-right:5px;
}
#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:20px;
    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;
}
#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 class="page" dir="rtl" >
<div  class ="header" >
<h1><a href="http://webgoo.ir"title="webgoo"class="header A" >وبگو | آموزش برنامه 

نویسی و مهارتهای وب</a></h1>
<p  class="subtitle">coding</p>
<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="#">منوی زیر مجموعه &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>        
   </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>
<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>
</div>
<div class="sidebar">
<h4>bin</h4>
<p>ss</p>
<p>na</p>
<p>mast</p>
<hr />
<h5>anar</h5>
<p>teh</p>
<p>es</p>
<hr />
ارتباط با ما
<br />
ارتباط با شما
<br />
ارتباط با آن
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="http://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>
</div>
</div>
</body>
</html>
خطایابی این موارد پس از تکمیل کار ساده نیست و به صرف زمان و آزمایش و خطا احتیاج دارد، به طور مثال در نگاه اجمالی مقدار padding در نظر گرفته شده برای تگ ul به نظر اولین مشکل است، به هر صورت برای رفع این موارد سعی کنید از ابتدا ساختار را مورد به مورد اضافه و همزمان خروجی را در مرورگر تست نمائید تا پیدا کردن اشکالات راحتتر باشد.
محسن
۱۴:۱۶ ۱۳۹۵/۰۱/۱۴
سلام استاد
میخواستم بدونم من چطور میتونم اندازه عنوان یا نوشته یک منو رو تغییر بدم یعنی رو کدوم عنصر بایستی دست کاری کنم.
می توانید در سلکتورهایی که به a ختم می شوند یا آی دی main-menu و یا حتی li، با استفاده از خاصیت font-size این کار را انجام دهید.
وبلاگ
۲۱:۵۷ ۱۳۹۵/۰۱/۰۸
سلام
خسته نباشيد؛
لطفا كمي توضيح دهيد كه چگونه امكان دارد به صفحه اي كه با بردن موس زير منوها باز مي شود، تصوير هم اضافه كرد؟!
ممنونم.
در صورت آشنایی با CSS و استفاده از خاصیت background یا حتی استفاده مستقیم از تگ img در HTML در کنار متن مورد نظر، می توانید این کار را انجام دهید.
پری
۱۳:۱۲ ۱۳۹۴/۱۲/۲۰
سلام
کدهای css, html مربوط به منوی کشویی افقی رو میفرستم
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menumega</title>
<link type="text/css" rel="stylesheet" href="menumega.css">
<style type="text/css">
body{
font-family:tahoma;
padding:50px;
}
#main-menu{
list-style:none;
border:1px solid #aaa;
float:right;
border-left:none;
padding: 0;
}
#main-menu li{
float:right;
border-left:1px solid #aaa;
position:relative;
}
#main-menu li a{
text-decoration:none;
float:right;
padding:0 15px;
line-height:32px;
}
#main-menu li a:hover{
color:#f08;
}
#main-menu  li ul{
list-style:none;
width:180px;
border:1px solid #aaa;
border-bottom:none;
position:absolute;
top:32px;
display:none;
padding: 0;
}
#main-menu  li:hover ul{
display:block;
}
#main-menu ul li{
float:none;
border-left:none;
border-bottom:1px solid #aaa;
}
#main-menu  ul li a {
float:none;
display:block;
}
</style>
</head>
<body>
<ul id="main-menu">
<li><a href="#">x</a></li>
<li><a href="#">y</a></li>
<li><a href="#">u</a>
<ul>
<li><a href="#">u1</a></li>
<li><a href="#">u2</a></li>
<li><a href="#">u3</a></li>
</ul>
</li>
<li><a href="#">k</a></li>
<li><a href="#">f</a></li>
<li><a href="#">c</a></li>
</ul>
</body>
</html>
وقتی این کدها رو اجرا می کنم : سمت راست مقدار فضایی که برای عنصر x درنظر گرفته می شود بیشتر از بقیه است.
و زمانیکه موس رو روی عنصر u میبرم ، زیر منو کامل نمایش داده نمیشه border مربوط به زیر منو ی u کل فضا رو دربر نمیگیره
اگر امکان داره ایراد هاشو بگیرید
ممنون
کد اصلاح و برای ul ها خاصیت padding با مقادیر 0 در نظر گرفته شد!
بهناز
۱۲:۱۶ ۱۳۹۴/۱۱/۰۱
با سلام
شما برای ایجاد زیر منو از ul , li استفاده کردید، ولی در سایت w3chools از div استفاده کرده، کدوم درست تر هست؟
من به اون روش اینکارو انجام دادم برای تمرین درست بود، اما وقتی خواستم به منویی که قبلا درست کرده بودم اعمال کنم به مشکل برخوردم.
این روش در سایتی که گفتم استفاده شده.
ممنونم
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>
از نظر SEO استفاده از ul li به روشی که استفاده کرده ایم توصیه می شود (بهینه است)، از نظر عملکرد تفاوت خاصی بین دو روش وجود ندارد! در کل برای تنظیم امکانات اینچنین صرف نظر از روش، باید بر CSS مسلط و تجربه کافی داشته باشید!
محمد
۱۹:۱۵ ۱۳۹۴/۱۰/۱۲
سلام وقتی این کد را در سایتم میزارم همه نمشته های سایتم ده پانزده پیکسل میرن بالا
کد را نباید کامل در سایت کپی کنید، به فرض قسمت body در استایل CSS صرفا برای دیدن پیش نمایش مستقل ابزار کاربرد دارد و در هنگام درج در سایت می توانید آن را حذف کنید (مشکل سایت شما از همین قسمت است!)، به عبارتی استفاده از این منو باید با داشتن میزانی از آشنایی قبلی با CSS صورت گیرد.
پژمان
۱۸:۳۱ ۱۳۹۴/۰۸/۱۶
دستتون درد نکنه اینا واقعا عالیه.
یه سوال داشتم میشه در مورد position بیشتر توضیح بدین؟؟
لطفا در این خصوص در وب عبارت "خاصیت position در CSS" را جستجو کنید، مطالب زیادی وجود دارد!
داوود
۱۹:۲۲ ۱۳۹۴/۰۷/۲۹
سلام آقای مهندس، شبتون بخیر.
راستش رو بخواین هنوز این درس رو نخوندم و دلیلش هم این بود که ابتدا میخوام عین مثال شما رو خودم پیاده سازی کرده بعدش بخونم که به ایرادام پی ببرم. ولی مطمئنم که در این درس از خاصیت فرزند و سطح اول و دوم استفاده شده؛ به همین خاطر من هم سوالم در همین رابطه هستش. آقای مهندس یه شبه کد دیدم که خودم اومدم و میخواستم بنویسم ولی نشد. بعدش که به کد نگاه کردم دیدم چقدر جالب اومده و به فرزند دوم دسترسی پیدا کرده . این شبه کد Html رو مشاهده بفرمایین:
<div id="page-wrap">
<div class="content">
<h2>Arrow Header</h2>
<p>facilisis luctus, metus</p>
<h2>Arrow Header</h2>
<p>facilisis luctus, metus</p>
</div>
ببینید من برای اینکه به این h2 دومی دسترسی داشته باشم، اومدم و طبق معمول گفتم فرزند آخر رو انتخاب کرده و فاصله از بالاش رو اینقدر بده. اینجوری:
.content h2:(last-child) {
   margin-top: 20px;
}
ولی عمل نمیکرد، به کد طراح که نگاه کردم دیدم اینجوری نوشته؛ آخه چرا کد من که در واقع منطقی هم بود، تو این مثال جواب نمیده؟؟
.content h2:not(:first-child){
    margin-top: 20px;
    }
اگه نیاز بود و نتونستم واضح بیان کنم، بفرمایین تا لینک کد طرح اصلی رو براتون بفرستم.
تا آنجا که اطلاع داریم سلکتور last-child زمانی عمل می کند که یک عنصر داخل تگ parent به عنوان آخرین فرزند باشد! در واقع به این نحو استایل با این سلکتور قابل اعمال است:
.content p:last-child
نخست
قبلی
1
2
3
4
5
6
بعدی
آخر
paged صفحه 2 از 9
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
5 × 3
20 × 20
=
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2025 Webgoo.ir - All Rights Reserved.