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

Saturday, April 1, 2023 GMT +3:30

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

css-vertical-menu

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر 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 - طراحی وب
قبلی »
« بعدی
related مطالب بیشتر:
چسبیدن فوتر قالب به پائین صفحه با CSS
ساخت بلاک شناور عمودی با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
حذف اسکرول افقی (Horizontal Scroll) با CSS
مخفی کردن عناصر وب با CSS
دیدگاه
more ۶۸ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
علی
۱۴:۵۲ ۱۳۹۵/۰۷/۱۲
چطور میتونم برای وردپرس از این منو استفاده کنم
اموزشی برای این کار هست؟؟
تفاوت خاصی وجود ندارد، البته باید با نحوه ویرایش قالب های وردپرس آشنا باشید که یک مبحث جداگانه است!
APN
۲۰:۱۹ ۱۳۹۵/۰۷/۲۶
سلام ممنون از مطلب مفیدتون
milad
۱۳:۳۷ ۱۳۹۵/۰۸/۳۰
سلام استاد
/*IE 7*/ این دستوراتی که تو آخر بعضی از تگ ها استفاده کردید چیه؟
لطفا عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر" را در وب جستجو کنید، در مطلب جداگانه ای در این خصوص صحبت شده!
شقایق فرهمند
۱۶:۰۹ ۱۳۹۶/۰۸/۰۴
سلام.
منوی خوبی است ولی فقط برای ستون های راست قالب کاربرد داره من میخوام سمت چپ قالبم باشه باید چه تغییری بدم که سمت چب باشه و منوها سمت راستش باز بشن؟ دقیقا برعکس منویی که گذاشتین.
اگر با CSS آشنا باشید با تغییر مواردی که به جهت ارتباط دارند (مانند direction از rtl به ltr یا float از right به left) می توانید منو را به اصطلاح چپ چین یا راست چین کنید.
سجاد
۱۸:۵۸ ۱۳۹۷/۰۳/۱۵
سلام
آقا دمت گرم کل نتو زیر و رو کردم حتی سعی کردم کد سایت های دیگه رو بردارم ولی نمیشد بهم میریخت ولی این یکی کار کرد واقعا خسته نباشی دمت گرم اجرت با حضرت زهرا
امیر مهدی
۱۹:۲۴ ۱۳۹۹/۰۲/۲۸
سلام. من در طراحی منو سایت با مشکل برخوردم. من منو خودم رو ساختم و متوجه شدم که منو من مقداری فضا از سمت چپ رو تشخیص نمی ده.
کدهای 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 متن را در وسط یا طرفین چینش کنیم گه این کار در نمونه کد بالا انجام شد (کد بالا ویرایش شد).
امیر مهدی
۲۲:۳۰ ۱۳۹۹/۰۲/۲۸
سلام ممنونم از اینکه کمکم کردید ولی من منو رو با زیر منوها می خواستم کد شما زیر منوها رو از بین برد. منظور من از این حرف این بود که وقتی هاور می کنم بجای اینکه کل لیست ایتم (li) رو بک گراندش رو تغییر بده نصفش رو هنگام هاور تغییر میده.
کاشکی می تونستم برای شما عکش رو بفرستم تا ببینید که چی می گم.
اگه جواب بدید ممنون میشم
اگه جواب رو به ایمیلم بفرسیتد که خیلی ممنون میشم
اگر به صورت مستقل منو را در یک صفحه HTML تست کنید می بینید که مشکلی ندارد! تغییرات خیلی مختصر بودند و پس از تست مشکلی در نمایش زیرمنوها دیده نشد؟
برای ارسال اسکرین شات می توانید تصویر را در یک سایت آپلود و آدرس URL آن را درج کنید یا از طریق ایمیل ما (موجود در بخش تماس) فایل را ارسال نمائید.
محمود
۰۹:۰۵ ۱۴۰۱/۱۱/۱۷
سلام
لطفن کاری کنید که وقتی منو در پایین صفحه قرار می گیرد منوی آبشاری به طرف بالا باز شود .
با تشکر از استاد بزرگوار.
هوشمندسازی کامل منو مستلزم کدنویسی زمانبر است اما به عنوان راه حل سریع می توانید خاصیت 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;
}
نخست
قبلی
3
4
5
بعدی
آخر
paged صفحه 5 از 5
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 2
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Reza
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام استاد خسته نباشید من یه سوالی داشتم میخوام بدونم چطور باید در وبلاگ لوگو یا فایل png روی عکس گذاشت برای مثال یکی از...
۱۴۰۲/۰۱/۰۷
سامان
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
سلام امکان داره شما یک مثال بهتر بزنید نسبت به بنده که بجای بک گراند کل صفحه تغییر رنگ بده بصورت خودکار
۱۴۰۱/۱۲/۲۱
سامان
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
سلام من کلی در سطح وب گشتم اما نتونستم چیزی پیدا کنم درباره اینکه چطور ظاهر سایت در روز سفید بشه و در...
۱۴۰۱/۱۲/۲۰
امیر
حذف اسکرول افقی (Horizontal Scroll) با CSS
سلام و عرض ادب من از قالب نگارشاپ استفاده میکنم یک مشکل دارم ، سایت در صفحه موبایل همه ساختارش درسته فقط مشکل اینه...
۱۴۰۱/۱۲/۱۷
ابوالفضل
توابع (Functions) در PHP
سلام استاد در یک پروژه نیازه که هفتمین مقدار یک رشته عددی رو خروجی بگیرم از تابع زیر استفاده میکنم اما خطا می گیرم: ...
۱۴۰۱/۱۲/۱۴
زهرا
نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
عالی
۱۴۰۱/۱۲/۱۴
روزبه پارسی
آموزش استفاده از فونت فارسی در وب با CSS
ببخشید یه سوال دیگه هم دارم البته شرمنده این صفحه رو نگاه کنید: یه جا برای شماره نوشته (نمایش کامل) که باید کلیک...
۱۴۰۱/۱۲/۱۳
روزبه پارسی
آموزش استفاده از فونت فارسی در وب با CSS
با تشکر از شما استاد عزیز خیلی خوب بود توی صفحه اگه چند تا پاراگراف داشته باشیم که بخواهیم این تغییر رنگ رو برای...
۱۴۰۱/۱۲/۱۳
مهدی
تعویض کد امنیتی Captcha با Ajax و MySQL
من یک سایت سر و کار دارم در هر 24 ساعت فقط یک بار برای 5 دقیقه باز میشود اما وقتیکه تمام مراحل را تمام...
۱۴۰۱/۱۲/۱۲
پــرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام خسته نباشید در مورد ابزار inspector یکم بیشتر توضیح می دین که چطوریه مثلا اگر بخوایم جای منوها رو از طریق این ابزار پیدا...
۱۴۰۱/۱۲/۱۲
روزبه پارسی
آموزش استفاده از فونت فارسی در وب با CSS
با سلام و خسته نباشید ببخشید من یه متن دارم که می خوام هر وقت صفحه رو لود می کنم متن رنگش بصورت راندوم...
۱۴۰۱/۱۲/۱۲
بنیامین موسی زاده
نحوه درج تصویر در وبلاگ و سایت
تشکر فراوان بابت اطلاعات خوبتون....
۱۴۰۱/۱۲/۰۵
bahar
خاصیت Background و ویژگی های آن در CSS
سلام و عرض ادب از بابت مطلب مفیدی که در سایت قرار دادید سپاسگزارم
۱۴۰۱/۱۲/۰۱
محمود
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
سلام لطفن کاری کنید که وقتی منو در پایین صفحه قرار می گیرد منوی آبشاری به طرف بالا باز شود . با تشکر...
۱۴۰۱/۱۱/۱۷
ali
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
سلام آیا راهی یا کدی وجود داره که بتونیم فایل های آپلود شده غیر مستقیم رو توی وبلاگ پخش کنیم؟
۱۴۰۱/۱۱/۱۷
پــرتو
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام جناب خسته نباشید ببخشید توی بلاگفا کلا نمیشه چیزی ثبت کرد یا فقط برای من اینجوریه؟
۱۴۰۱/۱۱/۱۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2023 Webgoo.ir - All Rights Reserved.