響應式導航如何實現(xiàn) - W3Schools視頻05

Ryan_Li 發(fā)布于2019-08-02 16:08 / 1296人閱讀

摘要：系列全部視頻響應式網(wǎng)頁布局響應式網(wǎng)頁布局響應式網(wǎng)頁布局幻燈片如何實現(xiàn)響應式導航如何實現(xiàn)

響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。

W3Schools 響應式導航教學

響應式導航例子

視頻連結

B站

YouTube

響應式導航（Responsive Navigation)

實現(xiàn)響應式導航的重點在于：

在大屏幕隱藏導航圖標；顯示全部導航項目。

在小屏幕隱藏大部分導航項目，只顯示首頁與導航圖標，點擊圖標才顯示其他項目。

當點擊圖標時，通過JavaScript為導航表加入responsive類，功能是將導航項目垂直列出。

以下是響應式導航的HTML部分：










  Home
  News
  Contact
  About
  
    
  



  Responsive Topnav Example
  Resize the browser window to see how it works.

首先，在的部分用載入了一個Font Awesome外部連結，為的是使用其中的導航圖標。這一做法會載入Font Awesome的全部圖標，而你真正用到的只有一個。如果你這樣做，也可以利用Fontello選擇你會用到圖標，生成自己的圖標web font，再載入到你的網(wǎng)頁中。

可以看到topnav中的最后一條連結便是導航圖標。這里使用javascript:void(0);讓連結的跳轉(zhuǎn)功能無效。再給了一個icon類以及設定了onclick事件函數(shù)為toggleNav。

再來看CSS的部分：

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ffffd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

重點有二：先是.topnav .icon設為了不顯示display: none;；接著是媒體請求，我們來詳細看看。

第一組將除了第一個（首頁）之外的導航項目全部隱藏。第二組是顯示導航圖標并讓其靠右。

接下來的三組都是responsive的設定。主要是將圖標固定于右側，再來是顯示導航項目，并讓其占滿整行。

最后來看JavaScript：

function toggleNav() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

當點擊圖標時，取得myTopnav元素，并判斷它的className是否只有topnav，若是則為它加入 responsive（注意有一空格在前），否則，將它重設為topnav。加入responsive類則是顯示全部導航項目，也就是媒體請求最后三組的設定；沒有responsive便是只顯示首頁的導航圖標。

這是最常見的響應式導航的實現(xiàn)方法，其他方法或大同小異，或增加細節(jié)與功能。若想要瞭解更多，以下兩種導航是我覺得值得一看的：

側邊欄滑入導航：改變width，0為隱藏，滑入效果則是由transition實現(xiàn)。

全屏導航：改變width和height；改動width是側邊滑入；改動height則是上下滑入。同樣0為隱藏，滑入效果由transition實現(xiàn)。

W3Schools系列的代碼都在GitHub上：W3Schools GitHub

W3Schools教學系列

W3Schools是知名的網(wǎng)頁設計／前端開發(fā)教學網(wǎng)站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明文件（Documents）。有經(jīng)驗的前端或多或少已經(jīng)接觸過這個網(wǎng)站，因為它經(jīng)常出現(xiàn)在搜索結果的前幾項。其中，它的How To部分更是包含了大量非常實用的例子，例如，如何制作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

W3Schools系列全部視頻：

Float響應式網(wǎng)頁布局

Flexbox響應式網(wǎng)頁布局

CSS Grid響應式網(wǎng)頁布局

幻燈片如何實現(xiàn)

響應式導航如何實現(xiàn)

云服務器 GPU云服務器 asp如何響應式布局響應式響應式布局響應式網(wǎng)站

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54735.html

響應式導航如何實現(xiàn) - W3Schools視頻05

摘要：系列全部視頻響應式網(wǎng)頁布局響應式網(wǎng)頁布局響應式網(wǎng)頁布局幻燈片如何實現(xiàn)響應式導航如何實現(xiàn) 響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學響應式導航例子視頻連結 B站 YouTube 響應式導航（Re...

stefanieliang 2019-08-23 16:15 評論0 收藏0
響應式導航如何實現(xiàn) - W3Schools視頻05

摘要：系列全部視頻響應式網(wǎng)頁布局響應式網(wǎng)頁布局響應式網(wǎng)頁布局幻燈片如何實現(xiàn)響應式導航如何實現(xiàn) 響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學響應式導航例子視頻連結 B站 YouTube 響應式導航（Re...

stackvoid 2019-08-30 15:56 評論0 收藏0
幻燈片如何實現(xiàn) - W3Schools視頻04

摘要：幻燈片是網(wǎng)頁上常見的一項功能，今日我們來看看上的幻燈片教學。這就是幻燈片最核心的邏輯。系列全部視頻響應式網(wǎng)頁布局響應式網(wǎng)頁布局響應式網(wǎng)頁布局幻燈片如何實現(xiàn)響應式導航如何實現(xiàn) 幻燈片（Slideshow）是網(wǎng)頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。 W3Schools 幻燈片教學幻燈片例子簡化版幻燈片例子視頻連結 B站 YouTube 幻燈片（S...

HackerShell 2019-08-23 15:57 評論0 收藏0
幻燈片如何實現(xiàn) - W3Schools視頻04

摘要：幻燈片是網(wǎng)頁上常見的一項功能，今日我們來看看上的幻燈片教學。這就是幻燈片最核心的邏輯。系列全部視頻響應式網(wǎng)頁布局響應式網(wǎng)頁布局響應式網(wǎng)頁布局幻燈片如何實現(xiàn)響應式導航如何實現(xiàn) 幻燈片（Slideshow）是網(wǎng)頁上常見的一項功能，今日我們來看看W3Schools上的幻燈片教學。 W3Schools 幻燈片教學幻燈片例子簡化版幻燈片例子視頻連結 B站 YouTube 幻燈片（S...

gyl_coder 2019-08-30 15:56 評論0 收藏0