آموزش برنامه نویسی وب و مهارتهای مرتبط

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

Saturday, September 13, 2025 GMT +3:30

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

از کدها و استایل 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 - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
حذف اسکرول افقی (Horizontal Scroll) با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
مخفی کردن عناصر وب با CSS

دیدگاه

۱۲۸ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

ترنم

۱۱:۰۶ ۱۳۹۹/۰۴/۱۱

سلام وقتتون بخیر
ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو نمیاره باید چیکار کنم
ممنون میشم اگر به سوالم پاسخ بدین

لطفا کدهای منو را با نمونه منویی که در آموزش به همراه پیش نمایش آنلاین درج شده تطبیق داده و خطایابی کنید، اگر راه حل مشکل را پیدا نکردید می توانید فایل منو را در سایتتان آپلود و آدرس URL را ارسال یا فایل را به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی شود.

عارف

۱۰:۱۲ ۱۳۹۸/۰۷/۰۷

چرا وقتی زیر منو رو باز میکنم تگ زیر منو محو نمیشه تا منو نمایش داده شه؟ منظورم اینه منو وقتی باز میشه یه بنر که تو سایت گذاشتم داخل منو هم میمونه و محو نمیشه تا منو نمایش داده شه وقتی position:relative بنر (عکس داخل سایت) بر می دارم درست میشه اما نمیتونم چون تگ های زیریش بهش وابسته است باید اون بنر این پوزیشنو بگیره الان من یرای این که منو کامل نمایش داده شه چیکار باید کنم؟

ارائه پاسخ دقیق نیاز به دیدن و بررسی سورس کدهای سایت دارد اما ظاهرا بلاک تبلیغات با بلاک منو همپوشانی دارند، معمولا در اینگونه مشکلات استفاده از خاصیت z-index برای هر دو بلاک با مقدار کمتر و بیشتر کارساز است.

.div-top{
z-index: 1000;
}
.div-bottom{
z-index: 999;
}

هر چه عدد z-index بزرگتر باشد در حالت همپوشانی در لایه بالاتر نمایش داده می شود.

صادق

۱۱:۱۸ ۱۳۹۷/۱۱/۲۱

سلام
ببخشید من وقتی از این کدها استفاده میکنم نوارها از هم جدا میشند البته اونجایی که میخوام قرار بگیره ولی جایی دیگه که نمیخوام نوار قرار بگیره به هم چسبیده و خوب میشه
ممنون

دو مقدار زیر را در استایل CSS منو مطابق با تنظیمات دلخواه خود کم یا زیاد کنید:

top:10px;
right:125px;

مقدار top فاصله از بالا و right فاصله از سمت راست عنصر والد را به پیکسل مشخص می کند.

نجفی

۰۰:۰۰ ۱۳۹۷/۱۰/۳۰

سلام وقت شما بخیر آیا برای وبلاگ بیان قابل استفاده است ؟
اگر هست موضوعات و زیر موضوعات را چطور لینک گذاری که به مقصد دلخواه هدایت شود

در صورت آشنایی با HTML و CSS محدودیتی وجود ندارد، برای آشنایی با نحوه تنظیم لینک ها لطفا به آموزش های مقدماتی HTML مبحث تگ a مراجعه نمائید.

بهناز

۱۲:۰۰ ۱۳۹۷/۰۵/۳۰

سلام
میشه در یک مورد بنده رو راهنمایی کنید:
یک منوی کشویی تصور کنید که در حالت موبایل وقتی روی یک آیتم بزنیم زیر منو باز میشه ، حالا من می خوام با زدن مجدد روی همون منو زیر منو بسته بشه. این کار رو هم فقط با css صرف می خوام انجام بدم، آیا امکانش هست؟ و اگر هست چطور؟
یک نکته بگم که وقتی برم روی آیتم بعدی، زیر منوی های آیتم قبلی بسته میشن، اما من میخوام اینکار رو با کلیک روی هر آیتم هم انجام بدم.

ساخت منو با صرف CSS امکانپذیر است، لطفا نمونه های موجود در آدرس زیر را بررسی نمائید:

https://bashooka.com/coding/pure-css-css3-drop-down-menus/

HANI

۱۲:۳۴ ۱۳۹۶/۱۰/۰۶

سلام
ببخشید این منو واسه جداول کارایی داره؟
اخه شما واسه لایه ها نوشتین

بله تفاوتی وجود ندارد چون منو در حالت شناور قرار می گیرد.

فرزاد

۱۰:۵۰ ۱۳۹۶/۰۹/۱۹

خیلی ساده و جذاب بود
مرسی

علی

۱۹:۲۵ ۱۳۹۶/۰۶/۰۳

سلام
ممنون از مطلب مفیدترین
من یه سوال در مورد همین منو دارم، اونم اینه که میخوام تو منوی کشویی تعداد پستهایی که درمورد یکی از گزینه های منو هست رو بنویسم، مثلا بخش ورزشی (20) و زیر مجموعه اون فوتبال (10) و...
میشه راهنمایی کنید چجوری انجامش بدم ممنون

اگر منظور درج داینامیکی تعداد پست ها باشد، بستگی به سیستم مدیریت محتوایی دارد که از آن استفاده می کنید، به طور مثال اگر در محیط قالب وبلاگ باشد باید ببینید سرویس دهنده وبلاگ چه کدی را برای این منظور معرفی کرده است، یا اگر از CMS های رایگان مانند وردپرس استفاده می کنید، باید کد نمایش تعداد پست ها را با منو ترکیب کنید.

امیرهادی

