CSS3底部半圆形导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3底部半圆形导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS3底部半圆形导航菜单代码，属于站长常用代码" />
<title>CSS3底部半圆形导航菜单代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="component">
	<button class="cn-button" id="cn-button">+</button>
	<div class="cn-wrapper" id="cn-wrapper">
		<ul>
		  <li><a href="http://www.baidu.com" target="_blank"><span class="icon-picture"></span></a></li>
		  <li><a href="http://www.baidu.com" target="_blank"><span class="icon-headphones"></span></a></li>
		  <li><a href="http://www.baidu.com" target="_blank"><span class="icon-home"></span></a></li>
		  <li><a href="http://www.baidu.com" target="_blank"><span class="icon-facetime-video"></span></a></li>
		  <li><a href="http://www.baidu.com" target="_blank"><span class="icon-envelope-alt"></span></a></li>
		 </ul>
	</div>
	<div id="cn-overlay" class="cn-overlay"></div>
</div><!-- /container -->
<script src="js/polyfills.js"></script>
<script src="js/lrtk.js"></script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0">
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p><br /></p><p>使用方法：</p><p>1、head区域引用文件 lrtk.css, normalize.css, modernizr-2.6.2.min.js</p><p>2、在文件中加入&lt;!-- 代码 开始 --&gt;&lt;!-- 代码 结束 --&gt;区域代码</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>

JS代码(lrtk.js):

(function(){
	var button = document.getElementById('cn-button'),wrapper = document.getElementById('cn-wrapper'),overlay = document.getElementById('cn-overlay');
	//open and close menu when the button is clickedvar open = false;
	button.addEventListener('click',handler,false);
	wrapper.addEventListener('click',cnhandle,false);
	function cnhandle(e){
	e.stopPropagation();
}
function handler(e){
	if (!e) var e = window.event;
	e.stopPropagation();
	//so that it doesn't trigger click event on documentif(!open){
	openNav();
}
else{
	closeNav();
}
}
function openNav(){
	open = true;
	button.innerHTML = "-";
	classie.add(overlay,'on-overlay');
	classie.add(wrapper,'opened-nav');
}
function closeNav(){
	open = false;
	button.innerHTML = "+";
	classie.remove(overlay,'on-overlay');
	classie.remove(wrapper,'opened-nav');
}
document.addEventListener('click',closeNav);
}
)();

JS代码(polyfills.js):

