Based on CSS3 ribbon-shaped 3D menu menu with small icon_html/css_WEB-ITnose

This time we are going to share a very special CSS3 menu. The menu has a ribbon-like appearance, and each menu item has a beautiful little icon. When the mouse slides over the menu item , the menu items will bulge upwards, like streamers fluttering, forming a very cool 3D visual effect. This CSS3 ribbon-shaped 3D menu is very suitable for menu navigation on some active pages.

Online preview Source code download

The implemented code.

htmll code:

 <nav>        <menu>            <li><a href="#"><span>t</span> <span>twitter</span> </a></li>            <li id="at"><a href="#"><span>c</span> <span>codepen</span> </a></li>            <li><a href="#"><span>d</span> <span>dribbble</span> </a></li>            <li><a href="#"><span>g</span> <span>google+</span> </a></li>        </menu>        <div class="ribbon left">        </div>        <div class="ribbon right">        </div>    </nav>

css code:

 *        {            padding: 0;            margin: 0;            border: 0;        }        *:after, *:before        {            display: block;            content: "";            position: absolute;        }        body        {            background-color: #3d332a;            background-image: url('9690bg.jpg');            padding-top: 50px;        }        nav        {            width: 476px;            margin: auto;            position: relative;        }        menu:after, menu:before        {            top: 0;            width: 60px;            height: 76px;            background: #eae2d5;        }        menu:after        {            clear: both;            right: -61px;            border-right: 1px solid #857e74;        }        menu:before        {            left: -55px;            border-left: 1px solid #857e74;        }        .ribbon        {            position: absolute;            top: 76px;            border-style: solid;            border-width: 13px;        }        .ribbon.left        {            left: -55px;            border-color: #857e74 #857e74 transparent transparent;        }        .ribbon.right        {            left: 511px;            border-color: #857e74 transparent transparent #857e74;        }        .left:after, .left:before        {            left: -68px;            border-style: solid;            z-index: -2;        }        .left:after        {            top: -68px;            border-width: 58px 0 0 56px;            border-color: #eae2d5 transparent transparent transparent;        }        .left:before        {            top: -26px;            border-width: 0 40px 38px 41px;            border-color: transparent transparent #eae2d5 transparent;        }        .right:after, .right:before        {            right: -65px;            border-style: solid;            z-index: -2;        }        .right:before        {            top: -25px;            border-width: 0 40px 38px 38px;            border-color: transparent transparent #eae2d5 transparent;        }        .right:after        {            top: -65px;            border-width: 58px 56px 0 0;            border-color: #eae2d5 transparent transparent transparent;        }        li        {            float: left;            position: relative;            margin-left: 33px;            cursor: pointer;            background-color: #eae2d5;            list-style-type: none;            border-left: 2px solid #d7cfc2;            border-right: 2px solid #d7cfc2;            transition: margin .1s ,padding .1s ,border 1s;        }        li:first-child        {            margin-left: 20px;        }        li:before, li:after        {            display: block;            position: absolute;            top: 0;            width: 20px;            height: 100%;            background: inherit;            transition: all .1s;        }        li:before        {            right: 100%;        }        li:after        {            left: 100%;        }        li:hover        {            margin-top: -9px;            box-shadow: 0 4px 10px 0px #000;            transition: margin .2s ,padding .2s;        }        li:hover:before, li:hover:after        {            height: 86%;            background: #d7cfc2;            transition: all .2s;        }        li:hover:before        {            transform: rotate(-30deg) skew(-30deg) translate(1.5px,9px);        }        li:hover:after        {            transform: rotate(30deg) skew(30deg) translate(-1.5px,9px);        }        a        {            display: block;            padding: 10px 15px;            text-decoration: none;            text-align: center;        }        a span        {            text-shadow: 1px 1px 1px #FFF;            color: #857e74;            transition: all .2s;        }        a span:first-child        {            font-family: icon;            font-size: 33px;            display: block;        }        a span:last-child        {            text-transform: capitalize;            font-family: 'Georgia';            font-size: 11px;            letter-spacing: 1px;            font-style: italic;            color: #6488ba;        }        li:hover span        {            transition: all .2s;        }        li:hover a span:first-child        {            color: #6488ba;            text-shadow: 1px 1px 1px #FFF , 0 0 1px #6488ba;        }        li:hover a span:last-child        {            color: #857e74;        }        @font-face        {            font-family: icon;            src: url('http://bennettfeely.com/fonts/icons.woff');        }

via: http://www. w2bc.com/Article/27670