آگهی
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 یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: ریحانه
زمان: ۰۰:۰۸:۱۰ - تاریخ: ۱۳۹۱/۱۲/۰۸
سلام،ممنون بابت کدهایی که گذاشتین
یه سوال دارم اگه جواب بدین ممنون میشم
چرا هر کار می کنم این منو وسط صفحه قرار نمی گیره؟؟؟ چه دستوری باید اضافه یا کم بشه؟؟
پاسخ: 
سلام
این پرسش قبلا مطرح شده، برای تنظیم منو باید از css استفاده کنید، به طور مثال منو را در یک بلاک div با استایل زیر قرار دهید:
<div style="margin-left:auto; margin-right:auto;">
کد منو را اینجا قرار دهید
</div>
یا از تگ center در html استفاده کنید:
<center>
کد منو را اینجا قرار دهید
</center>
نویسنده: مهدی
زمان: ۲۲:۱۳:۳۱ - تاریخ: ۱۳۹۱/۱۲/۱۰
سلام ممنون از کد ها و منو های کاربردیتون
من تونستم با کد منوی آبشاری و کشویی شما یه قالب برای خودم بسازم . ممنون
ولی یه سؤال داشتم چه طور میشه تنظیمات این منو را طوری تغییر داد تا با رفتن موس روی یکی از آن ها به جای آنکه به طور عمود به پایین بیاد ، به صورت افقی باز بشه؟
مثل بعضی از سایت ها؟
پاسخ: 
سلام
منوی مد نظر شما در مطلب دیگری آموزش داده شده است، کافی است در قسمت جستجوی سایت، عبارت "آبشاری" را وارد کنید.
نویسنده: m
زمان: ۱۸:۳۲:۰۶ - تاریخ: ۱۳۹۱/۱۲/۲۱
واقعا ممنونم، لطفا این نمونه مثال ها رو بیشتر کنید
نویسنده: الهام
زمان: ۲۱:۳۹:۲۴ - تاریخ: ۱۳۹۲/۰۱/۰۷
سلام
من از همین کد منوی کشویی استفاده کردم . سایتی که درست کردم رو با فایر فاکس که مشاهده می کنم منوی کشویی رو نشون میده ولی با IE 9 که نگاه می کنم منوی کشویی رو نشون نمیده.
مشکل کجاست؟
پاسخ: 
سلام
پیش نمایش منو را که لینک آن در آموزش قرار دارد در مرورگر IE 9 تست کنید، اگر مشکل وجود نداشت، پس ایراد از کدهای سایت شما است، به طور مثال استفاده نکرده از DOCTYPE می تواند باعث بروز این نوع مشکلات شود، اما اگر در این صفحه نیز منو ظاهر نشد، متاتگ زیر را در صفحه خود اضافه کنید.
<meta http-equiv="X-UA-Compatible" content="IE=8">
نویسنده: الهام
زمان: ۲۲:۵۹:۳۴ - تاریخ: ۱۳۹۲/۰۱/۰۷
خیلی ممنون
درست شد
نویسنده: شادی
زمان: ۱۶:۵۱:۱۸ - تاریخ: ۱۳۹۲/۰۲/۳۰
سلام
ممنون از منوی خوبتون ..
میخواستم بدونم میتونم از توی کد یکی از منوها رو disable کنم یا نه ؟
مثلاً بعضی از کاربرای سایت دسترسی به یکی از این li هارو ندارن ، چجوری میتونم غیر فعالش کنم از توی کد؟!
پاسخ: 
سلام
باید منو را به صورت داینامیک (از طریق کدهای PHP) خروجی دهید و آن گزینه ای که نیاز به سطح دسترسی است را در یک شرط if بررسی و در صورت صحیح بودن چاپ کنید.
نویسنده: باران
زمان: ۲۳:۲۶:۴۴ - تاریخ: ۱۳۹۲/۰۳/۲۵
سلام ...ممنون از مطلبتون...
یه سوال داشتم! اگر همین منو ها را با زبان asp.net بخوایم بنویسیم طوری که این منو ها را از دیتابیس بخونه و نشون بده ...چطور میشه؟ و آیا میشه تعداد این زیر منو ها متغیر باشه ...یعنی بعدا مدیر سایت میتونه یه زیر منو به اینها اضافه یا یکی کم کنه؟
پاسخ: 
سلام
اگر بر یک زبان سمت سرور (مانند ASP، PHP و...) مسلط باشید، می توانید به راحتی از هر قابلیت استاتیکی خروجی داینامیک تولید کنید، اما اینکه چطور باید آن را انجام داد در کل جواب مشخصی ندارد، بستگی به تسلط و آشنایی شما و ساختار دیتابیس، جداول، ستون ها و... دارد، در مجموع خارج از مباحث برنامه نویسی (فراخوانی اطلاعات از دیتابیس، خروجی در دستورات شرطی، کار با حلقه ها و...) نیست!
نویسنده: hamed18041391
زمان: ۱۸:۰۲:۱۳ - تاریخ: ۱۳۹۲/۰۴/۰۹
سلام
بابت مطالب بسیار خوب سایتتان تشکر میکنم و توفیق روز افزون برای شما بزرگواران آرزومندم
برای وسط بردن این منو سوال دارم و روشی که فرمودین از تگcenter استفاده بشه برای من جواب نداد! حتی دستور css که یکی از نظرات پاسخ گفته بودین
آیا ممکنه از مرورگر باشه یا سیستمم ویروسی باشه؟! آخرین آپدیت فایرفاکس و کروم رو دارم
لطفا اگه روشی دیگه ای هست بفرمائین
بسیار سپاس
پاسخ: 
سلام
خیر این مسئله ارتباطی به سیستم عامل و ویروسی بودن و... ندارد، به احتمال زیاد مشکل از سایر عناصر HTML و کدهای CSS است که در صفحه وجود دارند، حل این مشکل تنها با تسلط نسبی بر CSS و بررسی کدهای صفحه ممکن است.
نویسنده: hamed18041391
زمان: ۱۴:۰۶:۴۵ - تاریخ: ۱۳۹۲/۰۴/۱۰
سلام
ممنون از پاسخی که دادین
تسلط من روی مباحث html و css و php نسبی هست در واقع در حال یادگیری هستم
این موضوع که نتونستم منو رو وسط ببرم عصبیم کرده!! آخه خیلی وقت روش گذاشتم...
من قسمتی از کد رو میذارم لطفا بررسی کنید و مشکل رو برام پیدا کنید
پیشاپیش یک دنیا سپاس
کد حذف شد
پاسخ: 
سلام
منظور از قرار گرفتن در وسط، تنظیم بلاک main-menu بود که این کار با روش های گفته شده انجام می شود، اما هنگامی که بخواهید عناصر درون بلاکی را تنظیم کنید نیاز به استفاده از بلاک های تو در توی بیشتر و خاصیت های متفاوت تری است، برای رفع مشکل شما، ابتدا کلاس زیر را به استایل اضافه کنید:
.center{
padding-right:48px;
width:950px;
text-align:center;
}
سپس در زیر خط زیر:
<div id="main-menu" >
این کد را اضافه کنید:
<div class="center">
در نهایت به انتهای کدها رفته و پس از خط زیر:
</div>
به همین روش بلاک را ببندید (یعنی یک
</div>
دیگر اضافه کنید).
نویسنده: hamed18041391
زمان: ۱۷:۵۵:۰۷ - تاریخ: ۱۳۹۲/۰۴/۱۰
سلام مجدد
خیلی ممنون هم بخاطر سرعت در پاسخگوئی هم بخاطر اینکه انتشار علم می کنید و بامرام هستید!
دارم تمرینی یه cms می نویسم برای ویرایش مطالب توسط مدیر انگار از FCKEditor استفاده میشه! اگه میشه یه کوچولو بگین چیه که خودم پیشو بگیرم
اگرم ممکنه cms سایت خودتونم بگید
با تشکر
پاسخ: 
سلام
برای نوشتن یک CMS باید ابتدا تسلط نسبی بر زبان های PHP و تا حدودی JavaScript داشته باشید، چون نکات خیلی زیادی باید رعایت شوند، به هر صورت در مورد سوال، FCKEditor یا CKEditor یک WYSIWYG (مخفف What You See Is What You Get) رایگان تحت وب است که مبتنی بر فریم ورک جی کئوری نوشته شده، این ادیتور محیطی را برای درج محتوا در وب فراهم می کند که در نهایت قابل ارسال به سرور از طریق متدهای متداول post و get هستند.
یک نمونه خوب دیگر در این زمینه که مبتنی بر صرف جاوا اسکریپت است، TinyMCE نام دارد که در کنار CKEditor جزء پر استفاده ترین ادیتورهای رایگان در وب هستند.
در مجموع به جهت پیچیده گی و زحمت خیلی زیاد نوشتن چنین ادیتورهایی، این نمونه های آماده می توانند خیلی کاربردی باشند، اما برای کارهای حرفه ای می توان ادیتورهای شخصی نیز طراحی کرد که البته نیاز به دانش و تجربه خیلی بالا در جاوا اسکریپت است.
نویسنده: hamed18041391
زمان: ۱۷:۲۹:۰۰ - تاریخ: ۱۳۹۲/۰۴/۱۱
بینهایت سپاس خیلی مفید بود و استفاده کردم
موفق و پیروز و سربلند باشید
نویسنده: مهدی
زمان: ۲۳:۴۲:۲۴ - تاریخ: ۱۳۹۲/۰۴/۲۰
آقا یه سوال
تو بعضی سایت ها با پیمایش صفحه سایت منو همیشه بالای صفحه باقی می مونه و از از دید خارج نمیشه . به عنوان مثال سایت ایسوس رو نگاه کن
http://www.asus.com
همیشه منوی login بالای تصویر ثابته
میخواستم بدونم ایده پیاده سازیش چیه
پاسخ: 
سلام
طراحی جلوه های ویژه خاص در وب نیازمند تسلط و تجربه بالا در CSS و تا حدودی JavaScript است، سایت مذکور و سایر موارد مشابه نیز از همین روش ها استفاده می کنند، به طور مثال پایه کار منوی ثابتی که مد نظر شما است احتمالا با خاصیت position با مقادیر fixed طراحی شده، البته مسلما برای تکمیل آن نیاز به نوشتن کدها و در نظر گرفتن حالت های مختلف است که شرح آنها در این قسمت نمی گنجد.
نویسنده: hosein-shah
زمان: ۱۵:۱۶:۳۰ - تاریخ: ۱۳۹۲/۰۵/۰۲
سلام مدیر سایت
خشته نباشید
چرا منو که برای اموزش قرار دادید در mozilla firefox کار نمی کند ؟
با تشکر
پاسخ: 
سلام
منو در تمام مرورگرهای استاندارد و مخصوصا در فایرفاکس به خوبی عمل می کند، ممکن است امکانی در مرورگر شما غیر فعال باشد یا اینکه منو را در کنار کدهای دیگری قرار داده باشید که با هم سازگار نباشند! برای اطمینان پیش نمایش آنلاین آن را در فایرفاکس امتحان نمائید.
نویسنده: مرتضی
زمان: ۱۲:۴۱:۰۵ - تاریخ: ۱۳۹۲/۰۵/۰۷
سلام مرسی از آموزش هاتون عالیه
ببخشید یه سوال من می خوام به تکس باک استایل بدم لطفا آموزش رو بزارین ممنونم باز هم از لطف شما ممنونم
پاسخ: 
سلام
به دو روش می توانید به تگ input و... استایل دهید، استفاده از عنوان مستقیم آن در CSS یا استفاده از کلاس (یا آی دی)، مثال:
<style type="text/css">
input{
width:500px;
}
.my-class{
height:100px;
}
</style>
<input class="my-class" type="text" name="test">
در صورتی که فیلد کلاسی نداشته باشد، از استایل تعریف شده در قسمت input استفاده می کند.
نویسنده: محمد
زمان: ۰۲:۱۰:۵۶ - تاریخ: ۱۳۹۲/۰۵/۱۰
سلام
اولا از زحمات بسیار با ارزشی که می کشید خیلی ممنونم
من می خوام لینک های زیر مجموعه هم به صورت افقی و تو یک سطر ظاهر بشن. برای این کار هم خاصیت
float: right;
رو به
#main-menu li ul a
اصافه کردم، این رو برای آی دی های دیگه هم امتحان کردم ولی طوری که می خواستم نشد! ممنون میشم راهنماییم کنین
پاسخ: 
سلام
با اضافه کردن استایل زیر می توانید منوهای زیرمجموعه را به صورت افقی نمایش دهید:
#main-menu li ul{
width:664px;
}
البته قاعدتا این منو برای این حالت ساخته نشده و لذا ممکن است ایراداتی در این مورد داشته باشد که باید رفع کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




3 × 2
 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
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی