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

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

ساخت منوی آبشاری (عمودی) با تگ ul li و CSS

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر CSS و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در HTML برای کدنویسی منوها و اهمیت آنها برای موتورهای جستجو و افزایش قابلیت های کاربری (Accessibility) و SEO صفحات وب اشاره کردیم، این بار و در ادامه آموزش ها می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا منوی عمودی (Vertical) با تگ ul li با استفاده صرف از خاصیت های زبان استایل نویسی CSS آشنا شویم، از نقاط مثبت این منو سازگاری با زبان فارسی (چینش متن از سمت راست به چپ) و نمایش یکسان در مرورگرهای مختلف در عین سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگرهای قدیمی از جمله اینترنت اکسپلورر نسخه 6 (منسوخ شده) قابل استفاده نیست.

ایجاد چارچوب اولیه با کدنویسی HTML و تگ ul li

قبل از هر چیز طبق روال باید چارچوب اولیه منوها را با استفاده از تگ های ساخت لیست در HTML یعنی دو تگ ul و li کدنویسی کنیم، در رابطه با این دو تگ و نحوه ایجاد آیتم ها به شکل لیست به صورت مفصل در آموزش های مقدماتی CSS گفته ایم که جهت یادآوری در آدرس زیر در دسترس است:
نحوه تنظیم لیست با تگ ul li در CSS
کدنویسی HTML چارچوب اولیه منو با استفاده از تگ های ul و li:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- Webgoo.ir -->
</head>
<body>
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="https://webgoo.ir">خانه &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
   </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خدمات &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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="#">منوی زیر مجموعه - 1</a></li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li><a href="#">درباه</a></li>
<li><a href="#">تماس</a></li>
</ul>
</div>
<hr>
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.
</body>
</html>

توضیح:
- اگر کد بالا را در فایل متنی برنامه Notepad درج و با پسوند html (یونیکد UTF-8) ذخیره و اجراء کنیم خواهیم دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه از قابلیت لیست های آشیانه ای (Nested) یا تو در تو استفاده کرده ایم، نحوه چینش دقیق ساختار تگ های ul و li به این صورت یکی از قسمت های اصلی ساخت لیست منوها است، به صورت خلاصه و ساده ساختار منوی بالا به شکل زیر است:

<ul>
<li>منو سطح بالا
  <ul>
    <li>منو سطح یک
      <ul>
        <li>منو سطح دو</li>
      </ul>
    </li>
   </ul>
</li>
</ul>

با درک صحیح این ساختار به ظاهر پیچیده می توانیم هر تعداد منوهای تو در تو که نیاز داشتیم ایجاد کنیم.

سفارشی سازی ظاهر منو و ایجاد قابلیت تعاملی با استایل CSS

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

<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#vertical-nav {
    width: 150px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    /*float: right;*/
    direction: rtl;
    text-align: center;
    z-index: 1000;
}
#vertical-nav ul {
    margin: 0px;
    padding: 0px;
    *border-top: 1px #333 solid;/*IE 7*/
}
ul.vertical-top-level {
    background-color: #333;
}
#vertical-nav li {
    list-style: none;
}
ul.vertical-top-level li {
    border-bottom: #fff solid 1px;
}
#vertical-nav a {
    color: #fff;
    display: block;    
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    width: 100%;    
}
#vertical-nav a:hover{
    _background-color: #39C;/*IE 6*/
    _display: block;/*IE 6*/     
}
#vertical-nav li:hover {
    background-color: #39C;
    position: relative;
}
ul.vertical-sub-level {
    display: none;
}
li:hover .vertical-sub-level {
    background-color: #666;
    border: #fff solid 1px;
    display: block;
    position: absolute;
    right: 150px;
    top: 0px;
}
ul.vertical-sub-level li {
    border: none;
    float: right;
    width: 150px;
    *background-color: #666;/*IE 7*/    
}
#vertical-nav .vertical-sub-level {
    background-color: #666;
}
#vertical-nav .vertical-sub-level .vertical-sub-level {
    background-color: #666;
}
li:hover .vertical-sub-level .vertical-sub-level {
    display: none;
}
.vertical-sub-level li:hover .vertical-sub-level {
    display: block;
    *left: 0px;/*IE 7*/
}
</style>

توضیح:
- position و display دو خاصیت کلیدی CSS هستند که در عملکرد منو نقش تعیین کننده دارند، تغییر مقادیر پیش فرض این خاصیت ها می تواند در نحوه نمایش صحیح منو تاثیرگذار باشد.
- باید به نحوه تعریف چند سلکتور کلاس به صورت سلسله مراتبی و والد فرزندی توجه داشته باشیم، به فرض تنظیم سلکتور به صورت زیر در کد استایل بالا بر روی عناصر منوی زیر مجموعه سطح دوم تاثیرگذار است:

#vertical-nav .vertical-sub-level .vertical-sub-level

یا به طور مثال اگر به انتهای استایل دقت کنیم این قسمت:

li:hover .vertical-sub-level .vertical-sub-level

در حالتی که ماوس را روی منوی سطح بالا می بریم باعث محو شدن منوی زیرمجموعه سطح دوم می شود.
- قسمت هایی که با یک علامت زیر خط (underline) و ستاره در ابتدای آنها تعریف شده اند، هک CSS مخصوص مرورگر اینترنت اکسپلورر است تا خاصیت های منو در این مرورگر به درستی نمایش داده شوند (علامت _ هک برای اینترنت اکسپلورر نسخه 6 و علامت * هک برای اینترنت اکسپلورر نسخه 7 است).
- به جزء برخی از ویژگی های منو که برای کارکرد صحیح آن ضروری است سایر موارد مربوط به ظاهر و نمایش محتوا قابل سفارشی سازی و تغییر هستند.

سازگاری منو با مرورگرهای قدیمی

یکی از مواردی که در استفاده از این نوع منوها و امکانات تعاملی در وب باید به آن توجه نمود، قابلیت سازگاری با مرورگرهای قدیمی است، اشکال عمده برنامه هایی که تحت عنوان ساخت منوی آماده استفاده می شوند نیز همین مسئله است که اغلب محصول نهایی آنها تنها در مرورگرهای به روز به درستی نشان داده می شود یا اینکه برای کارکرد صحیح به حجم زیادی از فایل های جانبی نیاز است، اما در مورد این منو تلاش زیادی کرده ایم که بدون استفاده از فایل ها و اسکریپت های جانبی جلوه های آن را تقریبا با تمام مرورگرهای جدید و قدیمی سازگار کنیم و در عین سادگی و سبکی قابلیت های کاربردی منو تقریبا در تمام مرورگرها (Firefox, Opera, Internet Explorer +6, Google Chrome و...) یکسان است، منتها در مورد مشکل همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر نسخه منسوخ شده 6 به دلیل پشتیبانی نشدن قابلیت hover برای تگ li، زیر مجموعه های این منو در این نسخه از اینترنت اکسپلورر به درستی نمایش داده نخواهد شد، لذا بهترین گزینه در چنین شرایطی به اصطلاح ایمپورت استایل خاص برای این مرورگر است یا اینکه به بازدیدکنندگان خود که از این مرورگر قدیمی و آسیب پذیر استفاده می کنند پیامی مبنی بر پشتیبانی نشدن امکانات سایت توسط مرورگر آنها نمایش دهیم، به طور مثال با دستور شرطی زیر می توان این کار را انجام داد:

<!--[if IE 6]>
کاربر گرامی مرورگر شما از امکانات این سایت به درستی پشتیبانی نمی کند، لطفا نسخه مرورگر خود را ارتقاء دهید!
<![endif]-->

کد و پیش نمایش آنلاین

کد نهایی منوی آبشاری عمودی با استایل CSS و تگ ul li و همچنین پیش نمایش آنلاین آن را جهت تست و بررسی در ادامه قرار داده ایم که می توانیم برای تست و بررسی بیشتر از آن استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی عمودی با زیر مجموعه</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#vertical-nav {
    width: 150px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    /*float: right;*/
    direction: rtl;
    text-align: center;
    z-index: 1000;
}
#vertical-nav ul {
    margin: 0px;
    padding: 0px;
    *border-top: 1px #333 solid;/*IE 7*/
}
ul.vertical-top-level {
    background-color: #333;
}
#vertical-nav li {
    list-style: none;
}
ul.vertical-top-level li {
    border-bottom: #fff solid 1px;
}
#vertical-nav a {
    color: #fff;
    display: block;    
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    width: 100%;    
}
#vertical-nav a:hover{
    _background-color: #39C;/*IE 6*/
    _display: block;/*IE 6*/     
}
#vertical-nav li:hover {
    background-color: #39C;
    position: relative;
}
ul.vertical-sub-level {
    display: none;
}
li:hover .vertical-sub-level {
    background-color: #666;
    border: #fff solid 1px;
    display: block;
    position: absolute;
    right: 150px;
    top: 0px;
}
ul.vertical-sub-level li {
    border: none;
    float: right;
    width: 150px;
    *background-color: #666;/*IE 7*/    
}
#vertical-nav .vertical-sub-level {
    background-color: #666;
}
#vertical-nav .vertical-sub-level .vertical-sub-level {
    background-color: #666;
}
li:hover .vertical-sub-level .vertical-sub-level {
    display: none;
}
.vertical-sub-level li:hover .vertical-sub-level {
    display: block;
    *left: 0px;/*IE 7*/
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div id="vertical-nav">
<!-- تگ ul سطح بالا -->
<ul class="vertical-top-level">
<!-- منوی سطح بالا -->
<li>
<a href="https://webgoo.ir">خانه &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
   </ul>
</li>
<!-- منوی سطح بالا -->
<li>
<a href="#">خدمات &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1</a></li>
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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>
<!-- منوی سطح بالا -->
<li>
<a href="#">خرید &raquo;</a>
<!-- زیر مجموعه سطح 1 -->
  <ul class="vertical-sub-level">
    <li><a href="#">منوی زیر مجموعه - 1 &raquo;</a>
<!-- زیر مجموعه سطح 2 -->    
      <ul class="vertical-sub-level">
        <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="#">منوی زیر مجموعه - 1</a></li>
  </ul>
</li>
<!-- منوی سطح بالا -->
<li><a href="#">درباه</a></li>
<li><a href="#">تماس</a></li>
</ul>
</div>
<hr>
برای بررسی ویژگی های منو، ماوس را روی یکی از آیتم ها ببرید.
</body>
</html>

پیش نمایش آنلاین
نکته: برای استفاده از این منو در وبلاگ ها و سایت ها باید بخش های اضافه نظیر تگ html، head و body از کد منو حذف شوند که نیازمند آشنایی قبلی با HTML است، همچنین دقت داشته باشیم که خاصیت های منو با موارد دیگری در استایل CSS قالب وبلاگ و سایت تداخل و هم نامی نداشته باشند.

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

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

دیدگاه

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

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

محمود

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

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

هوشمندسازی کامل منو مستلزم کدنویسی زمانبر است اما به عنوان راه حل سریع می توانید خاصیت top استفاده شده در سلکتور li:hover .vertical-sub-level را به عبارت bottom تغییر دهید، به این صورت منوهای بازشونده رو به بالا باز می شوند.

li:hover .vertical-sub-level {
    background-color: #666;
    border: #fff solid 1px;
    display: block;
    position: absolute;
    right: 150px;
    bottom: 0px;
}

امیر مهدی

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

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

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

امیر مهدی

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

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

<style>
#menu {
    width: 100%;
    height: 10%;
    float: right;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /* position: fixed; */
}

a {
    text-decoration: none;
}

#main-menu {
    list-style: none;
    position: relative;
}

#main-menu li {
    float: right;
    background-color: transparent;
    border-radius: 17px;
    transition: all 0.5s;
    position: relative;
    border: 2px solid transparent;
    margin: 0px 10px;
    display: block;
}

