آگهی
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
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
commentنظرات (۱۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محسن طحانیان
زمان: ۱۶:۴۶:۴۵ - تاریخ: ۱۳۹۲/۰۵/۱۹
سلام خسته نباشید
واقعا ازتون ممنونم چون مشکلم رو حل کردید اما یه سوال داشتم می خواستم بدونم با چه کدی میشه گوشه های منو رو گرد کنم
اگه امکان داره منو با نوشتن کدها راهنمایی کنید
بخاطر آموزش های کامل و زحماتی که می کشید ازتون ممنونم
پاسخ: 
سلام
برای گرد گردن عناصر HTML می توانید از خاصیت radios در CSS استفاده کنید، یک کلاس فرضی:
.your-class {
border:1px solid #CCC;
border-radius:4px;
-webkit-border-radius:4px;
}
نویسنده: sama
زمان: ۱۸:۳۶:۳۷ - تاریخ: ۱۳۹۲/۰۵/۲۳
سلام خسته نباشید.
در کد منو پیش نمایش ای که در این صفحه نوشته اید با اضافه کردن چه کدی میتونم وقتی به زیر منوها میرم رنگ والد حفظ شود یعنی با استفاده از رنگ والد مشخص باشه که از کدوم گزینه های منو دارم به زیر منوها میرم و چه مسیری رفتم
همانند کدهای منو ابشاری که در صفحه قبل نوشتید که رنگ والد حفظ می شود فقط با این تفاوت که من منوی کشویی می خواهم.
با سپاس فراوان
پاسخ: 
سلام
قسمت زیر را در استایل CSS منو
#main-menu a:hover{
background-color:#060;
}
به این صورت ویرایش کنید:
#main-menu li:hover > a{
background-color:#060;
}
نویسنده: ....
زمان: ۱۴:۱۹:۵۳ - تاریخ: ۱۳۹۲/۰۶/۱۹
ممنوووووووووووون ، خیلی خوب بود
نویسنده: حسن
زمان: ۱۹:۴۳:۱۴ - تاریخ: ۱۳۹۲/۰۶/۳۱
اولا ممنون از زحماتتون
من یه مشکلی دارم وقتی کدهای مربوط به doctype رو نمیذارم کدهای کشویی عمل نمی کنن. وقتی هم میذارم عمل میکنن ولی چیدمان صفحه بهم میریزه.
پاسخ: 
استفاده از doctype در سند HTML یک استاندارد توصیه شده است، لذا اگر با این وجود ایرادی دیده می شود، باید سعی کنید آن ایراد را رفع کنید که این کار معمولا نیاز به ویرایش خواص CSS دارد.
نویسنده: amitisjoon
زمان: ۲۱:۳۵:۲۴ - تاریخ: ۱۳۹۲/۰۹/۱۰
سلام. یه سئوال... چرا وقتی این منو رو ساختم و در قالب وبلاگم قرار دادم، قالب به هم ریخت؟؟؟چند تا چیزش جا به جا شد؟
وقتی بین تگ آغازی و پایانی head کد رو قرار میدم اینطوی میشه؟ راهی هست تا بتونم درستش کنم؟
پاسخ: 
سلام
تنظیم و سازگار کردن منو با کدهالی موجود در قالب نیاز به آشنایی با HTML و تسلط بر CSS دارد، در غیر این صورت با مشکل مواجه خواهد شد.
نویسنده: esi
زمان: ۰۹:۳۰:۰۸ - تاریخ: ۱۳۹۲/۰۹/۱۷
ممنون
نویسنده: باران
زمان: ۱۵:۴۶:۰۸ - تاریخ: ۱۳۹۲/۱۰/۰۴
سلام من یک منو که دارای زیر شاخه است ساختم.
position پدر رو relative و فرزند رو absolute و دارم منویی میسازم دقیقا شبیه منو شما چرا وقتی position فرزند رو برمیدارم زیر شاخه ام نوشته هاش افقی میشه position چه ربطی به چینش عمودی یا افقیشون داره یا مثلا وقتی position پدر و فرزند رو جا به جا می کنم تمام شاخه ها روی هم میافته خواهش می کنم توضیح بدید علت استفاده از position در اینجا چیست؟
پاسخ: 
سلام
هر چند بدون بررسی سورس کدها، کار کمی سخت می شود، اما در پاسخ به سوالتان:
وقتی یک عنصر والد خاصیت position با مقدار relative می گیرد، سایر عناصر زیر مجموعه، تابعی از عنصر والد می شوند، به فرض اگر یک بلاک div در حالت عادی از تگ body پیروی می کند، در این حالت از بلاک والد خود پیروی خواهد کرد (به فرض در محل نمایش، پردازش خاصیت ها و...) که مشخصا این در طراحی منو کاربرد اولیه و اساسی دارد، خاصیت position با مقدار absolute نیز باعث شناور شدن عنصر زیرمجموعه (نسبت به بلاک والد) می شود.
سایر موارد نیاز به بررسی کدها دارند.
نویسنده: معصومه
زمان: ۲۰:۴۷:۵۹ - تاریخ: ۱۳۹۲/۱۰/۱۲
با عرض سلام و خسته نباشید خدمت شما عزیزان .
من تمام راههایی که برای وسط آوردن منو فرموده بودین انجام دادم .
ولی باز درست نشد . همون سمت راست مونده .
کمکم می کنید ؟؟
پاسخ: 
سلام
لطفا آدرس صفحه مورد نظر یا نمونه کدی از آن را (از طریق ایمیل مندرج در بخش تماس با ما) ارسال کنید تا بررسی گردد.
نویسنده: سحر
زمان: ۰۶:۵۰:۰۴ - تاریخ: ۱۳۹۲/۱۰/۲۰
من منو روی دست کاری کردم ولی هر کاری می کنم که از سمت راست شروع بشه نمیشه لطفا به سایت سربزنید و راهنمایی کنید
پاسخ: 
به نظر مشکل منوی سایتتان بر طرف شده؟
نویسنده: عباس
زمان: ۱۸:۳۹:۳۳ - تاریخ: ۱۳۹۲/۱۰/۲۱
سلام خدا قوت
ببخشید من 3 تا منوی اصلی و فرعی رو میخوام به 10 عدد منو اضافه بشه باید چی کار بکنم؟
پاسخ: 
سلام
برای این کار باید بر CSS و مخصوصا نحوه استفاده از خاصیت position مسلط باشید، در این صورت با الگو گرفتن از منوی فعلی می توانید به هر تعداد که بخواهید آن را توسعه دهید.
نویسنده: علی
زمان: ۲۳:۴۸:۲۶ - تاریخ: ۱۳۹۲/۱۱/۲۸
با تشکر فراوان از نویسنده آموزش طراحی منو کشویی
آموزش بسیار عالی بود و کار ما رو راه انداخت ..
جا داره به خاطر قرار دادن این آموزش مفید از شما تشکر کنم .
پاینده باشید ...
نویسنده: mohamareza
زمان: ۰۰:۵۵:۵۷ - تاریخ: ۱۳۹۲/۱۲/۰۱
تشکر تشکر تشکر
به خاطر پیش زمینه ای که برای من و امسال من در مورد زیر منوها ایجاد کردید
نویسنده: فروغ
زمان: ۰۰:۲۴:۴۰ - تاریخ: ۱۳۹۲/۱۲/۰۵
سلام. من با نرم افزار dhtmlmenu یک منو برای سایتم ساختم که مثل منوی توضیح داده شده توسط شما هر قسمت دارای پهنای خاص خودشه اندازه ها بر اساس پیکسل هستش ولی یه مشکل وجود داره اینکه فقط در لپ تاپ من این منو سایزش متناسبه و پایین صفحه ی وبم اسکرول نمی اندازه توی سیستم دیگه ای سایتم رو اجرا می کنم انقدر طول منو ام زیاده که اسکرول عمودی بزرگی ایجاد میشه اگه میشه راهنماییم کنید که منوام داخل همه سیستم ها یک سایز باشه.
پاسخ: 
سلام
امکان تست منو به دلیل اینکه فایل js آن را ارسال نکرده اید وجود ندارد، در صورت تمایل تمام فایل های منو را در یک فایل zip و به آدرس ایمیل ما (در بخش تماس وجود دارد) ارسال کنید تا بررسی گردد.
نویسنده: فروغ
زمان: ۲۲:۲۷:۳۴ - تاریخ: ۱۳۹۲/۱۲/۰۵
وای دستتون درد نکنه حتما این کار رو می کنم
نویسنده: محمد
زمان: ۱۵:۱۰:۰۵ - تاریخ: ۱۳۹۲/۱۲/۲۳
سلام
تشکر ویژه می کنم عالی بود
فقط اگه ممکنه یه توضیح کوچیک برای اجرا این دستورات جهت منوی جوملا هم بفرمائید
باز هم ممنونم
پاسخ: 
سلام
اگر منظورتان استفاده از منو به صورت ماژول است، باید به انجمن های مربوطه مراجعه کنید، در غیر این صورت در کدهای PHP و HTML قالب می توانید به صورت مستقیم از منو استفاده کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




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