Ultimele tutoriale de dezvoltare web
 

W3.CSS Navigare laterală

❮ Anterior Urmatorul capitol ❯

Bara de navigare verticală

Cu navigare laterală, aveți mai multe opțiuni:

  • afișa întotdeauna panoul de navigare din partea stângă a conținutului paginii.
  • Utilizați un, pliabil "fully automatic" de navigare laterală receptiv.
  • Deschideți panoul de navigare, ascunderea partea stângă a conținutului paginii.
  • Deschideți panoul de navigare, ascunde tot conținutul paginii.
  • Shift conținutul paginii spre dreapta, la deschiderea panoului de navigare.

Exemplu: Afișează întotdeauna navigare laterală

<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>
Încearcă - l singur »

Sidenav receptivă Pliabile

<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>
Încearcă - l singur »

Deschideți Panoul de navigare ascunde o parte din conținutul

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Încearcă - l singur »

Deschideți Panoul de navigare ascunde tot conținutul

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";
}
Încearcă - l singur »

Shift conținutul în dreapta

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";
}
Încearcă - l singur »

Styling navigarea din partea

Adăugați clasa de culoare w3- la W3-sidenav pentru a schimba culoarea de fundal. Dacă doriți un / link - ul curent activ, pentru a permite utilizatorului știu ce pagină de el / ea este pe, adăugați clasa de culoare w3- la unul dintre link - uri precum:




Exemplu

<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>
Încearcă - l singur »

Bordered de navigare laterală

Utilizați clasa W3-frontieră pentru a adăuga un chenar în jurul sidenav:

Exemplu

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Încearcă - l singur »

Adăugați clasa-W3 de frontieră de jos pentru link - uri pentru a crea separatoare de link:

Exemplu

<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>
Încearcă - l singur »

Utilizați clasa W3-card pentru a afișa sidenav ca un card:

Exemplu

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Încearcă - l singur »

Link-uri Hoverable

Când mouse-ul peste link-urile din interiorul sidenav, culoarea de fundal se va schimba în gri.

Dacă doriți un fundal de culoare diferită pe Hover, utilizați oricare dintre clasele W3-Hover-color:

Exemplu

<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>
Încearcă - l singur »

Puteți dezactiva efectul Hover implicit cu W3-Hover-nici unul clasă. Acest lucru este adesea folosit atunci când doriți doar pentru a evidenția culoarea textului (and not background color) de (and not background color) pe Hover:

Exemplu

<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>
Încearcă - l singur »

Dimensiuni de navigare laterală

Crește font-size (w3-large etc) , (w3-large etc) :

Crescută padding (w3-padding etc) , (w3-padding etc) :

Exemplu

<nav class="w3-sidenav w3-large">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Încearcă - l singur »

Navigare laterală cu pictograme

Exemplu

<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>
Încearcă - l singur »

Navigare laterală cu Dropdown

Exemplu

<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>
Încearcă - l singur »

Sfat: Când meniul drop - down este "open" , link - ul de drop - down devine o culoare de fundal gri pentru a indica faptul că este activă. Pentru a trece peste acest lucru, adăugați o clasă W3-Hover-culoare atât "dropdown" <li> și <a> .

Navigare laterală cu Acordeon

Exemplu

<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>

Încearcă - l singur »

Animate Sidenav

Utilizați oricare dintre clasele W3-animate- să se estompeze, mări sau diapozitiv în navigare laterală:

Exemplu

<nav class="w3-sidenav w3-animate-left">
Încearcă - l singur »

Sidenav Suprapunere

Clasa W3-suprapunere poate fi utilizată pentru a crea un efect de suprapunere la deschiderea sidenav. Clasa-W3 suprapunere adaugă un fundal negru , cu o opacitate de 50% la "page content" - acest efect va "highlight" navigarea laterală.

Exemplu

<!-- 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>
Încearcă - l singur »

Conținut Sidenav

Adăugați orice doriți în interiorul navigarea din partea:

Exemplu

<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>
Încearcă - l singur »

❮ Anterior Urmatorul capitol ❯