چهارشنبه ۲۶ اردیبهشت ۱۴۰۳

Wednesday, May 15, 2024 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 مطالب بیشتر:
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
مخفی کردن عناصر وب با CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
دیدگاه
more ۱۲۸ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
فریبا
۲۱:۴۳ ۱۳۹۱/۰۴/۱۱
سلام
عالی بود و یک سوال:
اگر بخواهیم مقادیری را که برای تگ های 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 حالت و ویژگی های یکسانی را نسبت داد، Cass و 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 به طور چشمگیری کاهش پیدا کرده و خیلی از سایت ها دیگر حتی آن را پشتیبانی هم نمی کنند.
نخست
قبلی
1
2
3
4
5
بعدی
آخر
paged صفحه 1 از 9
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
9 × 2
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹
پرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸
پــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶
vip
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵
vip
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴
پـــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...
۱۴۰۳/۰۱/۲۰
پـــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹
حسین بلاگ
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...
۱۴۰۳/۰۱/۱۹
شریفی
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...
۱۴۰۳/۰۱/۱۰
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...
۱۴۰۳/۰۱/۰۹
سید صالح
ارسال پارامتر به URL و دریافت مقادیر با PHP
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...
۱۴۰۳/۰۱/۰۷
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...
۱۴۰۳/۰۱/۰۶
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
با سلام و درود سال نو رو بهتون تبریک میگم یه سوال من میخوام لینکهای داخل صفحه sitemap.xml سایتها رو دربیارم کدش رو هم...
۱۴۰۳/۰۱/۰۲
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2024 Webgoo.ir - All Rights Reserved.