/*开始导航页样式表*/ html,body { height:100%; } body { margin:0; overflow:hidden; background:url(../images/bg.png) no-repeat center; background-size:cover; } /*内容居中*/ body h1 { text-align:center; } /*盒子样式*/ .selector { position:absolute; left:50%; top:50%; width:140px; height:140px; margin-top:-70px; margin-left:-70px; } /*按钮*/ .selector,.selector button { font-family:'Oswald',sans-serif; font-weight:300; } .selector button { position:relative; width:100%; height:100%; padding:10px; background:#428bca; border-radius:50%; border:0; color:white; font-size:20px; cursor:pointer; box-shadow:0 3px 3px rgba(0,0,0,0.1); transition:all .1s; } .selector button:hover { background:#3071a9; } .selector button:focus { outline:none; } /*按钮结束*/ /*菜单*/ .selector ul { position:absolute; list-style:none; padding:0; margin:0; top:-20px; right:-20px; bottom:-20px; left:-20px; } .selector li { position:absolute; width:0; height:100%; margin:0 50%; -webkit-transform:rotate(-360deg); transition:all 0.8s ease-in-out; } .selector li input { display:none; } .selector li input + label { position:absolute; left:50%; bottom:100%; width:0; height:0; line-height:1px; margin-left:0; background:#fff; border-radius:50%; text-align:center; font-size:1px; overflow:hidden; cursor:pointer; box-shadow:none; transition:all 0.8s ease-in-out,color 0.1s,background 0.1s; } .selector li input + label:hover { background:#f0f0f0; } .selector li input:checked + label { background:#5cb85c; color:white; } .selector li input:checked + label:hover { background:#449d44; } .selector.open li input + label { width:80px; height:80px; line-height:80px; margin-left:-40px; box-shadow:0 3px 3px rgba(0,0,0,0.1); font-size:14px; } .selector.open li input + label a { text-decoration:none; color:#000; } /*菜单结束*/
这是一个基于jQuery的简单的导航页面,点击中间按钮可隐藏或展示相应的菜单导航,具体信息请查看代码。