Pure CSS to make a simple looking navigation bar

Self-taught to do a self-consciously simple look at the navigation bar of the small style, with some CSS3 properties. Very simple to look at a navigation bar, like friends can look.

First on the code HTML :

<nav><ul><li> hahaha </li><li> roar </li><li> Hey hehe </li><li> Quack < /li><li class= "Move" ></li><!--<li class= "Fly fly1" ></li><li class= "Fly Fly2" > </li><li class= "Fly fly3" ></li><li class= "Fly Fly4" ></li>--></ul></nav >

CSS for:

Nav,ul,li {padding:0;margin:0;} Nav {position:relative;left:35%;top:20px;width:30%;height:60px;background-color: #66CCFF; box-sizing:border-box; Display:inline-block;} UL {width:100%;height:60px;vertical-align:middle;} Li {display:inline-block;width:20%;text-align:center;height:60px;line-height:60px;cursor:pointer;color: #000000; Transition:color 0.4s Ease-in-out;} li:hover {color: #FFFFFF;}. Move {display:inline-block;border:4px solid #FF3333; Height:0px;background-color: #FF3333;p osition:absolute;left:0; Top:56px;transition:left 0.4s Ease-in-out;} Li:nth-child (1): Hover~.move {left:0;} Li:nth-child (2): Hover~.move {left:20%;} Li:nth-child (3): Hover~.move {left:40%;} Li:nth-child (4): Hover~.move {left:60%;}

When we start, I use float to complete the effect of the list item on one line, so the result is that the order will be reversed and still exist as a block element, so the other contents of the same navigation bar cannot be lined up in one row, Display:inline-block is a good solution to this.

Other small highlights are used as an empty element of Li as the identity used to move, to absolutely position him to the first position, and then through the ~ to set the hover time of each LI element move class this li empty element position. (CSS3 's new properties are really good, especially the transition tratition properties)

PS: We want to use the same principle to achieve a color shift from bottom to top when hovering. But it seems that my thinking is not right, I set four empty elements, the height of their 0, absolute positioning in the end, when hovering height into 60px, the fact and imagination still have distance.

The first two days finally procrastination skim the "CSS3 Professional Development Guide" This book, CSS3 many properties although some have not been standardized use, but the effect is really great. Also more blurred the demarcation between the CSS,JS, is no longer a matter of each tube, but for the design of the people is still a lot of convenience.

Students who need to learn CSS, please pay attention to the PHP Chinese web CSS video tutorial, many CSS online video tutorials can be viewed for free!