响应式导航如何实现 - W3Schools视频05

stefanieliang 发布于2019-08-23 16:15 / 2623人阅读

摘要：系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现

响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出，而是显示一个导航图标，点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。

W3Schools 响应式导航教学

响应式导航例子

视频连结

B站

YouTube

响应式导航（Responsive Navigation)

实现响应式导航的重点在于：

在大屏幕隐藏导航图标；显示全部导航项目。

在小屏幕隐藏大部分导航项目，只显示首页与导航图标，点击图标才显示其他项目。

当点击图标时，通过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，再载入到你的网页中。

可以看到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响应式网页布局

幻灯片如何实现

响应式导航如何实现

云服务器 GPU云服务器 asp如何响应式布局响应式响应式布局响应式网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102831.html

响应式导航如何实现 - W3Schools视频05

摘要：系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出，而是显示一个导航图标，点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学响应式导航例子视频连结 B站 YouTube 响应式导航（Re...

Ryan_Li 2019-08-02 16:08 评论0 收藏0
响应式导航如何实现 - W3Schools视频05

摘要：系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出，而是显示一个导航图标，点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学响应式导航例子视频连结 B站 YouTube 响应式导航（Re...

stackvoid 2019-08-30 15:56 评论0 收藏0
幻灯片如何实现 - W3Schools视频04

摘要：幻灯片是网页上常见的一项功能，今日我们来看看上的幻灯片教学。这就是幻灯片最核心的逻辑。系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现幻灯片（Slideshow）是网页上常见的一项功能，今日我们来看看W3Schools上的幻灯片教学。 W3Schools 幻灯片教学幻灯片例子简化版幻灯片例子视频连结 B站 YouTube 幻灯片（S...

HackerShell 2019-08-23 15:57 评论0 收藏0
幻灯片如何实现 - W3Schools视频04

摘要：幻灯片是网页上常见的一项功能，今日我们来看看上的幻灯片教学。这就是幻灯片最核心的逻辑。系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现幻灯片（Slideshow）是网页上常见的一项功能，今日我们来看看W3Schools上的幻灯片教学。 W3Schools 幻灯片教学幻灯片例子简化版幻灯片例子视频连结 B站 YouTube 幻灯片（S...

gyl_coder 2019-08-30 15:56 评论0 收藏0