Structural pseudo-class selector—target implementation of searchable menu case (code example)-CSS Tutorial-php.cn

Goals of this article:

1. Master the usage of the structural pseudo-class selector - target in CSS

Question:

1. To achieve the following menu effect, when clicked The official account pops up 4 submenus. When the mini program is clicked, another 2 submenus pop up. The previously displayed submenus need to be automatically shrunk and pure DIV CSS is used. The structural pseudo-class selector - target

must be used. Structural pseudo-class selector—target implementation of searchable menu case (code example)

Additional notes:

1. The overall width is 140px

2. The first-level menu font is 16px, bold display

Now let’s do the specific operation

1. Prepare materials: Create an images folder in the root directory, and store all relevant material pictures here. We will find that the above materials are several small logo pictures, and we are going to It is used as a background image

Structural pseudo-class selector—target implementation of searchable menu case (code example)

##2. Create index.html, write the architecture, how to analyze the architecture

Idea analysis:

1. The target is divided into 2 parts, each part has a first-level menu. When the menu is clicked, the following submenu needs to be displayed, and here we can use the required knowledge points: structural pseudo-class selector—target

2. The upper and lower parts are similar, except that the background image of each menu is different, so many codes in the second part can reuse the first part, but they require separate settings, so they need Set separate class names for them

Okay, first follow the analysis and write down the ideas, and ignore the implementation of css for the time being

The code is as follows:

<!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>

Copy after login

3. Write the style , create a css folder, create a new index.css inside, how to write the styles inside, the following is the analysis idea

Idea analysis:

1. Sub-elements of the overall container

Idea Analysis

1. In order to set the common styles of all elements in the container, we can write these common codes into the .container * style, such as padding and margin. If not set in this way, then in each Setting it inside the element will cause code redundancy, so just like other cases, start with the most basic one

So add the following code to index.css:

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

Copy after login

2 , The outer container itself.container

Idea analysis:

1. According to the requirements, the width is 140, there is a light gray border, and there is a certain amount of padding on the top, bottom, left and right

So Add the following code to index.css:

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

Copy after login

3. Title.title

1. According to the requirements, the font size is 16px, the color is light gray, the font is bold, and then for each title we It is found that its background image is not repeated, and the horizontal direction is to the right, and the vertical direction is in the center,

So add the following code to 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;
}

Copy after login

4. Two titles Separate settings

1. The difference between the two titles is that the background images are different

So add the following code to index.css:

.title1{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.title2{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}

Copy after login

5.Menu .menu

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;
 }

Copy after login

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;
}

Copy after login

7、每个li的单独样式

1、每个li的唯一不同就是背景图片不同

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

.li1{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li2{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li3{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li4{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li5{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li6{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}

Copy after login

8、链接设置a

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

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

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

Copy after login

到此为止，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/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.title2{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.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/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li2{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li3{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li4{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li5{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
.li6{
   background-image: url(../images/Structural pseudo-class selector—target implementation of searchable menu case (code example));
}
a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

Copy after login

然后将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>

Copy after login

运行效果如下：

Structural pseudo-class selector—target implementation of searchable menu case (code example)

点击小程序的时候运行效果如下：

Structural pseudo-class selector—target implementation of searchable menu case (code example)

到此为止，我们就实现了全部的需求

总结：

1、学习了CSS中结构性伪类选择器—target的用法

The above is the detailed content of Structural pseudo-class selector—target implementation of searchable menu case (code example). For more information, please follow other related articles on the PHP Chinese website!