使用label和input标签关联及伪类选择器实现导航栏显示与隐藏
- 2022年11月23日
- 816 次
十月份记载过一篇《Html中label标签用法 使用label标签实例代码》，当时在此文中详细记载了Html中label标签的用法，在文末提到了可以使用label标签和input标签联动，然后再使用input的伪类选择器，来实现使用label与input标签实现点击网站导航栏的显示与隐藏的功能。
使用label与input标签实现网站导航栏的显示与隐藏的思路
通常我们使用label与input标签实现点击网站导航菜单栏的显示与隐藏的功能，主要是用在手机端，因为在手机端的时候，如果网站在导航栏中放置了很多的栏目链接，这个时候导航栏过长，需要我们重新对导航栏的Css样式进行编写控制，而在手机端如果将重写的导航栏一直显示出来又将遮挡住页面中的其他内容，这样是不利于用户体验的，所以我们需要使用一个导航字体图标，来实现点击这个图标显示与隐藏我们重新编写后的导航栏样式，同时label与input标签关联、input的伪类选择器对于实现此项功能也十分重要。下面来看看我们使用使用label与input标签实现网站导航栏的显示与隐藏，需要使用到哪些Html标签和Css属性。
Html中需要使用到的标签：
1、label标签内的for属性应当与相关元素的id属性相同
label标签内的for属性应当与相关元素的id属性相同，意思就是label标签配合input标签使用时，label标签中的for属性和input标签内的id属性值要一样，否则就不会将选中这个input选项。，比如：我label标签中的for属性是toggle-menu，那么input中的id属性就必须是toggle-menu，否则label和input就不会关联。
2、input的type属性因设置为checkbox
在《Html表单input type属性值有哪些？input各种type属性值的作用》一文中，有专门介绍input标签的type属性，这里我们必须将type属性设置为checkbox复选框类型，这是很重要的一个步骤。
Css中需要使用的属性
1、显示与隐藏
显示与隐藏是Css中display常用的两个属性值，当我们把一个元素的display属性设置为none的时候，就是隐藏某个元素，当我们把一个隐藏的元素在不同的视口设备中又将其display属性设置为black的时候，这个元素就又显示出来了。
div{display:none;}
div1{display:black;}我可以将导航的字体图标在PC端的时候将其display属性设置为隐藏，在手机端的时候将其display属性设置为显示，同时将手机端的导航栏的display属性也设置为隐藏，后面我们再使用伪类选择器点击的时候在让导航栏显示出来，此外我们还需要将input的复选框也设置为隐藏，否则就会一直显示input复选框的一个正方形选择框。
2、伪类选择器
主要是使用input的checked伪类选择器和+号相邻兄弟选择器，让我们的label标签和input标签以及导航栏进行关联。如下列Css代码
#toggle-menu:checked+.menu {
display: block;
}就是使用input伪类选择器和+相邻兄弟选择器，对menu进行了关联，当点击选择id为toggle-menu的选择器时，就会显示出导航栏。
3、媒体查询
主要是需要用使用媒体查询，在不同设备或者是不同屏幕宽度的情况下控制导航字体图标、导航栏的显示与隐藏。
使用label和input标签实现导航栏显示与隐藏实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 使用label和input标签实现导航栏显示与隐藏实例代码</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #666;
background-color: #eaeaef
}
a {
color: #f06868;
text-decoration: none
}
.div::after {
content: "";
display: table;
clear: both
}
ul li {
list-style: none
}
.container {
width: 1024px;
margin: 0 auto
}
.header {
width: 100%;
margin-bottom: 5px;
background-color: #fff;
box-shadow: 1px 1px 2px 3px rgba(51, 51, 51, 0.2)
}
.header-top {
padding: 5px;
border-bottom: 1px solid #ddd
}
.header-content {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 5px
}
.header-content .logo a img {
display: block;
width: 100%;
height: auto
}
.header-content .search {
width: 40%
}
.header-content .search form {
display: block;
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
border: 1px solid #f66
}
.header-content .search form input {
width: 100%;
height: 100%;
padding-left: 5px;
border: 0;
outline: 0
}
.header-content .search form button {
position: absolute;
right: -1px;
width: 37px;
height: 35px;
background-color: #f66;
border: 0;
border-right: 1px solid #f66;
outline: 0
}
.header-content .search form button::after {
font-family: iconfont;
font-size: 24px;
color: #fff;
}
.header .mobile-menu {
display: none;
position: absolute;
right: 0
}
.header input[type='checkbox'] {
display: none;
}
.header .mobile-menu .icon-menu {
display: none;
width: 30px;
height: 24px;
border-top: 5px solid #f96;
border-bottom: 5px solid #f96;
background-color: #f96;
padding: 5px 0;
background-clip: content-box;
}
.menu {
height: 42px;
line-height: 42px;
font-size: 16px;
background-color: #f66
}
.menu>ul {
height: 42px;
font-size: 0
}
.menu>ul>li {
display: inline-block;
position: relative;
max-width: 100px;
height: 42px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.menu>ul>li>a {
height: 42px;
padding: 10px 9px;
font-size: 16px;
color: #fff
}
.menu ul li a:hover,
.menu ul li.active a,
.menu ul li a.on {
background-color: #f48888
}
.menu>ul>li:last-child>.dropdown {
display: none;
position: absolute;
width: 100%;
background-color: #f66
}
.menu>ul>li:last-child:hover .dropdown {
display: block
}
.menu>ul>li:last-child>.dropdown li {
margin: 0 auto;
height: 42px;
line-height: 42px;
text-align: center;
border: 1px solid #fff
}
.menu>ul>li:last-child>.dropdown>li>a {
padding: 9px 7px;
font-size: 16px;
white-space: nowrap;
color: #fff
}
@media screen and (max-width:768px) {
.container {
width: 568px
}
.menu>ul {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto
}
}
@media screen and (max-width:568px) {
.container {
width: 96%
}
.header-content {
justify-content: flex-start;
}
.header-top {
display: none
}
.header-content .logo a img {
display: block;
width: 95%;
height: 36px
}
.header-content .search {
width: 50%
}
.header-content .search form {
height: 25px;
line-height: 24px
}
.header-content .search form button {
width: 24px;
height: 24px
}
.header .mobile-menu {
display: block;
top: 10px;
right: 6px
}
.header .menu {
display: none
}
.header .mobile-menu .icon-menu {
display: block;
}
#toggle-menu:checked+.menu {
display: block;
}
}
</style>
<body>
<header class="header">
<div class="header-top">
<p class="container"><a href="https://www.leetao.cc">李涛自留地</a></p>
</div>
<div class="header-content container">
<div class="logo">
<a href="https://www.leetao.cc"><img src="logo.png" alt="李涛自留地" title="李涛自留地"></a>
</div>
<div class="search">
<form name="search" action="" type="post">
<input type="search" name="q" id="q" class="ipt" placeholder="搜索更多内容">
<button type="submit">so</button>
</form>
</div>
</div>
<div class="mobile-menu">
<label for="toggle-menu" class="icon-menu"></label>
</div>
<input type="checkbox" id="toggle-menu">
<nav class="menu">
<ul class="container">
<li><a href="https://www.leetao.cc">李涛自留地</a></li>
<li><a target="black" href=''>栏目一</a></li>
<li><a target="black" href=''>栏目二</a></li>
<li><a target="black" href=''>栏目三</a></li>
<li><a target="black" href=''>栏目四</a></li>
<li><a target="black" href=''>栏目五</a></li>
</ul>
</nav>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 使用label和input标签实现导航栏显示与隐藏实例代码</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #666;
background-color: #eaeaef
}
a {
color: #f06868;
text-decoration: none
}
.div::after {
content: "";
display: table;
clear: both
}
ul li {
list-style: none
}
.container {
width: 1024px;
margin: 0 auto
}
.header {
width: 100%;
margin-bottom: 5px;
background-color: #fff;
box-shadow: 1px 1px 2px 3px rgba(51, 51, 51, 0.2)
}
.header-top {
padding: 5px;
border-bottom: 1px solid #ddd
}
.header-content {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 5px
}
.header-content .logo a img {
display: block;
width: 100%;
height: auto
}
.header-content .search {
width: 40%
}
.header-content .search form {
display: block;
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
border: 1px solid #f66
}
.header-content .search form input {
width: 100%;
height: 100%;
padding-left: 5px;
border: 0;
outline: 0
}
.header-content .search form button {
position: absolute;
right: -1px;
width: 37px;
height: 35px;
background-color: #f66;
border: 0;
border-right: 1px solid #f66;
outline: 0
}
.header-content .search form button::after {
font-family: iconfont;
font-size: 24px;
color: #fff;
}
.header .mobile-menu {
display: none;
position: absolute;
right: 0
}
.header input[type='checkbox'] {
display: none;
}
.header .mobile-menu .icon-menu {
display: none;
width: 30px;
height: 24px;
border-top: 5px solid #f96;
border-bottom: 5px solid #f96;
background-color: #f96;
padding: 5px 0;
background-clip: content-box;
}
.menu {
height: 42px;
line-height: 42px;
font-size: 16px;
background-color: #f66
}
.menu>ul {
height: 42px;
font-size: 0
}
.menu>ul>li {
display: inline-block;
position: relative;
max-width: 100px;
height: 42px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.menu>ul>li>a {
height: 42px;
padding: 10px 9px;
font-size: 16px;
color: #fff
}
.menu ul li a:hover,
.menu ul li.active a,
.menu ul li a.on {
background-color: #f48888
}
.menu>ul>li:last-child>.dropdown {
display: none;
position: absolute;
width: 100%;
background-color: #f66
}
.menu>ul>li:last-child:hover .dropdown {
display: block
}
.menu>ul>li:last-child>.dropdown li {
margin: 0 auto;
height: 42px;
line-height: 42px;
text-align: center;
border: 1px solid #fff
}
.menu>ul>li:last-child>.dropdown>li>a {
padding: 9px 7px;
font-size: 16px;
white-space: nowrap;
color: #fff
}
@media screen and (max-width:768px) {
.container {
width: 568px
}
.menu>ul {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto
}
}
@media screen and (max-width:568px) {
.container {
width: 96%
}
.header-content {
justify-content: flex-start;
}
.header-top {
display: none
}
.header-content .logo a img {
display: block;
width: 95%;
height: 36px
}
.header-content .search {
width: 50%
}
.header-content .search form {
height: 25px;
line-height: 24px
}
.header-content .search form button {
width: 24px;
height: 24px
}
.header .mobile-menu {
display: block;
top: 10px;
right: 6px
}
.header .menu {
display: none
}
.header .mobile-menu .icon-menu {
display: block;
}
#toggle-menu:checked+.menu {
display: block;
}
}
</style>
<body>
<header class="header">
<div class="header-top">
<p class="container"><a href="https://www.leetao.cc">李涛自留地</a></p>
</div>
<div class="header-content container">
<div class="logo">
<a href="https://www.leetao.cc"><img src="logo.png" alt="李涛自留地" title="李涛自留地"></a>
</div>
<div class="search">
<form name="search" action="" type="post">
<input type="search" name="q" id="q" class="ipt" placeholder="搜索更多内容">
<button type="submit">so</button>
</form>
</div>
</div>
<div class="mobile-menu">
<label for="toggle-menu" class="icon-menu"></label>
</div>
<input type="checkbox" id="toggle-menu">
<nav class="menu">
<ul class="container">
<li><a href="https://www.leetao.cc">李涛自留地</a></li>
<li><a target="black" href=''>栏目一</a></li>
<li><a target="black" href=''>栏目二</a></li>
<li><a target="black" href=''>栏目三</a></li>
<li><a target="black" href=''>栏目四</a></li>
<li><a target="black" href=''>栏目五</a></li>
</ul>
</nav>
</header>
</body>
</html>最后显示效果图：
在上例代码中，稍微对搜索框位置进行调整以及将so替换为搜索字体图标，基本上就完成了一个完整的能自适应的页面header区域的Html，三条杠的导航栏图标是直接使用Css制作而成，所以以上实例代码稍作修改就可以使用在网站模板中了。
以上就是本文使用label和input标签实现导航栏显示与隐藏的功能，本文从实现此功能的制作思路、Html中需要使用的标签、Css中需要使用的标签以及最后一个实例，最终实现了纯html和css实现导航栏显示与隐藏的功能。
若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。
- 上一篇: PHP中getimagesize()函数使用方法 getimagesize()函数有哪些内置参数？
- 下一篇: ZblogPHP主题制作六文章页面制作 ZblogPHP文章页面常用的调用标签汇总
- PHP文件上传变量$_FILES怎么使用？PHP预定义变量$_FILES有哪些参数 2022-11-18
- PHP制作一个养老保险退休金计算器 PHP实现简单养老金计算器 2022-10-19
- 使用PHP简单制作一个图片上传功能的页面 2022-11-19
- Html中label标签用法 使用label标签实例代码 2022-10-05
- PHP日期验证函数checkdate()如何使用 2022-10-14
- Html表单input type属性值有哪些？input各种type属性值的作用 2022-11-17