CSS to hide the Display Effect on the sidebar

When working as an enterprise website, you often encounter things like side navigation or QQ. The JS time is usually seen on the website.

Below I will mainly introduce three methods of using CSS to hide and display the sidebar.

The first step is to list the elements required in the page.

<DL id = "box">
<DT> side navigation </DT>
<DD>
<A href = ""> qq1 </a> <a href = ""> qq2 </a> <a href = ""> qq3 </a> <a href = ""> qq4 </a>
</DD>
</Dl>

Basic Element CSS

Body {overflow: hidden ;}
DL, DT, DD {margin: 0px; padding: 0px; font-size: 12px ;}
DL {width: 175px; Background-color: # DDD; position: absolute; Right:-157px; cursor: pointer ;}
Dt {width: 10%; Background: orange; float: Left; text-align: center; color: # FFF; padding: 5px 0px; font-weight: bold ;}
Dd {width: 90% ;}
Dd A {margin: 5px; color: red ;}

These are our basic page elements

The second step is to analyze the running principle of the sidebar.

In fact, there is nothing to analyze. It mainly implements a display hiding effect. The events used are displayed with the mouse over and hidden with the mouse over.

When talking about the mouse events that can be controlled by the CSS of the mouse time, we should be able to think of the hover pseudo class.

OK. The following three implementation methods are implemented through the hover pseudo class.

Step 3Start with the topic

Method 1: implemented through the Basic pseudo-class method of css2

The selector of the motion we want to control is DL. When you move the cursor over it, modify the right attribute of DL. The Code is as follows:

DL: hover {right: 0px ;}

This is the simplest and the Best Browser compatibility currently. This is sufficient if there is no motion effect. When it comes to motion effects, css2 is a little powerless. At this time, we need to use the new css3 technology.

Step 4: Introduce the animation attributes controlled by css3: Animation and transition;

These two attributes are newly added in css3 to implement animation attributes.

Animations:
Animation-Name:Specifies the animation key frame name (which needs to be defined by ourselves)
Animation-duration:Animation execution time (for example, 1 s indicates 1 second)
Animation-timing-funcion:Indicates the type of animation to be executed, that is, the computing type of the animation to be executed;
Animation-iteration-count:Number of animation executions. An integer indicates the number of executions and infinite indicates the number of iterations;
Transitions
Property:Specifies the property to be animated, such as background and color (the list of convertible attributes will be listed in the subsequent courses );
Duration:It indicates how long the animation is completed, that is, the animation execution event. For example, 1 s indicates 1 second, and 0.5s indicates half second;
Timing-function:Indicates the type of animation to be executed, that is, the computing type of the animation to be executed, such as the linear gradient (the calculation type list of the animation execution will also be listed in subsequent courses)

These two attributes must have different prefixes (for example,-WebKit-***) in different browsers during use, so we will not repeat them here;
Animation-timing-funcion and
There are several timing-function parameters:

1. Linear	Constant Speed
2. Renew	Slow speed-fast-slow
Callback-in	Slow Start Speed
Timed-out	Slow speed near the end
Memory-in-out	The speed at the beginning and end is slowed down at a constant speed.
Cubic-bezr (N,N,N,N)	You can set the motion speed without a number.

Difference: When transitions is used, the animation effect can only be achieved by specifying the start value and end value of the attribute and performing a smooth transition between the two attributes, therefore, it cannot achieve relatively complex animation effects, while animations can achieve more complex animation effects by defining element attribute values in multiple ways.
Step 4: First UseTransitions

Also control DL

CSS:

DL: hover {right: 0px;-moz-transition: Right 1 s outbound-out ;};

Step 5: UseAnimationTo achieve
Also control DL

CSS:

@-Moz-keyframes show {0% {right:-100px;} 50% {right:-57px} 100% {right: 0px ;}}
DL: hover {-moz-Animation: show 1 S release-out; Right: 0px ;}

Conclusion: In the implementation of css3, I only write the style under Firefox. In actual use, pay attention to the compatibility of several other browsers. However, it is still quite disgusting that many browsers do not have good support for css3, or they are happy to be involved in mobile projects. Haha ~

 

 

Http://blog.sina.com.cn/u/1779046463