Najnowsze tutoriale tworzenie stron internetowych
 

Jak - Side Nawigacja

❮ Poprzedni Następny Rozdział ❯

Dowiedz się, jak tworzyć animowane, zamykany bocznego menu nawigacyjnego.






Załóż Animated Side Nawigacja

Krok 1) Dodaj HTML:

Przykład

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>
Krok 2) Dodaj CSS:

Przykład

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
Krok 3) Dodaj JavaScript:

Poniższy przykład slajdów w bocznym panelu nawigacyjnym, a czyni to 250px szerokości:

Sidenav Nakładka Przykład

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
Spróbuj sam "

Poniższy przykład slajdów w bocznym panelu nawigacyjnym i wypycha zawartość strony do prawej (wartość używanego ustawić szerokość sidenav służy również ustawić lewy margines „zawartości strony”):

Sidenav push zawartość

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
Spróbuj sam "

Przykład poniżej slajdy także w bocznym panelu nawigacyjnym i wypycha zawartość strony do prawej, tylko tym razem, dodajemy czarny kolor tła z 40% krycia do elementu nadwozia, do "highlight" nawigacja strona:

Sidenav push zawartość w / krycie

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}
Spróbuj sam "

Poniższy przykład preparatów w nawigacji boku z lewej strony i pokrywa całą stronę (100% width) :

Sidenav pełnej szerokości:

/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
Spróbuj sam "

Poniższy przykład otwiera i zamyka menu nawigacji ażeby bez animacji:

Sidenav bez animacji

/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.display = "none";
}
Spróbuj sam "

Porada: Przejdź do naszego CSS pasek nawigacyjny Tutorial , aby dowiedzieć się więcej na temat pasków nawigacyjnych.


❮ Poprzedni Następny Rozdział ❯