آگهی
article

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

css-drop-down-menu

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

چرا از 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>
<!-- https://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 در حالت تو در تو دقت کنید.
- همانطور که ملاحظه می کنید، ابتدا یک بلاک با آی دی فرضی 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 که منوی زیرمجموعه سطح دو را در خود دارد) باید مخفی باشد.
خاصیت 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>
<!-- https://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="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 />
برای بررسی ویژگی های منو، ماوس را بر روی لینک ها ببرید.
<br />
[<a href="https://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>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» آموزش استفاده از فونت فارسی در وب با CSS
» ساخت بلاک شناور عمودی با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
commentنظرات (۱۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: arvin
زمان: ۰۸:۴۲:۳۳ - تاریخ: ۱۳۹۱/۰۸/۰۷
سلام، ممنون از این ابزار، واقعا فوق العادست.
اما 3 تا سوال داشتم.
الان از همین کد در وبلاگ استفاده میکنم
xxd.blogsky.com
اما سوالم، سوال اول:
یک خط طولانی زیر کادر ظاهر شده، که میخوام اونو بردارم، اما هر چقد کد رو دستکاری کردم نشد.
سوال دوم:
وقتی ماوس روی منو ها و زیر منو ها قرار میگیره، یک خط پایینشون ظاهر میشه، که در واقع منظورم همون زیر خط هستش، که میخوام نباشه. چطور میتونم بر دارمش؟
سوال سوم:
وقتی روی منو های اصلی قرار میگیرم، لینکشون فعاله، که میشه روش کلیک کرد و وارد صفحه ای شد، میخوام منو های اصلی لینک نداشته باشن، فقط لینک زیر منو ها فعال باشه، آدرس لینک منو ها رو پاک کردم، اما بازم فعاله.
پاسخ: 
سلام
برای اعمال تنظیمات ظاهری پیشرفته باید بر استایل نویسی css مسلط باشید، تمام مواردی که در سوال عنوان کرده اید، با آشنایی با css قابل حل هستند، این نوع تنظیمات تحت تاثیر قالب اصلی وبلاگ نیز قرار دارند و لذا تنها می توانیم در همین حد راهنمایی کنیم.
نویسنده: arvin
زمان: ۰۸:۵۳:۲۸ - تاریخ: ۱۳۹۱/۰۸/۰۷
ببخشید، یه سوال دیگه هم داشتم، وقتی کد رو وارد میکنم، فونت قسمت های دیگه وبلاگ ریز میشه!!!!!!!!!!!
میشه لطف کنین دلیلش رو بهم بگین؟
پاسخ: 
احتمالا دلیل آن این است که شما کد را بدون ویرایش و حذف قسمت body در قالب کپی کرده اید، عنصر body را از قسمت css کد منو حذف کنید، منظور این قسمت است:
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
نویسنده: arvin
زمان: ۰۹:۲۶:۴۱ - تاریخ: ۱۳۹۱/۰۸/۰۷
ببخشید، یه سوال دیگه هم داشتم، وقتی فونت کد رو از Tahoma به Times New Roman تغییر میدم، فونت های قسمت های دیگه وبلاگ ریز میشن.
فک میکنم قالب وبلاگ بر اساس فونت Tahoma نوشته شده، که با تغییر در این کد، یه ناسازگاری ایجاد میشه. چطور میتونم این مشکل رو حل کنم.
پاسخ: 
همان طور که در پیام قبلی گفته شد، می توانید کدهای مربوط به body را از قسمت استایل css منو حذف کنید، از این نظر مشکلی پیش نمی آید.
نویسنده: محمود
زمان: ۲۱:۱۴:۴۷ - تاریخ: ۱۳۹۱/۰۸/۱۰
ممنون از مطلب خوب شما.
نویسنده: مهسا
زمان: ۱۳:۰۰:۵۱ - تاریخ: ۱۳۹۱/۰۸/۱۵
با سلام و سپاس از زحماتتون
دموي كار رو با IE7 مشاهده كردم اما مشكل داره يعني مقدار left روي اون تاثيري نذاشته.
در اين موارد با كوچك كردن سايز صفحه توسط اسكرول اين زير منوها جا به جا ميشه يعني فقط موقع ماكزيمايز يا روي بعضي مانيتورها جواب ميده.
بايد چي كاركنيم؟ :(
پاسخ: 
سلام
راه حل این مشکل بسیار ساده است، شما باید منو را در یک بلاک div با اندازه عرض پیکسلی ثابت قرار دهید تا در هنگام کوچک شدن پنجره تغییر نکند، منوی فعلی به صورت خام است و برای موارد کاربردی می توانید تغییرات دلخواه خود را بر روی آن اعمال کنید.
نویسنده: لاله
زمان: ۲۳:۲۴:۵۹ - تاریخ: ۱۳۹۱/۰۸/۱۵
با سلام و تشکر
برای شناساندن z-index به IE7 از چه علامتی میتوان استفاده کرد؟
ممنون
پاسخ: 
سلام
اینترنت اکسپلورر در نسخه های 6 و 7 با خاصیت z-index ناسازگاری هایی دارد، لذا برای حل آن باید از خاصیت های دیگری نیز در کنار z-index استفاده کنید، در ie7 مشکل با افزودن خاصیت position:relative بر طرف می شود، به فرض:
#div-block{
position:relative;
z-index:1;
}
نویسنده: armin
زمان: ۰۹:۳۶:۴۱ - تاریخ: ۱۳۹۱/۰۸/۲۰
ببخشید چطور میشه این منو رو آورد وسط صفحه!!!؟؟؟ همه اش چسبیده به سمت راست صفحه!!!
پاسخ: 
برای تنظیم منو باید از css استفاده کنید، به طور مثال منو را در یک بلاک div با استایل زیر قرار دهید:
<div style="margin-left:auto; margin-right:auto;">
کد منو را اینجا قرار دهید
</div>
یا از تگ center در html استفاده کنید:
<center>
کد منو را اینجا قرار دهید
</center>
نویسنده: alitna
زمان: ۲۳:۱۴:۴۷ - تاریخ: ۱۳۹۱/۰۹/۰۱
سلام. وبلاگ خیلی خیلی خوبی دارین. مخصوصا این قسمت. یه سوال. لطفا بیاین و بهم بگین. تو رو خدا بهم بیاین و بگین خیلی ضروری هست. لطفا.
من با برنامه alllwebmenus pro5 یک منو ساختم. بعد چندین فایل داد. یکی از کد هایی که میده مثل همین کد اولی هست. اما قالب اون که دومی هست رو نمیدونم از کجا بگیرم تا اون کدها رو در اون قالب نشون بده. لطفا کمکم کنین. امیدوارم با این برنامه کار کرده باشین و بدونین من چی میگم :(
خیلی گشتم اما پیدا نکردم. چیزی که میده یک فایل js هست و یک پوشه که درون اون چندین فایل js هست و یک پوشه دیگه که عکس های اونه و بعد نمونه اون رو ساخته و با آدرس کامپیوترم توی فایر فاکس ساخته شدش رو نشون میده. لطف کنین بیاین به وبلاگم و بهم بگین. با تشکر.
www.freedownlooad.mihanblog.com
پاسخ: 
سلام
متاسفانه با این برنامه کار نکرده ایم اما نباید ساختار متفاوتی نسبت به سایر برنامه های مشابه داشته باشد، باید سورس صفحه html که برنامه جهت نمونه در اختیارتان قرار می دهد را بررسی کنید و ببینید که چه فایل هایی در کد استفاده شده است، سپس از الگو پیروی کرده و فایل های مورد نیاز را در یک سرور آپلود و در قالب وبلاگتان کدها را اضافه کنید، جهت راهنمایی بیشتر یک نمونه از منوهای این برنامه را در یک فایل فشرده به ایمیل ما ارسال کنید و مشکلتان را از آن طریق پیگیری نمائید.
نویسنده: سعادتی
زمان: ۰۱:۵۹:۳۸ - تاریخ: ۱۳۹۱/۰۹/۱۷
با سلام و تشکر از مطلب مفیدتون. می خواستم بدونم اگه بخوام منو رو به صورتی تغییر بدم که به جای باز شدن زیر منوها در جلوی منوی اصلی، در پایین منوی اصلی باز بشه و بقیه منوها هم پایین کشیده بشن (مثل منوی سمت راست سایت www.ebakh.com) چی کار باید بکنم؟
اگر لطف کنید زاهنمایی بفرمایید ممنون میشم
پاسخ: 
سلام
منوی مد نظر شما در اصطلاح منوی آبشاری نامیده می شود که آموزش آن را می توانید در همین صفحه از قسمت آموزش بعدی (دکمه های بعدی و قبلی) ملاحظه نمائید.
نویسنده: es
زمان: ۱۵:۰۳:۲۲ - تاریخ: ۱۳۹۱/۰۹/۲۰
من کد ها رو بررسی کردم // اما چرا شما به این شکل از کدها استفاده کردین:
1-#main-menu ul 
2-#main-menu li
3-#main-menu li ul a
4-#main-menu ul.sub-menu
مثلا در ul اولی یه سری استایل دادین و برای li هم همین طور و در ادامه اومدین دوباره به اینها استایل دادین.
(li ul a )... می خوام بدونم نحوه ی اجرای اینا چطوریه آیا نمیشد همش رو یه جا نوشت . من css و html رو بلدم اما به صورت کاربردی باهاش کار نکردم اینجاش رو متوجه نشدم. امیدوارم واضح گفته باشم.
پاسخ: 
استایل ها چند بار تکرار نشده اند، بلکه نسبت به عناصر و تگ هدف، در موارد متفاوت تعریف شده اند، اگر به ساختار درختی (DOM یا Document Object Model) منو نگاه کنید، متوجه می شوید که تگ ul هم در سطح بالا استفاده شده و هم درون تگ های li، به همین خاطر برای تنظیم استایل ul اول به فرض می نویسیم:
#main-menu ul {
list-style-type:none;
padding-top:0px;
}
و برای دسترسی به ul داخل تگ li می نویسیم:
#main-menu li ul a{
text-align:center;
border:0px;
border-bottom:#666 1px solid;
}
که در اینجا ما از a استفاده کرده ایم و یعنی حالت تگ ul در هنگام لینک بودن را تعریف کرده ایم، به همین ترتیب برای دسترسی به تگی با کلاس فرضی sub-menu درون تگ اصلی ul، می نویسیم:
#main-menu ul.sub-menu {
display:none;
position:absolute;
top:30px;
margin-right:0px;
padding:0px;
z-index:999;
}
در واقع ما به یک نوعی آدرس عنصر هدفمان را که می خواهیم ویژگی css بر آن اثر بگذارد، به طور دقیق مشخص می کنیم، همین کار را با اختصاص کلاس هم می توان انجام داد که راه دورتری است.
نویسنده: SMH
زمان: ۱۸:۱۶:۱۳ - تاریخ: ۱۳۹۱/۰۹/۲۴
آقا ممنون
چجور میشه این منو را به وسط مرورگر برد ؟؟؟
پاسخ: 
این پرسش قبلا مطرح شده، برای تنظیم منو باید از css استفاده کنید، به طور مثال منو را در یک بلاک div با استایل زیر قرار دهید:
<div style="margin-left:auto; margin-right:auto;">
کد منو را اینجا قرار دهید
</div>
یا از تگ center در html استفاده کنید:
<center>
کد منو را اینجا قرار دهید
</center>
نویسنده: ایمان
زمان: ۱۸:۱۰:۱۱ - تاریخ: ۱۳۹۱/۰۹/۲۹
سلام
آقا دمت گررررررررررررررممممممممممممم
خیلی حااااااااااااال دادی
مرسییییییییییییی
نویسنده: داوود
زمان: ۰۹:۱۷:۳۳ - تاریخ: ۱۳۹۱/۱۰/۱۸
سلام.
ممنون از آموزش خوبتون.
امکانش هست همین منو رو بصورت تو در تو تا مثلا 4 سطح آموزش بدید؟
لطفا از طریق ایمیل خبرم کنید.
یا علی
پاسخ: 
سلام
ممنون از پیشنهادتان، ایجاد منوی زیر مجموعه به آموزش افزوده شد.
نویسنده: داوود
زمان: ۱۵:۰۹:۰۹ - تاریخ: ۱۳۹۱/۱۰/۱۸
درود بر شما.
با افزودن زیرمجموعه کار رو کامل تر کردید.
موفق تر باشید.
نویسنده: صادق
زمان: ۱۱:۳۲:۲۸ - تاریخ: ۱۳۹۱/۱۱/۱۵
دستتون خوش واقعا وب مفید و با محتوای دارید
از پاسخ سریع و مفیدتون هم ممنون
اگه میشه کمکم کنید رنگ منو رو عوض کنم هر چی رنگا رو تغیر دادم نشد
رنگ منو رنگ بالای بلوک های وبلاگم باشه
پاسخ: 
خواهش می کنیم، نظر لطف شما است.
در مورد تغییر رنگ، منو کاملا بر مبنای css است و می توانید با گرفتن یک تصویر (اسکرین شات) از صفحه وبلاگ، در فتوشاپ طیف رنگی مورد نظر را به دست آورید و منو را مطابق آن تنظیم نمائید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




4 × 7
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام خیلی ممنون بابت پاسخ سریعتون خیلی دنبال همین دو خط کد بودم برای یادگیری سریع ریجکس ولی با سرچ پیدا نکردم و...
۱۸:۰۳:۴۳ ۱۳۹۸/۱۱/۰۷

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

form PewDiePie
در:
سلام چطور می تونم این کد رو یه لینک هم بهش اضافه کنم یعنی این که وقتی عکس رو می بینی طرف بتونه...
۲۳:۳۶:۲۶ ۱۳۹۸/۱۱/۰۶

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

form وحید پوربشیری
در:
سلام لطفا یکی که خوب جاوا اسکریپت بلده بیاد به این آیدی ت.ل.گ.ر.ا.م Alpha2020@ یه کد برام بنویسه پول هم میدم
۱۱:۱۲:۳۲ ۱۳۹۸/۱۱/۰۲

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی