Html
    Css
    Js

    
                        
/*开始导航页样式表*/
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调用版本:1.11.1
 立即下载

html圆形导航导航

这是一个基于jQuery的简单的导航页面,点击中间按钮可隐藏或展示相应的菜单导航,具体信息请查看代码。

0