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

چهارشنبه ۱۳ خرداد ۱۴۰۵

Wednesday, June 3, 2026 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 - طراحی وب

قبلی »

« بعدی

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

دیدگاه

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

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

معصومه

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

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

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

باران

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

سلام من یک منو که دارای زیر شاخه است ساختم.
position پدر رو relative و فرزند رو absolute و دارم منویی میسازم دقیقا شبیه منو شما چرا وقتی position فرزند رو برمیدارم زیر شاخه ام نوشته هاش افقی میشه position چه ربطی به چینش عمودی یا افقیشون داره یا مثلا وقتی position پدر و فرزند رو جا به جا می کنم تمام شاخه ها روی هم میافته خواهش می کنم توضیح بدید علت استفاده از position در اینجا چیست؟

هر چند بدون بررسی سورس کدها کار کمی سخت می شود، اما در پاسخ به سوالتان:
وقتی یک عنصر والد خاصیت position با مقدار relative می گیرد، سایر عناصر زیر مجموعه تابعی از عنصر والد می شوند، به فرض اگر یک بلاک div در حالت عادی از تگ body پیروی می کند در این حالت از بلاک والد خود پیروی خواهد کرد (به فرض در محل نمایش، پردازش خاصیت ها و...) که مشخصا این در طراحی منو کاربرد اولیه و اساسی دارد، خاصیت position با مقدار absolute نیز باعث شناور شدن عنصر زیرمجموعه (نسبت به بلاک والد) می شود.
سایر موارد نیاز به بررسی کدها دارند.

esi

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

ممنون

amitisjoon

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

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

تنظیم و سازگار کردن منو با کدهای موجود در قالب نیاز به آشنایی با HTML و تسلط بر CSS دارد، در غیر این صورت با مشکل مواجه خواهید شد.

حسن

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

اولا ممنون از زحماتتون
من یه مشکلی دارم وقتی کدهای مربوط به doctype رو نمیذارم کدهای کشویی عمل نمی کنن. وقتی هم میذارم عمل میکنن ولی چیدمان صفحه بهم میریزه.

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

....

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

ممنوووووووووووون ، خیلی خوب بود

sama

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

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

قسمت زیر را در استایل CSS منو

#main-menu a:hover{
    background-color:#060;        
}

به این صورت ویرایش کنید:

#main-menu li:hover > a{
    background-color:#060;        
}

محسن طحانیان

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

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

برای گرد کردن گوشه های عناصر HTML می توانید از خاصیت radius در CSS استفاده کنید، یک کلاس فرضی:

.your-class {
    border:1px solid #CCC;
    border-radius:4px;
    -webkit-border-radius:4px;
}

محمد

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

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

float: right;

رو به

#main-menu li ul a

اصافه کردم، این رو برای آی دی های دیگه هم امتحان کردم ولی طوری که می خواستم نشد! ممنون میشم راهنماییم کنین

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

#main-menu li ul{
	width:664px;
}

البته قاعدتا این منو برای این حالت ساخته نشده و لذا ممکن است ایراداتی در این مورد داشته باشد که باید رفع کنید.

مرتضی

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

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

به دو روش می توانید به تگ input و... استایل دهید، استفاده از عنوان مستقیم آن در CSS یا استفاده از کلاس (یا آی دی)، مثال:

<style>
input{
	width:500px;
}
.my-class{
	height:100px;
}
</style>
<input class="my-class" type="text" name="test">

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

hosein-shah

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

سلام مدیر سایت
خشته نباشید
چرا منو که برای اموزش قرار دادید در mozilla firefox کار نمی کند ؟
با تشکر

منو در تمام مرورگرهای استاندارد و مخصوصا در فایرفاکس به خوبی عمل می کند، ممکن است امکانی در مرورگر شما غیر فعال باشد یا اینکه منو را در کنار کدهای دیگری قرار داده باشید که با هم سازگار نباشند! برای اطمینان پیش نمایش آنلاین آن را در فایرفاکس امتحان نمائید.

مهدی

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

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

http://www.asus.com

همیشه منوی login بالای تصویر ثابته
میخواستم بدونم ایده پیاده سازیش چیه

طراحی جلوه های ویژه خاص در وب نیازمند تسلط و تجربه بالا در CSS و تا حدودی JavaScript است، سایت مذکور و سایر موارد مشابه نیز از همین روش ها استفاده می کنند، به طور مثال پایه کار منوی ثابتی که مد نظر شما است احتمالا با خاصیت position با مقادیر fixed طراحی شده، البته مسلما برای تکمیل آن نیاز به نوشتن کدها و در نظر گرفتن حالت های مختلف است که شرح آنها در این قسمت نمی گنجد.

hamed18041391

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

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

hamed18041391

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

سلام مجدد
خیلی ممنون هم بخاطر سرعت در پاسخگوئی هم بخاطر اینکه انتشار علم می کنید و بامرام هستید!
دارم تمرینی یه cms می نویسم برای ویرایش مطالب توسط مدیر انگار از FCKEditor استفاده میشه! اگه میشه یه کوچولو بگین چیه که خودم پیشو بگیرم
اگرم ممکنه cms سایت خودتونم بگید
با تشکر

برای نوشتن یک CMS باید ابتدا تسلط نسبی بر زبان های PHP و تا حدودی JavaScript داشته باشید، چون نکات خیلی زیادی باید رعایت شوند، به هر صورت در مورد سوال، FCKEditor یا CKEditor یک WYSIWYG (مخفف What You See Is What You Get) رایگان تحت وب است که مبتنی بر فریم ورک جی کئوری نوشته شده، این ادیتور محیطی را برای درج محتوا در وب فراهم می کند که در نهایت قابل ارسال به سرور از طریق متدهای متداول POST و GET هستند.
یک نمونه خوب دیگر در این زمینه که مبتنی بر صرف جاوا اسکریپت است، TinyMCE نام دارد که در کنار CKEditor جزء پر استفاده ترین ادیتورهای رایگان در وب هستند.
در مجموع به جهت پیچیده گی و زحمت خیلی زیاد نوشتن چنین ادیتورهایی این نمونه های آماده می توانند خیلی کاربردی باشند، اما برای کارهای حرفه ای می توان ادیتورهای شخصی نیز طراحی کرد که البته نیاز به دانش و تجربه خیلی بالا در جاوا اسکریپت است.

hamed18041391

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

سلام
ممنون از پاسخی که دادین
تسلط من روی مباحث html و css و php نسبی هست در واقع در حال یادگیری هستم
این موضوع که نتونستم منو رو وسط ببرم عصبیم کرده!! آخه خیلی وقت روش گذاشتم...
من قسمتی از کد رو میذارم لطفا بررسی کنید و مشکل رو برام پیدا کنید
پیشاپیش یک دنیا سپاس

کد حذف شد

منظور از قرار گرفتن در وسط، تنظیم بلاک main-menu بود که این کار با روش های گفته شده انجام می شود، اما هنگامی که بخواهید عناصر درون بلاکی را تنظیم کنید نیاز به استفاده از بلاک های تو در توی بیشتر و خاصیت های متفاوت تری است، برای رفع مشکل شما، ابتدا کلاس زیر را به استایل اضافه کنید:

.center{
	padding-right:48px;
	width:950px;
	text-align:center;
}

سپس در زیر خط زیر:

<div id="main-menu" >

این کد را اضافه کنید:

<div class="center">

در نهایت به انتهای کدها رفته و پس از خط زیر:

</div>

به همین روش بلاک را ببندید (یعنی یک

</div>

دیگر اضافه کنید).

صفحه 6 از 9

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