۱۳:۳۴ ۱۳۹۶/۰۴/۱۳

سلام
میخواستم از drop down list استفاده کنم که اطلاعات رو به صورت ajax از دیتابیس بگیره که با css , php درستش کردم. ولی مشتری ظاهرش رو سفارشی تر میخواست. مثلا داخل ایتم ها قابلیت سرچ باشه و ظاهرش هم متفاوت باشه.
مثل سایت

https://bimito.com

با پلاگین های جی کوئری موفق شدم ظاهرش رو سفارشی کنم ولی متاسفانه drop down ها روی همدیگه تاثیر نمیزارن که انتخاب اولی باعث تغییر دومی بشه.
الان شدنی هست با li ul یک drop down سفارشی رو از پایه طراحی کنم؟ مشابه سایتی که لینکش رو نوشتم.

برای طراحی منو با این سطح از سفارشی سازی قبل از هر چیز الزاما باید جاوا اسکریپت (و به تبع jQuery) بلد باشید، در اینصورت قاعدتا طراحی اینگونه موارد از پایه شدنی است و موارد زیادی در وب جهت مثال وجود دارد، اما اگر خیلی با این موارد آشنا نیستید یا زمان کافی در اختیار ندارید، بهتر است از نمونه های آماده الگوبرداری کنید چون کدنویسی منو معمولا کمی پیچیدگی دارد.

حامد پورجلوه

۱۷:۲۷ ۱۳۹۵/۱۰/۰۵

سلام خیلی ممنون از راهنماییتون واقعا مفید بود ممنون، استاد عزیز فقط من به یه مشکلی برخوردم منو رو که ساختم چجوری میشه ازش استفاده کرد، یعنی مثلا رو تماس با ما که کلیک کردیم به صفحه ی دیگه انتقال پیدا کنه، چجوری میتونم این کار رو انجام بدم راهنمایی کنین ممنون میشم

اگر با نحوه ایجاد لینک (تگ a در HTML) آشنا باشید، به راحتی می توانید هر منو را به یک آدرس در سایت خود لینک نمائید!

۱۸:۴۳ ۱۳۹۵/۰۶/۰۱

سلام. ببخشید تازه شروع به طراحی سایت کردم میشه لطف کنید راهنماییم کنین کدها را کجا بنویسم

سوال مبهم است! اگر با کدنویسی و طراحی سایت آشنا باشید، کد آماده و گویا است و می توانید با کمی تغییر، در هر کجا که به آن نیاز بود استفاده نمائید!

ناصر

۱۴:۵۴ ۱۳۹۵/۰۵/۲۴

سلام من نیاز دارم که یک منو اطلاعات تماس - شماره همراه تلفن دفتر رو به صورت کشویی کنار صفحه سایت ایجاد کنم که وقتی سایت رو در موبایل مشاهده میکنیم بتونیم با تیک زدن روی منو شماره تماس ها نمایش داده بشه
میشه منو راهنمایی کنید

اگر وقت یا آشنایی کافی با کدنویسی ندارید، باید به دنبال کدهای آماده باشید، لطفا نمونه منوهای موجود در لینک زیر را بررسی کنید:

http://www.jqueryrain.com/demo/jquery-side-panel-menu

در هر حال برای سفارشی سازی منوها نیاز به حداقل آشنایی با HTML و CSS است!

omid

۱۳:۱۲ ۱۳۹۵/۰۵/۱۹

سلام . ببخشید من قالبی رو دارم که راست چین کردم اما منو های بعد از راست چین کردن بهم ریخت به صورت زیر
صفحه اصلی / ویژگی ها / اموزش / شرایط / ارتباط با ما
بعد از راست چین کردن :
/ صفحه اصلی / ویژگی ها / اموزش / شرایط ارتباط با ما
لطفا کمکم کنید تا مشکل رو حل کنیم

معمولا چند خاصیت در خصوص نمایش ابزارهای وب از راست به چپ یا از چپ به راست نقش تعیین کننده دارند که باید آنها را متناسب با کدهای CSS موجود تنظیم نمائید، از جمله direction یا margin ها و... در کل خاصیت هایی که مقادیر آنها با مقدار left یا right است باید در تغییر چینش صفحه لحاظ شود (یعنی اگر قبلا right بوده اند، با تغییر چینش باید تبدیل به left شوند!).

حمید

۱۵:۵۸ ۱۳۹۵/۰۵/۱۸

سلام ، چطوری میشه جهت منوی کشویی که به سمت چپ باز میشود رو تغییر داد تا به سمت راست باز شود ؟ قالبی که دارم انگلیسی هستش و میخام جهت منوهای کشویی رو تغییر بدم . سپاس از شما

باید چند مورد را در کد CSS منو تغییر دهید:
- تمام rtl ها تبدیل به ltr.
- تمام left ها تبدیل به right.
- تمام margin-right ها تبدیل به margin-left.

مهدی

۰۰:۱۳ ۱۳۹۵/۰۴/۳۱

با سلام منوهایی که ساخته ام برروی سیستمم به درستی کار می کنند ولی بر روی وب سایت که قرار می دهم جابجا باز می شوند.

باید با CSS آشنا باشید، در صورت وجود سلکتورهای CSS مشابه در یک صفحه، بروز اختلال در نمایش منو محتمل خواهد بود باید این سلکتورهای مشابه را در صفحه پیدا و موارد مشابه را حذف کنید یا برای منو کلاس های اختصاصی داشته باشید.

نخست

قبلی

بعدی

آخر

صفحه 1 از 9

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.