当前位置: 主页>网站教程>CSS教程> 构造性伪类选中器—target实现可搜寻菜单案例（代码实例）

分享文章到：

构造性伪类选中器—target实现可搜寻菜单案例（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

本文目标：

1、把握CSS中构造性伪类选中器—target的用途

问题：

1、实现以下菜单结果，当点击公众号弹出4个子菜单，当点击小程序，弹出别的2个子菜单，此前展现的子菜单需要主动收缩起来，且使用纯DIV+CSS，必需使用构造性伪类选中器—target

实现效果1.png 实现效果2.png

附加说明：

1、团体宽度是140px

2、1级菜单字体16px，加粗显示

此刻来详细操纵

1、预备素材：根名目创立images文件夹，把相关素材图片都存置与此，我们会发明以上的素材为几张小logo图片，我们预备把它当做背景图片来使用

2、创立好index.html，写好架构，架构怎样剖析呢

思绪剖析：

1、目标分成2个部分，每个部分带一个1级菜单，当点击该菜单，需要展现下面的子菜单，而这里我们就可以使用要求的知识点：构造性伪类选中器—target

2、上下两部分都是相似的，只是每个菜单的背景图片不一样，所以第二部分许多代码可以复用第一个部分的，但是他们需要独自的设定，所以需要给它们独自设定类名

好，先依照剖析，写好思绪，临时不管css的实现

代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>构造性伪类选中器—target实现可搜索菜单案例</title>

</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号利用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序利用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

3、写样式，创立css文件夹，里面创建index.css，里面的样式如何写了，以下是剖析思绪

思绪剖析：

1、团体容器的子元素

思绪剖析

1、为了设定容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内，比方padding,margin,不这样设定的话，然后在每个元素内部去设定，这样会造成代码冗余，所以还是和其他案例一样，先把这个最根基的写起

所以index.css中增加代码如下：

.container *{
   padding:0;
   margin:0;
}

2、外层容器本身.container

思绪剖析：

1、按照要求得知宽140，有浅灰色边框，上下摆布存有必然的padding

所以index.css中增加代码如下：

.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}

3、标题.title

1、按照要求字体大小16px,色彩浅灰，字体加粗，然后每个标题我们发明它的背景图片是不反复的，且水平标的目的是靠右，垂直标的目的是居中，

所以index.css中增加代码如下：

.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}

4、两个标题的独自设定

1、2个标题的不一样之处就在于背景图片不一样

所以index.css中增加代码如下：

.title1{
   background-image: url(../images/1.png);
}
.title2{
   background-image: url(../images/5.png);
}

5、菜单.menu

1、1级菜单下面的子菜单第一是要潜藏起来的，只是当点击标题菜单的时候就需要展开，此刻我们可以把子菜单当做是标题菜单的目标即target，而CSS中:target其实表示所有的target,在此文档中target为id=wechataccount和id=applet的2个div，但是每次只对某一个target生效，当别的一个target被触发了，其他的target的样式就会失效，复原成默许状态，就仿佛此页面中默许状态是潜藏，但是当公众号点击了，它下面的target就会利用当前的:target样式，但别的一个target触发了，此刻它的样式就又复原成display:none了

所以index.css中增加代码如下：

.menu{
   display: none;
 }
 :target{
   display:block;
 }

6、列表公共样式 ul li

1、由于按照实现结果可以看出没有黑色圆点，然后由于每个li都有背景图片，所以必然会有间距padding,且背景图片垂直标的目的居中，背景图片不反复

所以index.css中增加代码如下：

ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

7、每个li的独自样式

1、每个li的独一不一样就是背景图片不一样

所以index.css中增加代码如下：

.li1{
   background-image: url(../images/1.png);
}
.li2{
   background-image: url(../images/2.png);
}
.li3{
   background-image: url(../images/3.png);
}
.li4{
   background-image: url(../images/4.png);
}
.li5{
   background-image: url(../images/5.png);
}
.li6{
   background-image: url(../images/6.png);
}

8、链接设定a

1、每个链接默许是有色彩的，一样为蓝色，但是这里的连接色彩为灰色，不带默许的下划线

所以index.css中增加代码如下：

a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

到此为止，index.css的全部内容如下：

.container *{
   padding:0;
   margin:0;
}
.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}
.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}
.title1{
   background-image: url(../images/1.png);
}
.title2{
   background-image: url(../images/5.png);
}
.menu{
   display: none;
 }
 :target{
   display:block;
 }
ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

.li1{
   background-image: url(../images/1.png);
}
.li2{
   background-image: url(../images/2.png);
}
.li3{
   background-image: url(../images/3.png);
}
.li4{
   background-image: url(../images/4.png);
}
.li5{
   background-image: url(../images/5.png);
}
.li6{
   background-image: url(../images/6.png);
}
a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>构造性伪类选中器—target实现可搜索菜单案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号利用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序利用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

运转结果如下：

实现效果1.png