parsgreen.com
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>
<!-- 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>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی آبشاری (عمودی) با تگ ul li و css
» تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
» ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS
» ساخت بلاک شناور عمودی با CSS
» تنظیمات css مخصوص مرورگر اینترنت اکسپلورر
commentنظرات (۱۱۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: فریبا
زمان: ۲۱:۴۳:۵۹ - تاریخ: ۱۳۹۱/۰۴/۱۱
سلام
عالی بود و یک سوال:
اگر بخواهیم مقادیری را که برای تگ های HTML تعیین کرده ایم مثلاً در این آموزش فقط و فقط بر روی تگ هایی که برای ساخت منو استفاده کرده ایم تأثیر بگذارد و نه بر روی سایر تگ های HTML موجود در صفحه که مثل تگ های مورد استفاده در ساخت منو هستند، چه کار باید کنیم؟
پاسخ: 
سلام
اگر منظور شما جلوه های css است، با تعریف کلاس اختصاصی می توانید این کار را انجام دهید، به طور مثال برای تگ li کافی است کلاسی شبیه کد زیر ایجاد کنید:
<li class="your-class"><a href="#">منوی زیرمجموعه</a></li>
و همین طور برای هر تگی که تمایل داشته باشید، در ضمن، اگر در استایل خود برای تگی از ویژگی های عمومی استفاده کرده اید، به فرض به صورت زیر:
li{
color:#ccc;
}
ممکن است در کلاس اختصاصی نیاز به تعریف مجدد آنها به صورت سفارشی باشد.
نویسنده: EHSAN
زمان: ۱۲:۰۰:۱۲ - تاریخ: ۱۳۹۱/۰۴/۱۴
خیلی ممنون عالی بود
نویسنده: محمد
زمان: ۱۴:۳۰:۱۵ - تاریخ: ۱۳۹۱/۰۴/۲۰
سلام. ممنون از این آموزشی که گذاشتید.
خیلی دنبالش بودم.
دستتون درد نکنه.
نویسنده: محمد
زمان: ۱۲:۰۶:۳۳ - تاریخ: ۱۳۹۱/۰۴/۲۲
سلام
دو سوال داشتم
چه جوری میتونم منو رو زیباترش کنم؟
یک هم اینکه فکر میکنم سرعت سایتم بعد از گذاشتن این منو اومده پایین تر.
من این کد رو به قسمت هدر سایتم اضافه کردم
پاسخ: 
سلام
برای زیباتر کردن منو باید با استایل نویسی css آشنا باشید و از المان های تصویری استفاده کنید، اگر در این زمینه تجربه داشته باشید، کار سختی نیست، البته این کار تا حدودی هم سلیقه ای است.
در مورد سوال دوم، نه، سایت شما بررسی شد، کاهش سرعت نمی تواند ارتباطی به تگ های ساده و استاندارد html داشته باشد، در این منو از هیچ کد جانبی استفاده نشده است، شاید به دلیل فایل های jquery یا سیستم آمارگیری باشد که استفاده می کنید، یا اینکه سرور سایت شما موقتا دچار افت کیفیت شده باشد.
نویسنده: ASP.NET
زمان: ۱۴:۱۱:۳۴ - تاریخ: ۱۳۹۱/۰۴/۲۲
سلام
ممنون از مطلب به جا و کاربردی تون، خداخیرتون بدهد.
سوال: فرق id با class در تعریف استایل چیست، آیا نسبت به هم برتری دارند؟
در صورت امکان موارد کاربرد آن را ذکر کنید.
باز هم ممنون
پاسخ: 
سلام
خواهش می کنیم، در مورد سوال شما:
id و class با دو هدف متفاوت تعریف شده اند، اگرچه ممکن است در css، شباهت هایی داشته باشند، id برای عناصر یکتا در صفحه استفاده می شود، یعنی در هر صفحه باید برای یک عنصر یک id منحصر به فرد تعریف کنیم، همانطور که از نام آن مشخص است؛ به فرض شما نمی توانید دو عنصر با یک id مشترک در صفحه خود داشته باشید، در غیر اینصورت کدنویسی شما غیر معتبر است، این مورد مخصوصا اگر از جاوا اسکریپت برای یک عنصر استفاده کنید، اهمیت زیادی دارد، به فرض خاصیت document.getElementById بر روی id عناصر حساس است، یا اگر بعد از آدرس url آدرس hash یا همان علامت # و عبارتی را قرار دهید، مرورگر معمولا سعی می کند شما را به id مورد نظر در صفحه هدایت کند، اما فلسفه class متفاوت است، class ها برای ایجاد الگوهای یکسان برای عناصر مختلف استفاده می شوند، مثلا با ایجاد یک کلاس می توان به چندین بلاک div حالت و ویژگی هایی را نسبت داد، class و id برتری ندارند، در واقع مقایسه آنها صحیح نیست، چون فلسفه متفاوتی دارند.
امیدواریم پاسخ کافی بوده باشد.
نویسنده: milad
زمان: ۱۱:۰۰:۱۴ - تاریخ: ۱۳۹۱/۰۵/۲۵
سلام به مدیر سایت
عزیز من یه کد منو پیدا کردم با css و java script لینک css رو میدم ولی نمیدونم چطوری لینک خارجی به java script بدم اینم کدهاش
---------------------------- html --------------------------------
<ul id="menu_wrap" class="Blue"><li class="button"><a href="#">تماس با ما</a></li><li class="button"><a href="#">سفارش</a></li><li class="button"><a href="#">جدیدترین نرم افزارها</a></li><li class="button"><a href="#">اخبار</a></li><li class="button"><a href="#">انجمن  سایت</a></li><li class="button"><a href="#">صفحه اصلی</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="Search"  /></ul>
-------------------------------css-----------------------------------
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:800px;height:33px;list-style-type:none;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:6.5px;padding-bottom:6.5px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:15px;-webkit-border-bottom-left-radius:15px;-moz-border-topleft-radius:15px;-moz-border-bottomleft-radius:15px;border-top-left-radius:15;border-bottom-left-radius:15px}.Blue,.Blue .button a{color:#d9eef7;background:#0095cd;background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));background:-moz-linear-gradient(top,#00adee,#0078a5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5')}.Blue .button a:hover,.Blue .button a:focus{background:#007ead;background:-webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));background:-moz-linear-gradient(top,#0095cc,#00678e);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e')}.Blue .button a{border-right:solid 1px #0076a3}.Blue .button a:active{color:#80bed6;background:-webkit-gradient(linear,left top,left bottom,from(#0078a5),to(#00adee));background:-moz-linear-gradient(top,#0078a5,#00adee);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee')}.search{position:relative;float:right;margin-top:6.5px;}.search input[type=text]{width:180px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}.search a:before {width:6px;height:6px;border:2px solid  #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}.search a:after {left:24px;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}li a:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li a:before, li a:after {margin:-7px 0 0;background: #000;}
--------------------------- java script--------------------------
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript">var search_input= $('.search input[type=text]');var search_input_size =180; var search_large_size = 180; var padding = 7; var shrinked = "";$(document).ready(function(){search_input.click(function(){shrink();}).focus(function(){shrink();});search_input.blur(function(){ if(shrinked=="YES")normal();});$('.button a').hover(function(){if(shrinked=="YES")normal();}); });function shrink(){if(search_input_size < search_large_size ){$('.button a').each(function(){$(this).animate({'padding-left': padding+'px','padding-right': padding+'px'},'fast');});search_input.animate({'width': search_large_size+'px'},'fast'); shrinked="YES";}return false;}function normal(){search_input.animate({'width':search_input_size+'px'},'fast'); $('.button a').animate({'padding-left':'10px','padding-right':'10px'},'fast');shrinked="";search_input.blur();return false;}</script>
پاسخ: 
سلام
در بخش جاوا اسکریپت این منو، یک فایل با نام jquery-1.6.1.min.js به صورت خارجی ایمپورت شده است، بخش دوم را هم می توانید به همان صورت تنظیم کنید، یعنی مقادیر کد را داخل یک فایل متنی قرار داده و با فرمت js ذخیره کنید، سپس آن را در سرور خود آپلود کرده و آدرس فایل را در قسمت src قرار دهید.
نویسنده: milad
زمان: ۱۴:۰۹:۳۸ - تاریخ: ۱۳۹۱/۰۵/۲۵
یه سوال دیگه
داداش چطوری میتونم در خود سیستم مشاهده کنم
من کد اول رو تو یه فایل html ریختم بعد کد دوم رو تو یه فایل css ریختم بعد لینک دادم به فایل html حالا نمیدونم کد سوم رو تو html ذخیره کنم یا یه فایل دیگه درست کنم با فرمت js بعد چطوری لینکش بدم به html
پاسخ: 
در پاسخ قبلی ذکر شد، کافی است در یک فایل متنی کد قسمت بین تگ های script را کپی کرده و به صورت src در صفحه ایمپورت کنید، به فرض:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://yoursite.com/menu.js"></script>
نویسنده: milad
زمان: ۱۵:۲۸:۳۹ - تاریخ: ۱۳۹۱/۰۵/۲۵
داداش من هر کاری میکنم به این شکل در نمیاد اینم ادرس
http://www.mastergroup.ir/tools/menumaker
پاسخ: 
کد را در یک صفحه html قرار دهید و صفحه را به ایمیل ما بفرستید تا بررسی گردد، به احتمال زیاد شما در قسمتی دچار اشتباه می شوید.
نویسنده: milad
زمان: ۱۸:۵۱:۵۴ - تاریخ: ۱۳۹۱/۰۵/۲۵
استاد تشکر فراوان یک دنیا ممنون درست شد فقط استاد میشه به این کد زیر منو اضافه کرد بازم ممنون
پاسخ: 
خواهش می کنیم، افزودن قابلیت های بیشتر به این کد مستلزم تعریف کلاس ها و توابع بیشتر و آزمایش و خطا است که در کل به زحمت آن نمی ارزد! توصیه می کنیم اگر به منویی با زیر منو و مبتنی بر جی کئوری احتیاج دارید، به دنبال نمونه ای دیگر باشید.
نویسنده: sky
زمان: ۱۶:۲۶:۲۸ - تاریخ: ۱۳۹۱/۰۶/۰۹
با سلام
خداییش توی کارتون زحمت کشیدن رو میشه حس کرد و خسته هم نباشید
من به html و css آشنایی دارم ولی یه مورد دیگه خسته ام کرده وهر چه بیشترسعی میکنم کمتر به نتیجه میرسم
من با همین نوع روش چندی پیش منویی ساختم و از button استفاده کردم در دو مدل یه عادی و یکی زمانی که موس روشه ولی اصلا دومی عمل نمیکنه
قسمتی از کد:
<ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 540px; height: 40px";>
<li class="spaced_li"><a href="http://.....blogfa.com/rss" target="_blank"><img id="cbi_cbinsmenu_1" src="link button aval" name="ebbcbinsmenu_1" width="100" height="40" style="vertical-align: bottom;" border="0" alt="RSS" title="" /></a></li>
</ul>
البته الان اینجا گذاشتم فکر میکنم یه خورد بهم ریخته
پاسخ: 
سلام
ممنون از شما، اما لطفا مشکل خود را به طور مشخص عنوان کنید و آدرس صفحه مورد نظر را هم قرار دهید، با صرف قرار دادن قسمتی از کد این مشکل حل نمی شود.
نویسنده: محمد حسین
زمان: ۱۴:۵۹:۴۴ - تاریخ: ۱۳۹۱/۰۷/۰۳
سلام. چرا تو بلاگفا یا کلاً تو وبلاگ نمیخونه. یعنی منوی زیر مجموعش نمیاد.
پاسخ: 
سلام
فرقی ندارد در چه سیستمی این منو را استفاده کنید، مهم این است که کدهای html و css مورد نیاز به صورت صحیح درج شوند، از این منو در وبلاگ های بلاگفا نیز استفاده شده اما در مورد مشکل منو با وبلاگ شما، لطفا آدرس آن را قرار دهید تا بررسی گردد.
نویسنده: سارا
زمان: ۱۴:۳۹:۲۱ - تاریخ: ۱۳۹۱/۰۷/۰۵
با سلام
ممنون از آموزش خوبی که گذاشتید.
من به یه مشکلی برخورد کردم. منوها دقیقاً ساخته شده اما در حالت اجرا منوها باز نمیشن!
نمی دونم دلیلش چیه! میشه کمکم کنید؟
پاسخ: 
سلام
بررسی کنید که تگ ها را درست تعریف کرده باشید، یعنی شروع و پایان تگ ها دقیقا مانند کدی باشد که جهت نمونه ذکر شده، ممکن است قسمتی را به اشتباه جا انداخته باشید، به طور مثال این یک اشتباه است:
<!--[if IE 7]>
<style type="text/css">
#main-menu ul.sub-menu {
left:-40px;
}
</style>
<![endif]--
که علامت < در انتها حذف شده است و باعث می شود منو از کار بیفتد.
نویسنده: م
زمان: ۱۳:۳۰:۴۱ - تاریخ: ۱۳۹۱/۰۷/۲۳
سلام
ممنون از زحماتتون
اگه کدهای css رو توی فایل css جدا نوشتیم دستور شرطی سازگاری با IE 7 رو فقط مثل اینجا قبل از head بنویسیم کافیه؟
پاسخ: 
سلام
بله کافی است، دستورات شرطی را بعد از ایمپورت کردن فایل css در قسمت head اضافه کنید یا حتی می توانید استایل css مخصوص IE را نیز در یک فایل جداگانه نوشته و بعد از استایل اصلی به صورت نمونه زیر وارد صفحه کنید:
<!--[if IE 7]>
<link href="style/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
نویسنده: person
زمان: ۲۰:۰۷:۱۳ - تاریخ: ۱۳۹۱/۰۷/۲۹
سلام. ضمن تشکر از شما سوالی داشتم.
از کد این منو در صفحه asp خود استفاده کردم اما به دلیل وجود این قسمت:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
در کد html به مشکلاتی در صفحه asp خود بر می خورم برای مثال برای تگ span موجود در صفحه asp خود با استفاده از css نمی توانم width در نظر بگیرم و یا ارتفاع تگ div را به صورت درصدی نمی توان تعیین کرد و.....
ولی با حذف کد بالا از قسمت html صفحه asp خود این مشکلات رفع می شود ولی منوی آبشاری دیگر درست عمل نمی کند. با تشکر از شما برای حل این مشکل چه راه حلی پیشنهاد می کنید.
پاسخ: 
سلام
استفاده از DOCTYPE در صفحات html یا xhtml توصیه کنسرسیوم جهانی وب (w3c) است و از لحاظ استاندارد حذف آن توصیه نمی شود، از طرفی این احتمال وجود دارد که در جایی از کدهای خود مخصوصا در قسمت هدر موردی را به درستی تعریف نکرده باشید، مخصوصا وقتی از xhtml استفاده می کنید، دقت کنید که بعد از DOCTYPE خواص یا attribute زبان xhtml را هم اضافه کنید، یعنی کدهای شما باید به فرض به صورت نمونه زیر باشد:
<!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" lang="fa-IR" xml:lang="fa-IR">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
محتوا
</body>
</html>
برای مطالعه بیشتر به این مطلب رجوع کنید:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نویسنده: لاله
زمان: ۱۲:۵۶:۵۹ - تاریخ: ۱۳۹۱/۰۸/۰۱
دروووووووود
برای سازگاری این منو با IE6 مانند IE7 هم راهی وجود دارد؟
اگر هست لطف کنید و کد آن را بنویسید.
تشکر
پاسخ: 
سلام
متاسفانه مرورگر IE6 بیش از حد غیر استاندارد است و برای سازگار کردن خاصیت های css به ناچار باید از جاوا اسکریپت (یا منوهای جی کئوری) استفاده کرد که به زحمت آن نمی ارزد! البته استفاده از IE6 به طور چمگیری کاهش پیدا کرده و خیلی از سایت ها دیگر حتی آن را پشتیبانی هم نمی کنند.
paged صفحه 1 از 8




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...