How to make the navigation bar of HTML accordion
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.
