Ching Ming Festival has been over, began to work hard to learn!
! DOCTYPE html>
<title>CSS3 Vertical navigation menu for drawing effects</title>
- register Blue Trajectory Training Center
Web Front end, back end, mobile, development
- Find more good lessons
Web front and back basic course, advanced course, senior Course
- today's latest excellent course
Updated daily more, Better Development Course
- I have studied the course
I love to learn, I have studied, I like the course
- daily Gift offer more
Daily different offers, different learning packages available
CSS part ul{padding:0; margin:0; list-style:none;} div#nav-menu{width:500px; margin:200px Auto;} h1,h2,h3,h4,h5,h6,p{font-weight:normal; margin:0;} Div#nav-menu ul li{width:100%; height:100px border-left:10px solid #000 box-shadow:1px 2px 3px #666 margin-top:5p X Box-sizing:border-box; Transition:all 0.3s Linear;} Div#nav-menu ul Li a{display:block; width:100%; height:100%;} Div#nav-menu ul Li a div{float:left; box-sizing:border-box;} Div#nav-menu ul Li a div.left{width:100px; height:100%; text-align:center; line-height:100px;} Div#nav-menu ul li a div.left span{color: #000; font-size:25px; transition:all 0.3s linear;} Div#nav-menu ul Li a div.right{width:390px height:100% padding:20px 30px 20px 0;} Div#nav-menu ul li a div.right h3{color: #000; transition:all 0.3s linear;} Div#nav-menu ul li a div.right p{color: #666; font-size:14px; margin:7px; transition:all 0.3s linear;} Div#nav-menu ul li:hover{border-color: #FBD04F; Background-color: #000;} Div#naV-menu ul li:hover a div.left span.fa{color: #FBD04F; Transform:scale (2);} Div#nav-menu ul li:hover a div.right h3{font-size:14px; color: #fff;} Div#nav-menu ul li:hover a div.right p{font-size:20px; color: #FBD04F;}! [] (Http://i2.51cto.com/images/blog/201804/08/f38037cf0f643ca684dbc2466bd2c78f.gif)
CSS3 How to write a vertical navigation menu with transition animation effects?
