دوشنبه ۰۷ خرداد ۱۴۰۳

Monday, May 27, 2024 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
related مطالب بیشتر:
مخفی کردن عناصر وب با CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
ساخت بلاک شناور عمودی با CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
آموزش استفاده از فونت فارسی در وب با CSS
دیدگاه
more ۶۸ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۱۴:۵۲ ۱۳۹۵/۰۷/۱۲
چطور میتونم برای وردپرس از این منو استفاده کنم
اموزشی برای این کار هست؟؟
تفاوت خاصی وجود ندارد، البته باید با نحوه ویرایش قالب های وردپرس آشنا باشید که یک مبحث جداگانه است!
۲۰:۱۹ ۱۳۹۵/۰۷/۲۶
سلام ممنون از مطلب مفیدتون
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;
}
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
3 × 8
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲

هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲

هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...
۱۴۰۳/۰۱/۲۰

پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹

حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...
۱۴۰۳/۰۱/۱۹

شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵

فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...
۱۴۰۳/۰۱/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.