#main-menu li a {
    padding: 15px;
    float: right;
    color: #696969;
}

#main-menu > li:hover {
    background-color: #dddddd;
    border-radius: 17px;
    border: 2px solid #39DAED;
}

#main-menu li ul {
    list-style: none;
    float: right;
    top: 48px;
    width: 100%;
    margin-top: 50px;
    position: absolute;
    background-color: rgb(255, 255, 255);
    border: 2px solid #39DAED;
    border-top: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    left: -24px;
    opacity: 0;
    transition: all 0.5s;
    transform: rotateY(180deg);
    visibility: hidden;
}

#main-menu li ul li {
    float: none;
    /* height: 30%; */
    margin-top: 3%;
    /* width: 100%; */
    left:-14px;
    display: block;
	text-align: center;
}

#main-menu li ul li:hover {
    background-color: #dddddd;
}

#main-menu li ul li a {
    float: none;
    display: block;
}
/* #main-menu li ul li a {
    float: none;
    
    text-align: left;
    margin-top: 10px;
} */

#main-menu > li:hover ul {
    visibility: visible;
    opacity: 1;
    transform: rotateY(0deg);
    margin-top: 0px;
}
</style>

کدهای html من

<div id="menu">
       <nav>
           <ul id="main-menu">
               <li><a href="#">آموزش طراحی سایت فروشگاهی</a></li>
               <li><a href="#">آموزش طراحی سایت</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </li>
               <li><a href="#">آموزش های رایگان</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </li>
                <li><a href="#">فروشگاه</a></li>
               <li><a href="#">ارتباط با ما</a></li>
           </ul>
       </nav>
   </div>

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

دقیقا متوجه منظورتان از "منو من مقداری فضا از سمت چپ رو تشخیص نمی ده" نشدیم اما به صورت کلی با کم و زیاد کردن مقادیر خاصیت هایی مانند left و right در عناصر منو می توانیم فاصله های را تنظیم کنیم، همچنین با در نظر گرفتن ویژگی text-align متن را در وسط یا طرفین چینش کنیم گه این کار در نمونه کد بالا انجام شد (کد بالا ویرایش شد).

سجاد

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

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

شقایق فرهمند

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

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

اگر با CSS آشنا باشید با تغییر مواردی که به جهت ارتباط دارند (مانند direction از rtl به ltr یا float از right به left) می توانید منو را به اصطلاح چپ چین یا راست چین کنید.

milad

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

سلام استاد
/*IE 7*/ این دستوراتی که تو آخر بعضی از تگ ها استفاده کردید چیه؟

لطفا عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر" را در وب جستجو کنید، در مطلب جداگانه ای در این خصوص صحبت شده!

APN

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

سلام ممنون از مطلب مفیدتون

علی

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

چطور میتونم برای وردپرس از این منو استفاده کنم
اموزشی برای این کار هست؟؟

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

علی

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

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

برای این موارد باید با CSS آشنایی کافی داشته باشید!

samaft

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

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

متاسفانه طراحی و کدنویسی قابلیتی مانند منو کار بسیار زمانبری است، لذا باید خودتان بخش اصلی کار را در فرصت مناسب کدنویسی کرده باشید، البته نمونه های آماده در وب وجود دارد که باید جستجو نمائید!

محسن

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

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

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

Farnaz

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

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

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

hamid

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

فقط میگم دمت گرم. چون کارمو راه انداختی.

طاهر

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

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

برای این کار باید CSS بلد باشید، هیچ کد یا راه حل خاصی جزء تسلط بر CSS وجود ندارد!

حسین

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

وقتی موس رو قرار میدیم آبشار به سمت چپ باز میشه من بخوام به سمت راست باز سه چیکار باید بکنم؟

باید عناصر مربوط به جهت در استایل CSS (مانند right، float و...) را از حالت rtl (راست به چپ) به ltr (چپ به راست) تبدیل کنید که قاعدتا نیازمند آشنایی با CSS است!

نخست

قبلی

بعدی

آخر

صفحه 1 از 5

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