CSS3 implements a gorgeous Ribbon style menu

Source: Internet
Author: User

CSS3 's strength is beyond doubt, here is a Ribbon style menu implemented with transition properties in CSS3.

Brief description: is to achieve the mouse to move to each column, the current column raised, color, the mouse moved back to the original.

One

Before hover

        

When hover

       

Ii. Brief layout

This part is very concise, nonsense not much to say, directly on the code, if the code can not understand, that said is also a vain;

class='ribbon'>    //External container        <a href='#' ><span>Home</span></a>   //container interior elements        <a href='#' ><span>About</span></a>        <a href='#'><span >Services</span></a>        <a href='#'><span>contact </span></a>    </div>
Three, design style

Planning the whole (this is not the point)

* {            /* *            /margin:0;            padding:0;        }        Body {            /**            /00;            Margin:auto;          Center processing            Text-align:center;     Text Center Processing
}

Set up an external container (you can read it)

. Ribbon {            Display:inline-block;        }        . Ribbon:after,. ribbon:before {            margin-top:0. 5em;             "" ;             float : Left;            border:1. 5em solid orange;        }        . Ribbon:after {            border-right-color:transparent;        }        . Ribbon:before {            border-left-color:transparent;        }

Set container interior details (this is the focus)

. Ribbon a:link,. Ribbon a:visited {color:# the; Text-Decoration:none; float: Left; Height:3. 5em;        Overflow:hidden;            }. Ribbon span {background:orange; Display:inline-Block; Line-Height:3em; padding:01em; Margin-top:0. 5em;        position:relative; Handling CSS3 Browser compatibility issues-webkit-transition:background-color0.2s, margin-top0.2s;/*saf3.2+, Chrome*/-moz-transition:background-color0.2s, margin-top0.2s;/*ff4+*/-ms-transition:background-color0.2s, margin-top0.2s;/*IE10*/-o-transition:background-color0.2s, margin-top0.2s;/*Opera 10.5+*/Transition:background-color0.2s, margin-top0. 2s;            }. Ribbon a:hover span {background: #FFD204; Margin-top:0; }. Ribbon Span:before {content:"";            Position:absolute;            Top:3em; Left:0; Border-right:0. 5em solid #9B8651; Border-bottom:0. 5em solid Orange; }. Ribbon Span:after {content:"";            Position:absolute;            Top:3em; Right:0; Border-left:0. 5em solid #9B8651; Border-bottom:0. 5em solid Orange; }

  

: Link selector is used to select links that have not been accessed

: The visited selector is used to select the link that has been visited

The content property is used in conjunction with: Before and: After pseudo-elements to insert the generated content

  

The above code is the key, if you do not understand the part, you can debug on the editor, comment on the question of the statement, save, and then refresh the page to see the effect, such a profound impact.

CSS3 implements a gorgeous Ribbon style menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.