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

چاپ

منوی عمودی

منوی عمودی چه قابلیت هایی برای ما فراهم می کند:

منوی عمودی از پیش ساخته واکنشگرا

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px" id="mySidenav">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-left:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
}
</script>
خودتان امتحان کنيد »

 باز شدن  قطعه منو روی سمت چپ محتوا

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
خودتان امتحان کنيد »

باز شدن قطعه منو روی همه ی محتواها

function w3_open() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
خودتان امتحان کنيد »

حرکت دادن محتوای صفحه به سمت راست به صورت کشویی

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidenav").style.width = "25%";
  document.getElementById("mySidenav").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidenav").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
خودتان امتحان کنيد »

 منوی عمودی سمت راست

 
<nav class="w3-sidenav w3-white" style="width:25%;right:0">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

<div style="margin-right:25%">
... page content ...
</div>
خودتان امتحان کنيد »

 منوی عمودی سمت راست از پیش ساخته

 
<nav class="w3-sidenav w3-collapse w3-white" style="width:200px;right:0" id="mySidenav">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-right:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
}
</script>
خودتان امتحان کنيد »

سبک دهی به  منوی عمودی

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

مثال

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

منوی عمودی مرزدار

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

مثال

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
خودتان امتحان کنيد »

با افزودن کلاس  w3-border-bottom به لینک ها ،یک جداکننده لینک ایجاد میکنید.

مثال

<nav class="w3-sidenav w3-border">
  <a class="w3-border-bottom" href="#">Link 1</a>
  <a class="w3-border-bottom" href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
خودتان امتحان کنيد »

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

مثال

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
خودتان امتحان کنيد »

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

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

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

مثال

<nav class="w3-sidenav">
  <a class="w3-hover-black" href="#">Link 1</a>
  <a class="w3-hover-green" href="#">Link 2</a>
  <a class="w3-hover-blue" href="#">Link 3</a>
  <a class="w3-hover-red" href="#">Link 4</a>
</nav>
خودتان امتحان کنيد »

شما با استفاده از کلاس  w3-hover-none میتوانید افکت های زمان حرکت موس را لغو کنید. این زمانی استفاده میشود که شما فقط می خواهید در زمان حرکت موس روی عنصر ، رنگ متن را مشخص کنید( و نه رنگ پس زمینه)

مثال

<nav class="w3-sidenav">
  <a class="w3-hover-none w3-hover-text-grey" href="#">Link 1</a>
  <a class="w3-hover-none w3-hover-text-green" href="#">Link 2</a>
  <a class="w3-hover-none w3-hover-text-teal" href="#">Link 3</a>
  <a class="w3-hover-none w3-hover-text-orange" href="#">Link 4</a>
</nav>
خودتان امتحان کنيد »

اندازه های منوی عمودی

 

مثال

<nav class="w3-sidenav w3-large">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
خودتان امتحان کنيد »

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

مثال

<nav class="w3-sidenav w3-black" style="width:70px">
  <a href="#"><i class="fa fa-home w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-search w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-envelope w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-globe w3-xxlarge"></i></a>
</nav>
خودتان امتحان کنيد »

منوی عمودی با منوی کشویی

مثال

<nav class="w3-sidenav w3-light-grey">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div 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>
  </div>
  <a href="#">Link 3</a>
</nav>
خودتان امتحان کنيد »

نکته :زمانی که منو کشویی باز است ،رنگ پس زمینه لینک  خاکستری می شود تا نشان دهد این لینک فعال است. برای تغییر این رنگ،کلاسw3-hover-color   را به <li> و <a>   منو بیافزایید.

 منوی عمودی با آکاردئون

مثال

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" 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>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>
خودتان امتحان کنيد »

منوی عمودی متحرک شده

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

مثال

<nav class="w3-sidenav w3-animate-left">
خودتان امتحان کنيد »

پوششSidenav

کلاس برای ایجاد افکت پوششی ،زمانی که منوی عمودی باز میشود ،مورد استفاده قرار میگیرد. کلاس w3-overlay یک پس زمینه مشکی با وضوح 50%  روی صفحه اصلی می کشد.(این افکت منوی عمودی را مشخص میکند)

مثال

<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left" style="display:none;z-index:4" id="mySidenav">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav">Close</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</nav>

<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>

<!-- Page content -->
<div class="w3-container">
  <span class="w3-opennav" onclick="w3_open()">☰</span>
</div>

<!-- JS to open and close sidenav with overlay effect -->
<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
خودتان امتحان کنيد »

محتوای منوی عمودی

هرآنچه شما میخواهیددرون یک منوی عمودی بیافزایید:

مثال

<nav class="w3-sidenav w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="/img_fjords.jpg">

  <a class="w3-red" href="#">Home</a>
  <a href="#">Projects
    <span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  <div class="w3-container">
    <div class="w3-border w3-round w3-padding w3-blue-grey">
      <span class="w3-closebtn">x</span>
      <p>Lorem ipsum box...</p>
    </div>
  </div>
</nav>
خودتان امتحان کنيد »
نوشته شده توسط زهرا داوودی
بازدید: 3386