css3按钮
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <script src="com/js/jquery.js" type="text/javascript"></script> <script> $(function(){ $('.menu').click(function(e){ e.preventDefault(); $('body').toggleClass('open'); }); $('.navhidediv').click(function(e){ e.preventDefault(); $('body').removeClass('open'); }); }); </script> <style> body{background: #ccc;} #header { padding: 15px; background: #037cd5; position: fixed; left: 0; right: 0; top: 0; z-index: 999; } #header.header-fixed { padding-top: 5px; padding-bottom: 5px; } a { text-decoration: none; } #brand { float: left; color: #FFF; margin-top: 10px; font-size: 40px; } #brand span { color: #FFF; } .header-fixed #brand { font-size: 30px; } .menu { background: #FFF; color: #FFF; display: block; width: 50px; height: 50px; border-radius: 50%; float: right; -webkit-user-select: none; z-index: 3; position: relative; } .menu .icon-bar { background: #037cd5; height: 4px; display: block; margin: 0 auto 3px; width: 5px; visibility: visible; opacity: 1; } .menu .icon-bar:first-child { margin-top: 15px; } .open .menu .icon-bar { width: 15px; margin-bottom: 7px; height: 2px; } .open .menu .icon-bar-top { -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px); transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px) } .open .menu .icon-bar-middle { visibility: hidden; opacity: 0; } .open .menu .icon-bar-bottom { -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(5.5px, -5.5px); transform: rotateZ(-45deg) scaleX(1.25) translate(5.5px, -5.5px); } .navigation { list-style: none; position: absolute; right: 25px; top: -500px; text-align: right; z-index: 1; opacity: 0; visibility: hidden; padding-top: 27px; font-family: Helvetica, Arial, sans-serif; } .navigation li { margin-top: 7px; } .navigation i { display: inline-block; background: #FFF; color: #037cd5; width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 32px; vertical-align: middle; margin-left: 5px; } .navigation a { color: #FFF; text-decoration: none; } .navigation a:hover { text-decoration: none; } .navigation a:hover i .navigation .active a i { background: #037cd5; color: #FFF; } .navigation li:nth-of-type(1) { -ms-transform: translate(0, 500px); -webkit-transform: translate(0, 500px); transform: translate(0, 500px); } .navigation li:nth-of-type(2) { -ms-transform: translate(0, 400px); -webkit-transform: translate(0, 400px); transform: translate(0, 400px); } .navigation li:nth-of-type(3) { -ms-transform: translate(0, 300px); -webkit-transform: translate(0, 300px); transform: translate(0, 300px); } .navigation li:nth-of-type(4) { -ms-transform: translate(0, 200px); -webkit-transform: translate(0, 200px); transform: translate(0, 200px); } .navigation li:nth-of-type(5) { -ms-transform: translate(0, 100px); -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } .open .navigation li { -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } .open .navigation { display: block; top: 50px; opacity: 1; visibility: visible } .open .navhidediv { top: 0; opacity: 1; visibility: visible } .navhidediv { position: fixed; left: 0; right: 0; top: -100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 0; visibility: hidden; opacity: 0; } #brand, #header, .menu .icon-bar, .navigation em, .navhidediv, .navigation, .navigation li { transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #container { padding-top: 100px; } </style> </head> <body> <a href="#" class="menu"> <span class="icon-bar icon-bar-top"></span> <span class="icon-bar icon-bar-middle"></span> <span class="icon-bar icon-bar-bottom"></span> </a> <ul class="navigation"> <li><a href="" target="_blank">Twitter <i class="fa fa-twitter"></i></a></li> <li><a href="" target="_blank">Facebook<i class="fa fa-facebook"></i></a></li> <li><a href="#">CSS3 <i class="fa fa-css3"></i></a></li> <li><a href="#">HTML5 <i class="fa fa-html5"></i></a></li> <li><a href="" target="_blank">Download <i class="fa fa-download"></i></a> </li> </ul> <div class="navhidediv"></div> </body> </html>