/*开始导航页样式表*/
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的简单的导航页面,点击中间按钮可隐藏或展示相应的菜单导航,具体信息请查看代码。