%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (0)

تبلیغات

لیست های کشویی واکنشگرا


کلاس های منوی کشویی درW3.CSS

W3.CSS کلاس های منوی کشویی زیر را فراهم کرده است:

کلاس تعریف
w3-dropdown-hover یک منوی کشویی با قابلیت hover
w3-dropdown-content قسمتی از منوی کشویی را نمایش میدهد
w3-dropdown-click عنصر منوی کشویی با قابلیت کلیک

عناصر Dropdown

کلاس w3-dropdown-hover یک عنصر منوی کشویی با قابلیت hover تعریف میکند:

کلاس w3-dropdown-content محتوای منوی کشویی را برای نمایش تعریف میکند.

مثال

<div class="w3-dropdown-hover">
  <button class="w3-btn w3-red">Hover Over Me!</button>
  <div class="w3-dropdown-content w3-border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
خودتان امتحان کنيد »

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

در مثال بالا عنصر hover  یک <button>  و  منوی کشویی یک <div> است.

در مثال بعدی عنصر hover یک <p>  و  منوی کشویی <span>  است:

مثال

<p class="w3-dropdown-hover">Hover over me!
  <span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
خودتان امتحان کنيد »

 منوهای Dropdown

کلاس w3-dropdown-hover برای ایجاد نوارهای  navigation با منوهای کشویی بسیار مناسب است:

مثال

<ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
خودتان امتحان کنيد »

منوهای کشویی با قابلیت کلیک

کلاس w3-dropdown-click یک منوی کشویی با قابلیت کلیک ایجاد می کند.

با این کلاس منوی کشویی با استفاده از JavaScript  باز می شود:

مثال

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-btn w3-red">Click Me!</button>
  <div id="Demo" class="w3-dropdown-content w3-border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<script>
function myFunction() {
    var x = document.getElementById("Demo");
    if (x.className.indexOf("w3-show") == -1)
        x.className += " w3-show";
    else
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>
خودتان امتحان کنيد »

منوی های کشویی تصویری 

مثال

<div class="w3-dropdown-hover">
  <img src="/img_fjords.jpg" alt="Norway" style="width:20%">
  <div class="w3-dropdown-content" style="width:300px">
    <img src="/img_fjords.jpg" alt="Norway" style="width:100%">
  </div>
</div>
خودتان امتحان کنيد »

منوهای کشویی کارتی 

مثال

<div class="w3-dropdown-hover">London
  <div class="w3-dropdown-content w3-card-4" style="width:250px">
    <img src="/img_london.jpg" alt="London" style="width:100%">
    <div class="w3-container">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the UK.</p>
    </div>
  </div>
</div>
خودتان امتحان کنيد »

منوی کشویی متحرک سازی شده

ا ز هرکدام از کلاس های w3-animate برای محو کردن ،بزرگنمایی یا حرکت کشویی محتوای منوی کشویی استفاده میشوند: 

مثال

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-btn">Click Me</button>
  <div id="Demo" class="w3-dropdown-content w3-animate-zoom">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
خودتان امتحان کنيد »

منوی کشویی راست چین

کلاس  w3-right چیدمان منوی کشویی را سمت راست قرار میدهد. با استفاده از(right:0) در CSS ،برای موقعیت دهی به محتوای منوی کشویی   را به جای آنکه از چپ به راست ببرد ،از راست به چپ می برد. 

مثال

<div class="w3-dropdown-hover w3-right">
  <button class="w3-btn">Dropdown</button>
  <div class="w3-dropdown-content w3-border" style="right:0">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی