最新的Web開發教程
 

W3.CSS側面導航

❮上一頁 下一頁章❯

垂直導航欄

隨著邊導航，你有幾種選擇：

  • 始終顯示導航窗格中的頁面內容的左側。
  • 使用可折疊，“全自動”有求必應側邊導航。
  • 打開導航窗格中，隱藏頁面內容的左側部分。
  • 打開導航窗格中，隱藏所有的頁面內容。
  • 打開導航窗格中移時，頁面內容的權利。

例如：始終顯示在側面導航

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

<div style="margin-left:25%">
... page content ...
</div>
試一試»

可折疊響應Sidenav

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px">
  <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.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " block ";
}
function w3_close() {
  document.getElementsByClassName(" w3-sidenav ")[ 0 ].style.display = " none ";
}
</script>
試一試»

打開導航窗格隱藏內容的一部分

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
試一試»

打開導航窗格中的所有內容隱藏

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
試一試»

移內容的權利

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.width = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-opennav")[0].style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-opennav")[0].style.display = "inline-block";
}
試一試»

造型在側面導航

在w3- 顏色類添加到W3-sidenav來改變背景顏色。 如果你想要一個主動/流通環節，讓用戶知道哪個網頁，他/她是，在w3- 顏色類添加到其中一個鏈接，以及：




例

<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邊界類周圍添加sidenav邊框：

例

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
試一試»

在W3-下邊框類添加到創建鏈接分頻器鏈接：

例

<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卡類，以顯示sidenav作為一張牌：

例

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
試一試»

Hoverable鏈接

當你將鼠標放在sidenav中的鏈接，背景顏色將變為灰色。

如果你想在懸停不同的背景顏色，使用任何W3-懸停色類：

例

<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-懸停無類的默認懸停效果。 這是經常使用，當你只想以突出顯示懸停文本顏色（而不是背景色）：

例

<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>
試一試»

側面導航尺寸

增加字體大小（W3-大等）：

增加填充（W3-填充等）：

例

<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懸停色類既“下拉菜單”<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>

試一試»

動畫Sidenav

使用任何W3-animate- 類褪色，在側面導航變焦或幻燈片：

例

<nav class="w3-sidenav w3-animate-left">
試一試»

Sidenav覆蓋

的W3-覆蓋類可以用來打開sidenav何時創建疊加效果。 在W3-覆蓋類增加了一個黑色背景透明度為50％的“頁面內容” - 這種效應會“亮點”側面導航。

例

<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left" style="display:none;z-index:4">
  <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.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}

function w3_close() {
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script>
試一試»

Sidenav內容

添加任何你喜歡的側面導航裡面：

例

<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>
試一試»

❮上一頁 下一頁章❯