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

資訊專欄INFORMATION COLUMN

響應式導航如何實現 - W3Schools視頻05

stackvoid / 2898人閱讀

摘要：系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現

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

W3Schools 響應式導航教學

響應式導航例子

視頻連結

B站

YouTube

響應式導航（Responsive Navigation)

實現響應式導航的重點在于：

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

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

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

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













  
Responsive Topnav Example

  
Resize the browser window to see how it works.

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

可以看到topnav中的最后一條連結便是導航圖標。這里使用javascript:void(0);讓連結的跳轉功能無效。再給了一個icon類以及設定了onclick事件函數為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便是只顯示首頁的導航圖標。

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

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

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

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

W3Schools教學系列

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

W3Schools系列全部視頻：

Float響應式網頁布局

Flexbox響應式網頁布局

CSS Grid響應式網頁布局

幻燈片如何實現

響應式導航如何實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117569.html

相關文章

  • 響應式導航如何實現 - W3Schools視頻05

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

    stefanieliang 評論0 收藏0

  • 響應式導航如何實現 - W3Schools視頻05

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

    Ryan_Li 評論0 收藏0

  • 幻燈片如何實現 - W3Schools視頻04

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

    HackerShell 評論0 收藏0

  • 幻燈片如何實現 - W3Schools視頻04

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

    gyl_coder 評論0 收藏0

發表評論

0條評論

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