Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to make the navigation bar of HTML accordion

2025-01-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article "HTML accordion navigation bar how to make" the knowledge of most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "HTML accordion navigation bar how to make" article.

Code for making accordion navigation bar

Accordion navigation bar

# indexText {

/ * border: 1px red solid;*/

Width: 1300px

Height: 400px

Position: absolute

Line-height: 40px

Font-size: 16px

Left: 50%

Top:50%

Margin-top:-200px

Transition: .5s linear

-webkit-transition: .5s linear

-moz-transition: .5s linear

-ms-transition: .5s linear

Z-index: 100

Overflow: hidden

}

# indexTextHeader {

Width: 100%

Height: 10%

Font-size: 20px

Font-weight: 900

Text-align: center

}

# indexTextWarp {

Width: 80%

Height: 80%

Margin: 10px auto

Border: 3px # 6f3a13 solid

Overflow: hidden

}

.TextWarpHover {

Height: 100%

Float: left

Width: 6.5%

Background-image:-webkit-linear-gradient (top,#e68239 0%, 2%, 98%, 68239)

Background-size: 100%

Transition:all 1s ease-in-out

-moz-transition:all 1s ease-in-out

-webkit-transition:all 1s ease-in-out

-ms-transition:all 1s ease-in-out

/ *-o-transition:all 1s ease-in-out;*/

}

# indexTextWarp .TextWarpHover: hover {

Width: 87%

}

.indexTextWarp1 _ h {

Width: 61px

Height: 100%

Background: # f07a24

Color: white

Border-right:2px # e87826 solid

Font-size: 50px

Line-height: 70px

Text-align: center

Float: left

Box-shadow: 2px 0px 10px gray

2px 0px 20px black

}

.indexTextWarp4 {

Line-height: 150px

Width: 80%

Height: 100%

Text-align: center

Float: right

Font-size: 50px

}

Personal profile

Basic introduction

Name: XXX

Gender: X

Birth: XXXX-XX-XX

Blood type: X

Learning experience

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

Work experience

XXXXXXX/XXXXX/XXXXXX

XXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXX

I'm poisonous chicken soup.

It's really poisoned chicken soup.

The above is about the content of this article on "how to make the HTML accordion navigation bar". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report