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

Table of Contents

Goals of this article:

Question:

Now let’s do the specific operation

总结：

Home

Web Front-end

CSS Tutorial

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

易达

Jun 10, 2020 am 11:08 AM

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1423

Laravel Tutorial

1317

PHP Tutorial

1268

C# Tutorial

1242

Related knowledge

Google Fonts Variable Fonts Apr 09, 2025 am 10:42 AM

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript Apr 11, 2025 am 11:29 AM

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more

HTML Data Attributes Guide Apr 11, 2025 am 11:50 AM

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

How We Created a Static Site That Generates Tartan Patterns in SVG Apr 09, 2025 am 11:29 AM

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan

How to Build Vue Components in a WordPress Theme Apr 11, 2025 am 11:03 AM

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.

A Comparison of Static Form Providers Apr 16, 2025 am 11:20 AM

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML

While You Weren't Looking, CSS Gradients Got Better Apr 11, 2025 am 09:16 AM

One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item:

See all articles