منوی واکنشگرا
کلاس های نوار navigation (منو) درW3.CSS
W3.CSS کلاس های زیر را برای نوار navigationها فراهم کرده است:
| کلاس | تعریف |
|---|---|
| w3-navbar | نوار navigation افقی |
| w3-navitem |
سبک های متن یا فیلدهای جستجو درون یک منو (برای اینکه همان padding که لینکها در منو دارند را داشته باشیم ) |
| w3-dropdown-click | عناصر قابل کلیک منوی کشویی(به جای رفتن موس روی آن) |
| w3-dropnav | منو تمام عرض کشویی |
| w3-topnav |
مانند کلاس است ، تنها در زمانی که موس روی لینک هایش قرار میگیردبه جای تغییر رنگ پس زمینه ،یک خط زیر آن قرار میگیرد. |
| w3-sidenav | نوارمنوی عمودی |
منوهای پایه
کلاس w3-navbar یک نوار منوی افقی ایجاد میکند:
مثال
<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-green">
<ul class="w3-navbar w3-blue">
منو های border دار
کلاس w3-border یا w3-card برای افزودن border اطراف یک منو برای نمایش آن مانند یک کارت استفاده می شود:
مثال
<ul class="w3-navbar w3-border w3-round w3-light-grey">
<ul class="w3-navbar w3-card-8 w3-light-grey">
لینک جاری/ فعال
کلاس w3-color برای مشخص کردن لینک استفاده می شود:
مثال
<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 استفاده کنید:
مثال
<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 روی یک آیتم لیست برای راست چین کردن یک لینک خاص ، اعمال می شود.
مثال
<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-xlarge">
کلاس w3-padding برای تغییر padding هر لینک درون منو ، استفاده میشود:
مثال
<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 را در بر بگیرید:
عرض گزینه های لیست را با خصوصیت width در CSS سفارشی کنید.(نکته:در نمایشگرهای کوچک ،آنها میتوانند به 100% تبدیل شوند)
مثال
<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>
منو با آیکون ها
مثال
<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 استفاده کنید.
مثال
<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>
منو با ورودی ها و دکمه ها
مثال
<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>
نوار منو با منوی کشویی
مثال
<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> منو اضافه کنید.
نکته: اگر شما میخواهید یک سمبل کنار متن منو ، داشته باشید ،از یک آیکون مناسب استفاده کنید(مثلا).
مثال
<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 استفاده کنید:
مثال
<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 را بیافزایید.
منو افتادنی
زمانی که منو در نمایشگرهای کوچک خیلی بزرگ باشدو شما نمیخواهید آن را به صورت عمودی نمایش دهید، میتوانید از کلاس های مفید برای نمایش یامخفی کردن لینک های خاص در یک منو استفاده کنید.
در مثال زیر ، در زمان نمایش در موبایل یا تبلت منو با دکمه(☰) در گوشه بالا و راست جایگزین می شود. زمانی که دکمه کلیک می شود ،منو به صورت استک (پشته) نمایش داده می شود:
مثال
<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>
- نوشته شده توسط زهرا داوودی
- بازدید: 4015
