@@ Line 1: / Line 1: @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html lang="en">
 <head>
-<title>js彩色拼图导航下拉菜单</title>
+<meta charset="utf-8">
+<title>纯CSS3实现灰白色下拉导航</title>
 <style>
-/*默认样式：直接定义元素的样式*/
+html, body, div, span, applet, object, iframe,
-body{text-align:center;font-size:12px;font-family:微软雅黑, Tahoma, Verdana, Arial;font-weight:normal;color:#333333;margin-top:0;background-color:#f5f5f5;}
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-dl, dt, dd, ul, li, ol, p, form, img{padding:0px;margin:0px;list-style:none;border:none;}
+a, abbr, acronym, address, big, cite, code,
-a, a:link, a:active{color:#3D81EE;text-decoration:none;}
+del, dfn, em, img, ins, kbd, q, s, samp,
-a:hover{color:#F90;text-decoration:none;}
+small, strike, strong, sub, sup, tt, var,
-a img{border:0;}
+b, u, i, center,
-#navmaster{margin:0 auto;width:620px;padding:0px;}
+dl, dt, dd, ol, ul, li,
-#navmaster ul{list-style-type:none;margin:auto;padding:0px;}
+fieldset, form, label, legend,
-#navmaster ul li{display:inline;float:left;padding:0px;cursor:pointer;font-weight:700;}
+table, caption, tbody, tfoot, thead, tr, th, td,
-#navmaster li a{font-size:16px;color:#454545;letter-spacing:2px;font-family:微软雅黑, Tahoma, Verdana, Arial;}
+article, aside, canvas, details, embed,
-#navmaster li a:hover{color:#fff;}
+figure, figcaption, footer, header, hgroup,
-#navmaster li.hover a{color:#fff;}
+menu, nav, output, ruby, section, summary,
-.M1Common{width:109px;height:58px;margin:29px 0px 0px 0px;}
+time, mark, audio, video {
-.M1{background:url(/jscss/demoimg/201402/menu_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico1.png");color:#000;}
+	margin: 0;
-.M1Hover{background:url(/jscss/demoimg/201402/menu_hover_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico1.png");color:#fff;}
+	padding: 0;
-.M2Common{width:138px;height:75px;margin:12px 0px 0px -23px;}
+	border: 0;
-.M2{background:url(/jscss/demoimg/201402/menu_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico2.png");}
+	font-size: 100%;
-.M2Hover{background:url(/jscss/demoimg/201402/menu_hover_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico2.png");}
+	font: inherit;
-.M3Common{width:150px;height:63px;margin:24px 0px 0px -36px;}
+	vertical-align: baseline;
-.M3{background:url(/jscss/demoimg/201402/menu_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico3.png");}
-.M3Hover{background:url(/jscss/demoimg/201402/menu_hover_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico3.png");}
-.M4Common{width:123px;height:54px;margin:33px 0px 0px -5px;}
-.M4{background:url(/jscss/demoimg/201402/menu_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico4.png");}
-.M4Hover{background:url(/jscss/demoimg/201402/menu_hover_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico4.png");}
-.M5Common{width:121px;height:68px;margin-top:19px;}
-.M5{background:url(/jscss/demoimg/201402/menu_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico5.png");}
-.M5Hover{background:url(/jscss/demoimg/201402/menu_hover_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico5.png");}
-/*只用于首页*/
-.downMenu ul{padding:0;margin:0;}
-.downMenu ul li{margin-top:0;}
-.downMenu ul li a{padding-bottom:0;padding-top:7px;margin:0;cursor:pointer;background:#e8ecf2;color:#205fa2! important;text-decoration:none;display: inline-block;height:22px;width:80px;border:1px #c2d3ed solid;border-top:none;}
-/*首页三角形样式*/
-.bordCss{height:0;width:0;overflow:hidden;font-size:0;line-height:0;border-color:transparent transparent transparent #FF9900;border-style:dashed dashed dashed solid;border-width:5px;border-right-width:0;display:inline-block;margin:2px 2px 0 0;}
-.bordCssGreen{border-color:transparent transparent transparent #26850d;margin:2px 3px 0 0;}
-.bordBottomCss{border-color:#FF9900 transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:5px;border-bottom-width:0;margin:0;}
-.bordBottomCssN{border-style:solid dashed dashed dashed;border-color:#333333 transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
-.bordBottomCssNF{border-style:solid dashed dashed dashed;border-color:#ffffff transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
-</style>
-<style type="text/css">
-body{background:#;}
-.downMenu ul li a{color:white!important;font-size:14px;height:24px;letter-spacing:4px;border-bottom:1px solid #fff;border-left:none;border-right:none;}
-#divDown2 ul li a{background:#EB8932;color:white!important;width:102px;}
-#divDown2 ul li a:hover{background:#F6C370;color:#000!important;}
-#divDown3 ul li a{background:#91BD41;color:white!important;width:78px;}
-#divDown3 ul li a:hover{background:#B8DA6A;color:#000!important;}
-#divDown4 ul li a{background:#FEA901;color:white!important;width:114px;}
-#divDown4 ul li a:hover{background:#FDE374;color:#000!important;}
-#divDown5 ul li a{background:#CA699C;color:white!important;width:115px;}
-#divDown5 ul li a:hover{background:#DDA6BD;color:#000!important;}
-</style>
-</head>
-<body>
-<div id="navmaster">
-	<ul>
-		<li id="ctl01_liIndex" class="M1Common M1">
-			<div style="padding-top:27px;"><a href="/">首&nbsp;页</a></div>
-		</li>
-		<li id="ctl01_liQCenter" class="M2Common M2">
-			<div style="padding-top:44px;"><a title="问卷中心" href="#">问卷中心</a><span class="bordCss bordBottomCssN"></span></div>
-		</li>
-		<li id="ctl01_liPrice" class="M3Common M3">
-			<div style="padding-top:32px;"><a style="padding:9px 0 0px 21px;" href="#">自助服务</a></div>
-		</li>
-		<li id="ctl01_liUseCase" class="M4Common M4">
-			<div style="padding-top:23px;"><a href="#">样本服务</a><span class="bordCss bordBottomCssN"></span></div>
-		</li>
-		<li id="ctl01_liCustomer" class="M5Common M5">
-			<div style="padding-top:37px;text-align:left;padding-left:14px;"><a style="" href="#">典型应用</a></div>
-		</li>
-	</ul>
-</div>
-<!--下拉菜单2开始-->
-<div id="divDown2" class="downMenu" pdleft="23" style="display:none;z-index:10999;position:absolute;">
-	<ul>
-		<li><a title="公开问卷" href="#" style="border-top:1px solid #fff;">公开问卷</a> </li>
-		<li><a title="问卷调查" href="#">问卷模板</a> </li>
-		<li><a title="有奖调查" href="#" target="_blank">有奖调查</a> </li>
-		<li><a title="热门测评" href="#">热门测评</a> </li>
-	</ul>
-</div>
-<!--下拉菜单2结束-->
-<!--下拉菜单4开始-->
-<div id="divDown4" class="downMenu" pdleft="5" style="display:none;z-index:10999;left:933px;position:absolute;top:130px;">
-	<ul>
-		<li><a title="服务介绍" href="#" style="border-top:1px solid #fff;">服务介绍</a> </li>
-		<li><a title="服务价格" href="#">服务价格</a></li>
-		<li><a title="需求&报价" href="#">需求&报价</a></li>
-		<li><a title="流程说明" href="#">流程说明</a></li>
-		<li><a title="流程说明" href="#">成功案例</a></li>
-	</ul>
-</div>
-<!--下拉菜单4结束-->
-<script type="text/javascript">
-var navmaster = document.getElementById("navmaster");
-var lis = navmaster.getElementsByTagName("li");
-var hrefas = navmaster.getElementsByTagName("a");
-for (var i = 0; i < lis.length; i++) {
-	lis[i].index = i + 1;
-	if (lis[i].className.toLowerCase().indexOf("hover") > -1) {
-		hoverLi(lis[i]);lis[i].isHover = true;
-	}
-	lis[i].onmouseover = function () {
-		hoverLi(this); sb_setmenunav('divDown' + this.index, true, this);
-	}
-	lis[i].onmouseout = function () {
-		sb_setmenunav('divDown' + this.index, false, this); unHoverLi(this);
-	}
-	lis[i].onclick = function () {
-		var href = this.getElementsByTagName("a")[0].href;
-		if (href)
-			window.location = href;
-	}
 }
-function getSpanByClassName(ele, className) {
+article, aside, details, figcaption, figure,
-	var spans = ele.getElementsByTagName("span");
+footer, header, hgroup, menu, nav, section {
-	for (var i = 0; i < spans.length; i++) {
+	display: block;
-		var cName = spans[i].className || "";
-		if (cName.toLowerCase() == className.toLowerCase()) {
-			return spans[i];
-		}
-	}
 }
-function hoverLi(obj) {
+body {
-	obj.className = "M" + obj.index + "Common M" + obj.index + "Hover";
+	line-height: 1;
-	var dda = obj.getElementsByTagName("a")[0];
-	dda.style.color = "#ffffff";
-	var span = getSpanByClassName(obj, "bordCss bordBottomCssN") || obj.spanCursor;
-	if (span) {
-		span.className = "bordCss bordBottomCssNF";
-		obj.spanCursor = span;
-	}
 }
-function unHoverLi(obj) {
+ol, ul {
-	if (!obj.isHover) {
+	list-style: none;
-		obj.className = "M" + obj.index + "Common M" + obj.index;
-		var dda = obj.getElementsByTagName("a")[0];
-		dda.style.color = "";
-		if (obj.spanCursor) obj.spanCursor.className = "bordCss bordBottomCssN";
-	}
 }
-function openwindowSup(url, name, iWidth, iHeight) {
+blockquote, q {
-	var url;//转向网页的地址;
+	quotes: none;
-	var name;//网页名称，可为空;
-	var iWidth;//弹出窗口的宽度;
-	var iHeight;//弹出窗口的高度;
-	var iTop = (window.screen.availHeight + 30 - iHeight) / 2;//获得窗口的垂直位置;
-	var iLeft = (window.screen.availWidth + 208 - iWidth) / 2;//获得窗口的水平位置;
-	var param = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',border=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=no,status=no';
-	var o = window.open(url, name, param);
-	o.focus();
 }
-function getCoordsNav(el) {
+blockquote:before, blockquote:after,
-	var box = el.getBoundingClientRect(),
+q:before, q:after {
-	doc = el.ownerDocument,
+	content: '';
-	body = doc.body,
+	content: none;
-	html = doc.documentElement,
-	clientTop = html.clientTop || body.clientTop || 0,
-	clientLeft = html.clientLeft || body.clientLeft || 0,
-	top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
-	left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
-	return { 'top': top, 'left': left };
-};
-function sb_setmenunav(name, vis, obj) {
-	var d = document.getElementById(name); //要显示隐藏的div
-	if (!d) return;
-	var padLeft = parseInt(d.getAttribute("pdLeft") || 0);
-	if (vis) {
-		if (d.timeArray) {
-			window.clearTimeout(d.timeArray);
-			d.timeArray = 0;
-		}
-		d.style.display = "block";
-		if (!d.onmouseover) {
-			d.onmouseover = function () {
-				sb_setmenunav(name, true);
-			}
-			d.onmouseout = function () {
-				sb_setmenunav(name, false);
-				unHoverLi(obj);
-			}
-		}
-		if (obj) {
-			var objp = obj;
-			if (objp.parentNode.tagName.toLowerCase() == "li")
-				objp = obj.parentNode;
-			var xy = getCoordsNav(objp);
-			var xias = xy.left;
-			var yias = xy.top + objp.offsetHeight;
-			padLeft = padLeft || 0;
-			d.style.left = xias + padLeft + "px";
-			d.style.top = yias + "px"; //;
-		}
-	}
-	if (obj && obj.tagName.toLowerCase() == "li") {
-		d.needSaveClass = obj;
-		d.prevClass = obj.className;
-	}
-	else if (d.needSaveClass) {
-		hoverLi(d.needSaveClass);
-	}
-	if (!vis) {//延时隐藏，可以移动上去
-		if (d.spanCursor) d.spanCursor.className = "bordCss bordBottomCssN";
-		d.timeArray = window.setTimeout(function () {
-			d.style.display = "none"; d.style.height = "";
-		}, 100);
-	}
 }
-</script>
+table {
-<div style="text-align:center;clear:both"><br>
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+body {
+	background: url('/jscss/demoimg/201402/denim.png');
+	font-family: 'Droid Sans', sans-serif;;
+}
+.clearfix {
+	clear: both;
+}
+.wrap {
+	width: 940px;
+	margin: 4em auto;
+}
+nav {
+	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
+	background-image: linear-gradient(#fff, #ccc);
+	border-radius: 6px;
+	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
+	padding: 0 10px;
+	position: relative;
+}
+.menu li {
+	float: left;
+	position: relative;
+}
+.menu li a {
+	color: #444;
+	display: block;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 6px 12px;
+	margin: 8px 8px;
+	vertical-align: middle;
+	text-decoration: none;
+}
+.menu li a:hover {
+	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
+	background-image: linear-gradient(#ededed, #fff);
+	border-radius: 12px;
+	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
+	color: #222;
+}
+/* Dropdown styles */
+.menu ul {
+	position: absolute;
+	left: -9999px;
+	list-style: none;
+	opacity: 0;
+	transition: opacity 1s ease;
+}
+.menu ul li {
+	float: none;
+}
+.menu ul a {
+	white-space: nowrap;
+}
+.menu li:hover ul {
+	background: rgba(255,255,255,0.7);
+	border-radius: 0 0 6px 6px;
+	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
+	left: 5px;
+	opacity: 1;
+}
+.menu li:hover a {
+	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
+	background-image: linear-gradient(#ccc, #ededed);
+	border-radius: 12px;
+	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
+	color: #222;
+}
+.menu li:hover ul a {
+	background: none;
+	border-radius: 0;
+	box-shadow: none;
+}
+.menu li:hover ul li a:hover {
+	background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
+	background-image: linear-gradient(#ededed, #fff);
+	border-radius: 12px;
+	box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
+}
+</style>
+</head>
+<body>
+<div class="wrap">
+	<nav>
+		<ul class="menu">
+			<li><a href="#"><span class="iconic home"></span> Home</a></li>
+			<li><a href="#"><span class="iconic plus-alt"></span> About</a>
+				<ul>
+					<li><a href="#">Company History</a></li>
+					<li><a href="#">Meet the team</a></li>
+				</ul>
+			</li>
+			<li><a href="#"><span class="iconic magnifying-glass"></span> Services</a>
+				<ul>
+					<li><a href="#">Web Design</a></li>
+					<li><a href="#">App Development</a></li>
+					<li><a href="#">Email Campaigns</a></li>
+					<li><a href="#">Copyrighting</a></li>
+				</ul>
+			</li>
+			<li><a href="#"><span class="iconic map-pin"></span> Products</a>
+				<ul>
+					<li><a href="#">Widget One</a></li>
+					<li><a href="#">Widget Two</a></li>
+					<li><a href="#">Web App Three</a></li>
+					<li><a href="#">Web App Four</a></li>
+					<li><a href="#">Crazy Products</a></li>
+					<li><a href="#">iPhone Apps</a></li>
+				</ul>
+			</li>
+			<li><a href="#"><span class="iconic mail"></span> Contact</a>
+				<ul>
+					<li><a href="#">Contact Us</a></li>
+					<li><a href="#">Directions</a></li>
+				</ul>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</nav>
+	</div>
+<div style="text-align:center;clear:both">
 </div>
 </body>
 </html>

Team:LZU-China/tempfortest

From 2014.igem.org

Revision as of 03:32, 8 September 2014