/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem,'my-class' ) -> true/false * classie.add( elem,'my-new-class' ) * classie.remove( elem,'my-unwanted-class' ) * classie.toggle( elem,'my-class' ) */
/*jshint browser:true,strict:true,undef:true */
/*global define:false */
( function( window ){
	'use strict';
	// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ){
	return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management// altho to be fair,the api sucks because it won't accept multiple classes at oncevar hasClass,addClass,removeClass;
	if ( 'classList' in document.documentElement ){
	hasClass = function( elem,c ){
	return elem.classList.contains( c );
}
;
	addClass = function( elem,c ){
	elem.classList.add( c );
}
;
	removeClass = function( elem,c ){
	elem.classList.remove( c );
}
;
}
else{
	hasClass = function( elem,c ){
	return classReg( c ).test( elem.className );
}
;
	addClass = function( elem,c ){
	if ( !hasClass( elem,c ) ){
	elem.className = elem.className + ' ' + c;
}
}
;
	removeClass = function( elem,c ){
	elem.className = elem.className.replace( classReg( c ),' ' );
}
;
}
function toggleClass( elem,c ){
	var fn = hasClass( elem,c ) ? removeClass:addClass;
	fn( elem,c );
}
var classie ={
	// full names hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,// short names has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass}
;
	// transportif ( typeof define === 'function' && define.amd ){
	// AMD define( classie );
}
else{
	// browser global window.classie = classie;
}
}
)( window );
	// EventListener | @jon_neal | //github.com/jonathantneal/EventListener!window.addEventListener && window.Element && (function (){
	function addToPrototype(name,method){
	Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
}
var registry = [];
	addToPrototype("addEventListener",function (type,listener){
	var target = this;
	registry.unshift({
	__listener:function (event){
	event.currentTarget = target;
	event.pageX = event.clientX + document.documentElement.scrollLeft;
	event.pageY = event.clientY + document.documentElement.scrollTop;
	event.preventDefault = function (){
	event.returnValue = false}
;
	event.relatedTarget = event.fromElement || null;
	event.stopPropagation = function (){
	event.cancelBubble = true}
;
	event.relatedTarget = event.fromElement || null;
	event.target = event.srcElement || target;
	event.timeStamp = +new Date;
	listener.call(target,event);
}
,listener:listener,target:target,type:type}
);
	this.attachEvent("on" + type,registry[0].__listener);
}
);
	addToPrototype("removeEventListener",function (type,listener){
	for (var index = 0,length = registry.length;
	index < length;
	++index){
	if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener){
	return this.detachEvent("on" + type,registry.splice(index,1)[0].__listener);
}
}
}
);
	addToPrototype("dispatchEvent",function (eventObject){
	try{
	return this.fireEvent("on" + eventObject.type,eventObject);
}
catch (error){
	for (var index = 0,length = registry.length;
	index < length;
	++index){
	if (registry[index].target == this && registry[index].type == eventObject.type){
	registry[index].call(this,eventObject);
}
}
}
}
);
}
)();

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative}
html,body{height:100%;}
body{background:#f06060;color:#fff;}
.csstransforms .cn-wrapper{font-size:1em;width:26em;height:26em;overflow:hidden;position:fixed;z-index:10;bottom:-13em;left:50%;border-radius:50%;margin-left:-13em;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);-moz-transform:scale(0.1);transform:scale(0.1);pointer-events:none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}
.csstransforms .opened-nav{border-radius:50%;pointer-events:auto;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.cn-overlay{width:100%;height:100%;background-color:rgba(0,0,0,0.6);position:fixed;top:0;left:0;bottom:0;right:0;opacity:0;visibility:hidden;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;z-index:2;}
.cn-overlay.on-overlay{visibility:visible;opacity:1;}
.cn-button{border:none;background:none;color:#f06060;text-align:center;font-size:1.8em;padding-bottom:1em;height:3.5em;width:3.5em;background-color:#fff;position:fixed;left:50%;margin-left:-1.75em;bottom:-1.75em;border-radius:50%;cursor:pointer;z-index:11;}
.cn-button:hover,.cn-button:active,.cn-button:focus{color:#aa1010;}
.csstransforms .cn-wrapper li{position:absolute;font-size:1.5em;width:10em;height:10em;-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;overflow:hidden;left:50%;top:50%;margin-top:-1.3em;margin-left:-10em;-webkit-transition:border .3s ease;-moz-transition:border .3s ease;transition:border .3s ease;}
.csstransforms .cn-wrapper li a{display:block;font-size:1.18em;height:14.5em;width:14.5em;position:absolute;position:fixed;/* fix the "displacement" bug in webkit browsers when using tab key */
 bottom:-7.25em;right:-7.25em;border-radius:50%;text-decoration:none;color:#fff;padding-top:1.8em;text-align:center;-webkit-transform:skew(-50deg) rotate(-70deg) scale(1);-ms-transform:skew(-50deg) rotate(-70deg) scale(1);-moz-transform:skew(-50deg) rotate(-70deg) scale(1);transform:skew(-50deg) rotate(-70deg) scale(1);-webkit-backface-visibility:hidden;-webkit-transition:opacity 0.3s,color 0.3s;-moz-transition:opacity 0.3s,color 0.3s;transition:opacity 0.3s,color 0.3s;}
.csstransforms .cn-wrapper li a span{font-size:1.1em;opacity:0.7;}
/* for a central angle x,the list items must be skewed by 90-x degreesin our case x=40deg so skew angle is 50degitems should be rotated by x,minus (sum of angles - 180)2s (for this demo) */
.csstransforms .cn-wrapper li:first-child{-webkit-transform:rotate(-10deg) skew(50deg);-ms-transform:rotate(-10deg) skew(50deg);-moz-transform:rotate(-10deg) skew(50deg);transform:rotate(-10deg) skew(50deg);}
.csstransforms .cn-wrapper li:nth-child(2){-webkit-transform:rotate(30deg) skew(50deg);-ms-transform:rotate(30deg) skew(50deg);-moz-transform:rotate(30deg) skew(50deg);transform:rotate(30deg) skew(50deg);}
.csstransforms .cn-wrapper li:nth-child(3){-webkit-transform:rotate(70deg) skew(50deg);-ms-transform:rotate(70deg) skew(50deg);-moz-transform:rotate(70deg) skew(50deg);transform:rotate(70deg) skew(50deg)}
.csstransforms .cn-wrapper li:nth-child(4){-webkit-transform:rotate(110deg) skew(50deg);-ms-transform:rotate(110deg) skew(50deg);-moz-transform:rotate(110deg) skew(50deg);transform:rotate(110deg) skew(50deg);}
.csstransforms .cn-wrapper li:nth-child(5){-webkit-transform:rotate(150deg) skew(50deg);-ms-transform:rotate(150deg) skew(50deg);-moz-transform:rotate(150deg) skew(50deg);transform:rotate(150deg) skew(50deg);}
.csstransforms .cn-wrapper li:nth-child(odd) a{background-color:#a11313;background-color:hsla(0,88%,63%,1);}
.csstransforms .cn-wrapper li:nth-child(even) a{background-color:#a61414;background-color:hsla(0,88%,65%,1);}
/* active style */
.csstransforms .cn-wrapper li.active a{background-color:#b31515;background-color:hsla(0,88%,70%,1);}
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,.csstransforms .cn-wrapper li:not(.active) a:active,.csstransforms .cn-wrapper li:not(.active) a:focus{background-color:#b31515;background-color:hsla(0,88%,70%,1);}
/* fallback */
.no-csstransforms .cn-button{display:none;}
.no-csstransforms .cn-wrapper li{position:static;float:left;font-size:1em;height:5em;width:5em;background-color:#eee;text-align:center;line-height:5em;}
.no-csstransforms .cn-wrapper li a{display:block;width:100%;height:100%;text-decoration:none;color:inherit;font-size:1.3em;border-right:1px solid #ddd;}
.no-csstransforms .cn-wrapper li a:last-child{border:none;}
.no-csstransforms .cn-wrapper li a:hover,.no-csstransforms .cn-wrapper li a:active,.no-csstransforms .cn-wrapper li a:focus{background-color:white;}
.no-csstransforms .cn-wrapper li.active a{background-color:#6F325C;color:#fff;}
.no-csstransforms .cn-wrapper{font-size:1em;height:5em;width:25.15em;bottom:0;margin-left:-12.5em;overflow:hidden;position:fixed;z-index:10;left:50%;border:1px solid #ddd;}
@media screen and (max-width:480px){.csstransforms .cn-wrapper{font-size:.68em;}
.cn-button{font-size:1em;}
.csstransforms .cn-wrapper li{font-size:1.52em;}
}
@media screen and (max-width:320px){.no-csstransforms .cn-wrapper{width:15.15px;margin-left:-7.5em;}
.no-csstransforms .cn-wrapper li{height:3em;width:3em;}
}

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)