html+css写出响应式侧边导航栏

果图

html部分：先写用div画好六个导航的卡片，再利用css添加响应效果

<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>

css部分：通过hover选择器和transition属性实现导航响应式操作，即可实现如图效果

a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加导航的响应式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }

然后就能实现我们这个实用又美观的侧边导航栏啦

航条效果图：

我们先来看一下，首先这个整体我们可以看成一个大盒子，盒子的背景颜色为白色。

然后看一下整体的话是占到整个导航条的80%左右，上图红色框圈出的范围。

这个盒子又分为两个部分，左侧的logo部分，右侧的导航部分。

整个布局用到的是flex布局：

大家可以去看一下阮一峰老师的教程：

阮一峰flex布局

左侧logo部分我们用到的标签有：

1、h3标签：

<h3><a href="index.html">多多鱼网页</a></h3>

h3是一对有开始有闭合的标签组合。以<h3>开始，以</h3>结束。

html h3标签主要用于布局标题、栏目类内容，h3与h1最大标题标签相比，h1标签一般一个网页中使用一次，而h3标签可以在一个网页中多次使用。默认CSS h3又比h2文字大小小一点。

html h3标签常见应用地方：

栏目标题可以使用h3标签
文章标题可以使用h3标签
文章标题列表可以使用h3标签（一般图文列表中，图片使用img引入，文章标题文字使用h3标签）

2、a标签：

<a href="index.html">多多鱼网页</a>

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

右侧的导航部分我们用到的标签有：

一、无序列表简介

无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的项目符号是●，不过可以通过无序列表type属性来改变无序列表的列表项符号。

语法：

<ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

说明：

<ul>，即“unordered list（无序列表）”。<li>，即“list（列表项）”。理解标签语义更有利于你记忆，而记忆HTML标签的语义是HTML的基础。

在该语法中，使用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。

注意，<ul>标签和<li>标签也是配合使用，没有单独使用，而且<ul>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签（对于初学者，我们忽略嵌套列表）。这个概念要非常清楚，在网站开发后期很容易犯错。（这个情况跟有序列表一样）。

右侧导航代码：

<ul>
   <li class="active">
	<a href="index.html">首页</a>
   </li>
   <li>
	<a href="">网页模板</a>
   </li>
   <li>
	<a href="">学习资料</a>
   </li>
   <li>
	<a href="">常见问题</a>
   </li>
   <li>
	<a href="">网页作业</a>
   </li>
   <li>
	<a href="">联系我们</a>
   </li>
</ul>

视屏教程：

tml 的结构部分标签

二、网页常见的结构

header 标签 --- 头部分结构

nav 标签 --- 导航条部分结构

main 标签 --- 主核心部分内容

footer 标签 --- 页尾

01.代码示例：

<body>

</body>

02.以上源代码使用 DOM（文件对象模型）表示：

body

header

nav

main

footer

03. header 与 footer 用法

header --- 指整个网页/或某个区块的头部。

一定会包含该区块的标题

可能会包含该区块的副标题、版本、署名等等

footer --- 表示整个网页/或某个区块的脚部

可能包括版权信息、参考资源、附注等等

小结：

头是header,脚是footer。

header 和 footer 都可能多次出现，但它们的级别是不同的。

04.nav(navgation 导航) --- 包含一组链接，连接至网站其它主要页面。

nav 标签与 header 标签的关系

不建议将nav放置在header内

头部/header是从上下文逻辑关系上来说的，并不一定是视觉设计中摆在顶上的内

容，所以一般不会包含nav。

小结：

导航 navigation包含一组链接，指向网站的其他主要栏目。

nav和header通常是互相独立的并列关系。

nav可能在页面中多次出现，分别指主导航、二级导航等等。

05.main 标签和 aside 标签

main --- 代表网页中的主要内容/主结构

不会包含网站的主导航条、网站总标题和网站总页脚，但可能包含次一级别的

header/van/footer。

*注：每个网页最多只有一个main

main 不可能是以下元素的后代：

article(文章标签)、aside(附属内容标签)、footer(网页标签)、deader(头部标签) 或

nav(导航标签)

aside(附属内容)

附属内容

如果删除，影响不大

应与主内容main相关

aside有时被翻译成"侧边"，这种翻译是不准确的。

代码示例：

<body>

<main>

</main>

</body>

按 DOM(文件对象模型)构建 html :

body

header

nav

main

aside

footer

小结：

01.主内容main，每个页面只有一个，指该页面专属的内容块，区别于网站的其他页面。

02.附属内容aside,与主内容有一些联系，如果被删除，对网页的阅读没有明显影响。

06. article 标签与 section 标签

article 是一篇完整的文章，代表页面中独立的、完整的、可以独自被外部引用的内容。

注意：header/footer/nav都可能出现在article中，作为文章自身的头、尾与文章内部导航。

section (片段或章节) ：

无法独立成文，通常性属于 article 的一部分，该片段里的开始部分仍有一个自然标题以

及相关内容。

section 也可能是main的子元素。

07.关于 id ：

唯一标识符，同一页面里id不得重复，以半角英文字母开头，不含特殊字符与空格，描述职能

，不描述样式。

小结：

01.article 是一篇独立的完整的文章，可以被外界引用的。

02.section 可以是 article 中的一个章节，也可以是主内容中的一个区块。

03.不管是 article 还是 section , 第一个子元素总是标题（header 或 h1）。

08. div 标签（部门、分块）

div --- 根据职能的不同，划分出特定的一块区域，常常结合id属性使用。

示例：

<h1>internet...</h1>

</header>

<div id= "today">...</div> ---今日热点功能区域

<div id= "login">...</div> ---登陆相关功能区域

<div id= "search">...</div> ---搜索功能区域

article、section、div 的区别：

aricle：文章

如果上下文能联合组成一个有意义的独立文章；应优先使用 article

section：片段，章节

无法使用article时，该片段里的开始部分仍有一个自然标题，和相关内容。

div：部门、分块

在无法使用article/section/aside等时，仍承担着特定功能的分块。

小结：

在无法使用article/section/aside等时，仍承担着特定功能的分块，就可以使用 div 标签。

div标签和section标签一样，常常带有id属性。

在线咨询

上一篇：安卓webview html5 自动播放本地视频，网上视频，可以循环播放
下一篇：偶然发现，Javascript中双重否定的写法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html+css写出响应式侧边导航栏

tml 的结构部分标签

您的项目需求