میلاد با سعادت رسول اکرم(ص) و امام صادق(ع) مبارک، (کد تخفیف 35%: MiladeRasol)

سبد خرید (0)

تبلیغات

منوی واکنشگرا

 کلاس های نوار navigation (منو) درW3.CSS

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

کلاس تعریف
w3-navbar نوار  navigation افقی
w3-navitem

 سبک های متن یا فیلدهای جستجو درون یک منو (برای اینکه همان padding که لینکها در منو دارند را داشته باشیم )

w3-dropdown-click عناصر قابل کلیک منوی کشویی(به جای رفتن موس روی آن)
w3-dropnav منو تمام عرض کشویی
w3-topnav

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

w3-sidenav نوارمنوی عمودی

منوهای پایه

کلاس w3-navbar یک نوار منوی افقی ایجاد میکند:

مثال

<ul class="w3-navbar w3-black">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
خودتان امتحان کنيد »

نوار منوهای رنگی

کلاس w3-color برای افزودن رنگ به منو استفاده میشود.

 

 

مثال

<ul class="w3-navbar w3-light-grey">
<ul class="w3-navbar w3-green">
<ul class="w3-navbar w3-blue">
خودتان امتحان کنيد »

منو های border دار

کلاس w3-border یا w3-card برای افزودن border اطراف یک منو برای نمایش آن مانند یک کارت استفاده می شود:

 

 

مثال

<ul class="w3-navbar w3-border w3-light-grey">
<ul class="w3-navbar w3-border w3-round w3-light-grey">
<ul class="w3-navbar w3-card-8 w3-light-grey">
خودتان امتحان کنيد »

لینک جاری/ فعال

کلاس w3-color برای مشخص کردن لینک استفاده می شود:

 

مثال

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-green" href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
خودتان امتحان کنيد »

لینک ها با قابلیت hover

زمانی که شما موس را روی لینک های یک منو قرار میدهید،رنگ پس زمینه به خاکستری تبدیل میشود.اگر شما میخواهید رنگ دیگری به آن بدهید ازکلاس های w3-hover-color و اگر میخواهید رنگ متن در زمان حرکت موس روی عنصر تغییر کند از کلاس w3-hover-text-color استفاده کنید:

 

مثال

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-hover-red" href="#">Home</a></li>
  <li><a class="w3-hover-blue" href="#">Link 1</a></li>
  <li><a class="w3-hover-green" href="#">Link 2</a></li>
  <li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul>
خودتان امتحان کنيد »

لینک های راست چین

کلاس  w3-right روی یک آیتم لیست برای راست چین کردن یک لینک خاص ، اعمال می شود.

مثال

<ul class="w3-navbar w3-light-grey w3-border">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="w3-right"><a class="w3-green" href="#">Link 3</a></li>
</ul>
خودتان امتحان کنيد »

اندازه منو

کلاس w3-size برای تغییر اندازه فونت لینک های درونی یک منو استفاده میشود:

 

مثال

<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green w3-xlarge">
خودتان امتحان کنيد »

کلاس w3-padding برای تغییر padding هر لینک درون منو ، استفاده میشود:

 

مثال

<ul class="w3-navbar w3-green">
  <li><a class="w3-padding-16" href="#">Home</a></li>
  <li><a class="w3-padding-16" href="#">Link 1</a></li>
  <li><a class="w3-padding-16" href="#">Link 2</a></li>
  <li><a class="w3-padding-16" href="#">Link 3</a></li>
</ul>
خودتان امتحان کنيد »

نکته: شما میتوانید w3-padding  را به جای هر لینک  به منو بدهید. اگرچه ، اگر شما اینکار را انجام دهید در زمان حرکت موس روی لینک ها نمیتوانید کل padding  را در بر بگیرید:

مثال

<ul class="w3-navbar w3-green w3-padding-16"></ul>
خودتان امتحان کنيد »

 عرض گزینه های لیست را با خصوصیت width  در CSS سفارشی کنید.(نکته:در نمایشگرهای کوچک ،آنها میتوانند به 100%  تبدیل شوند)

مثال

<ul class="w3-navbar w3-dark-grey w3-center">
  <li style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
  <li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul>
خودتان امتحان کنيد »

منو با آیکون ها

مثال

<ul class="w3-navbar w3-light-grey w3-border">
  <li><a class="w3-green" href="#"><i class="fa fa-home"></i></a></li>
  <li><a href="#"><i class="fa fa-search"></i></a></li>
  <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  <li><a href="#"><i class="fa fa-globe"></i></a></li>
  <li><a href="#"><i class="fa fa-sign-in"></i></a></li>
</ul>
خودتان امتحان کنيد »

کلاس های مثال بالا ،آیکو نهای "Font Awesome"  را نمایش میدهد.

در مورد نمایش آیکون ها در فصل   آیکون هاW3.CSS  بیشتر می آموزیم.


متن منو

اگر شما به جای لینک های درون منو ، بخواهید متن داشته باشید،برای اینکه padding مانند لینک ها داشته باشیم از کلاس w3-navitem استفاده کنید.

مثال

<ul class="w3-navbar w3-black">
  <li class="w3-navitem">Text</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="w3-navitem">More Text</li>
</ul>
خودتان امتحان کنيد »

منو با ورودی ها و دکمه ها

 

مثال

<ul class="w3-navbar w3-light-grey w3-border">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><input type="text" class="w3-input" placeholder="Search.."></li>
  <li><button class="w3-btn w3-green">Go</button></li>
</ul>
خودتان امتحان کنيد »

نوار منو با منوی کشویی

مثال

<ul class="w3-navbar w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown</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-hover-color  را هم به <li> و <a> منو اضافه کنید.

نکته: اگر شما میخواهید یک سمبل کنار متن منو  ، داشته باشید ،از یک آیکون مناسب استفاده کنید(مثلا).

مثال

<li class="w3-dropdown-hover w3-hover-orange">
  <a class="w3-hover-orange" 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>
خودتان امتحان کنيد »

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

اگر میخواهید به جای حرکت موس روی عنصر ،روی آن کلیک کنید ،از کلاس w3-dropdown-click  استفاده کنید:

مثال

<li class="w3-dropdown-click">
  <a onclick="myFunction()" href="javascript:void(0)">Dropdown <i class="fa fa-caret-down"></i></a>
  <div id="demo" 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>
خودتان امتحان کنيد »

 

منو ثابت

برای اینکه منو را در بالا یا پایین صفحه حتی در زمان پیمایش صفحه  به صورت ثابت قراردهیم، عنصر <div> اطراف <ul> قراردهید و به آن کلاس w3-topیا w3-bottom را  بیافزایید.

ثابت در بالا

<div class="w3-top">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
خودتان امتحان کنيد »

ثابت در پایین

<div class="w3-bottom">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
خودتان امتحان کنيد »

منو افتادنی

زمانی که منو در نمایشگرهای کوچک خیلی بزرگ باشدو شما نمیخواهید آن را  به صورت  عمودی نمایش دهید، میتوانید از کلاس های مفید برای نمایش یامخفی کردن لینک های  خاص در یک منو  استفاده کنید.

در مثال زیر  ، در زمان نمایش در موبایل یا تبلت  منو  با دکمه(☰) در گوشه بالا و راست جایگزین می شود. زمانی که دکمه کلیک می شود ،منو به صورت استک (پشته) نمایش داده می شود:

مثال

<div class="w3-bar w3-red">
 <a href="#" class="w3-bar-item w3-button">Home</a>
 <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 1</a>
 <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 2</a>
 <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 3</a>
 <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">☰</a>
</div>
خودتان امتحان کنيد »