国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

stackvoid / 2913人閱讀

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

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

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

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

視頻連結(jié)

B站

YouTube

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

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

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

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

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

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













  
Responsive Topnav Example

  
Resize the browser window to see how it works.

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

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

再來(lái)看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;
  }
}

重點(diǎn)有二：先是.topnav .icon設(shè)為了不顯示display: none;；接著是媒體請(qǐng)求，我們來(lái)詳細(xì)看看。

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

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

最后來(lái)看JavaScript：

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

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

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

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

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

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

W3Schools教學(xué)系列

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

W3Schools系列全部視頻：

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117569.html

相關(guān)文章

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

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

    stefanieliang 評(píng)論0 收藏0

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

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

    Ryan_Li 評(píng)論0 收藏0

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

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

    HackerShell 評(píng)論0 收藏0

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

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

    gyl_coder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<