3D menu with small icons Based on CSS3 floating belt and css3 floating Belt

3D menu with small icons Based on CSS3 floating belt and css3 floating Belt

This time we will share a very special CSS3 menu. The menu looks like a float, and each menu item has a small exquisite icon. When the mouse slides over the menu item, the menu items will be raised up, like a float, forming a very cool 3D visual effect. This CSS3 float-like 3D menu is ideal for menu navigation on some activity pages.

Download Online Preview source code

Implementation 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