成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

響應(yīng)式導(dǎo)航如何實現(xiàn) - W3Schools視頻05

stackvoid / 2862人閱讀

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

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

W3Schools 響應(yīng)式導(dǎo)航教學(xué)

響應(yīng)式導(dǎo)航例子

視頻連結(jié)

B站

YouTube

響應(yīng)式導(dǎo)航（Responsive Navigation)

實現(xiàn)響應(yīng)式導(dǎo)航的重點在于：

在大屏幕隱藏導(dǎo)航圖標(biāo)；顯示全部導(dǎo)航項目。

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

當(dāng)點擊圖標(biāo)時，通過JavaScript為導(dǎo)航表加入responsive類，功能是將導(dǎo)航項目垂直列出。

以下是響應(yīng)式導(dǎo)航的HTML部分：













  
Responsive Topnav Example

  
Resize the browser window to see how it works.

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

可以看到topnav中的最后一條連結(jié)便是導(dǎo)航圖標(biāo)。這里使用javascript:void(0);讓連結(jié)的跳轉(zhuǎn)功能無效。再給了一個icon類以及設(shè)定了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設(shè)為了不顯示display: none;；接著是媒體請求，我們來詳細(xì)看看。

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

接下來的三組都是responsive的設(shè)定。主要是將圖標(biāo)固定于右側(cè)，再來是顯示導(dǎo)航項目，并讓其占滿整行。

最后來看JavaScript：

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

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

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

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

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

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

W3Schools教學(xué)系列

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

W3Schools系列全部視頻：

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

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

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

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

響應(yīng)式導(dǎo)航如何實現(xiàn)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117569.html

相關(guān)文章

  • 響應(yīng)式導(dǎo)航如何實現(xiàn) - W3Schools視頻05

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

    stefanieliang 評論0 收藏0

  • 響應(yīng)式導(dǎo)航如何實現(xiàn) - W3Schools視頻05

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

    Ryan_Li 評論0 收藏0

  • 幻燈片如何實現(xiàn) - W3Schools視頻04

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

    HackerShell 評論0 收藏0

  • 幻燈片如何實現(xiàn) - W3Schools視頻04

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

    gyl_coder 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<