CSS3实现Windown8风格的方格导航菜单

 首页 > 网页特效 > 层和布局 > CSS3实现Windown8风格的方格导航菜单
CSS3实现Windown8风格的方格导航菜单

 2018-07-04  290  收藏  0 赞一个  0 真差劲  0 去评论
<!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=utf-8" />
<title>jquery+css3交互式WIN 8风格导航菜单</title>
<style>
/* Download by http://www.codefans.net */
#about {
	color: #999;
	text-align: center;
	font: 0.9em Arial, Helvetica;
}
#about a {
	color: #777;
}
.menu {
	width: 620px;
	margin: 100px auto;
	padding: 15px;
	list-style: none;
	counter-reset: li;
	background: #eee;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.menu:before, .menu:after {
	content: "";
	display: table;
}
.menu:after {
	clear: both;
}
.menu {
	zoom:1;
}
/* -------------------------------- */        

.menu li {
	position: relative;
	float: left;
	cursor: pointer;
	height: 120px;
	width: 200px;
	margin: 10px 0 0 10px;
	color: #fff;
}
.menu li:hover, .menu li:focus {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}
.menu .cover {
	z-index: 2;
}
.menu .cover:focus {
	outline: 0;
}

/* -------------------------------- */

.menu li::after {
 content: counter(li);
 counter-increment: li;
 font: italic bold 10px serif, georgia;
 position: absolute;
 color: rgba(255, 255, 255, .1);
 opacity: 0;
 -webkit-transition: all .2s ease-out;
 -moz-transition: all .2s ease-out;
 -ms-transition: all .2s ease-out;
 -o-transition: all .2s ease-out;
 transition: all .2s ease-out;
}
 .menu li:hover::after, .menu li:focus::after {
 font-size: 100px;
 opacity: 1;
}
 .menu .cover::after {
 z-index: -1;
}

/* -------------------------------- */       

.menu li:nth-child(1), .menu li:nth-child(2), .menu li:nth-child(3) {
 margin-top: 0;
}
 .menu li:nth-child(1), .menu li:nth-child(4), .menu li:nth-child(7) {
 margin-left: 0;
}

/* -------------------------------- */       

.menu li:nth-child(1), .menu li:nth-child(1) .content, .menu li:nth-child(1) .close {
 background-color: #2c618f;
}
 .menu li:nth-child(2), .menu li:nth-child(2) .content, .menu li:nth-child(2) .close {
 background-color: #91ab31;
}
 .menu li:nth-child(3), .menu li:nth-child(3) .content, .menu li:nth-child(3) .close {
 background-color: #714a28;
}
 .menu li:nth-child(4), .menu li:nth-child(4) .content, .menu li:nth-child(4) .close {
 background-color: #e58600;
}
 .menu li:nth-child(5), .menu li:nth-child(5) .content, .menu li:nth-child(5) .close {
 background-color: #c33a00;
}
 .menu li:nth-child(6), .menu li:nth-child(6) .content, .menu li:nth-child(6) .close {
 background-color: #7f5dac;
}
 .menu li:nth-child(7), .menu li:nth-child(7) .content, .menu li:nth-child(7) .close {
 background-color: #5672b7;
}
 .menu li:nth-child(8), .menu li:nth-child(8) .content, .menu li:nth-child(8) .close {
 background-color: #69003f;
}
 .menu li:nth-child(9), .menu li:nth-child(9) .content, .menu li:nth-child(9) .close {
 background-color: #393043;
}
/* -------------------------------- */

.menu .content {
	opacity: 0;
	display: none\9;
	overflow: hidden;
	font: 12px Arial, Helvetica;
	position: absolute;
	height: 120px;
	width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
}
.menu .expanded {
	opacity: .95;
	display: block\9;
	overflow: visible;
	padding: 40px;
	height: 300px;
	width: 540px; /* Cover the entire area */
}
 .menu li:nth-child(3n) .content { /* 3,6,9 */
 right: 0;
}
 .menu li:nth-child(3n-1) .expanded { /* 2,5,8 */
 left: 50%;
 margin-left: -310px;
}
 .menu li:nth-child(7) .content, /* 7,8,9 */ .menu li:nth-child(8) .content, .menu li:nth-child(9) .content {
 bottom: 0;
}
 .menu li:nth-child(4) .expanded, /* 4,5,6 */ .menu li:nth-child(5) .expanded, .menu li:nth-child(6) .expanded {
 margin-top: -190px;
 top: 50%;
}
/* -------------------------------- */    

.menu .title {
	position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
	font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
	opacity: .2;
}
.menu li:hover .title {
	opacity: .7;
}
/* -------------------------------- */

.menu .close {
	display: none;
	border: 5px solid #fff;
	color: #fff;
	cursor: pointer;
	height: 40px;
	width: 40px;
	font: bold 20px/40px arial, helvetica;
	position: absolute;
	text-align: center;
	top: -20px;
	right: -20px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
}
.menu .cover .close {
	display: block;
}
</style>
<script src="http://www.aizhanzhe.com/Public/jquery-1.7.2.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]> 
		<script>
		(function(win) {
	if (/*@cc_on!@*/true) return;
	var doc = document;
	var root = doc.documentElement;
	var xhr = getXHRObject();
	var ieVersion = /MSIE (\d+)/.exec(navigator.userAgent)[1];
	if (doc.compatMode != 'CSS1Compat' || ieVersion<6 || ieVersion>8 || !xhr) {
		return;
	}
	var selectorEngines = {
		"NW"								: "*.Dom.select",
		"MooTools"							: "$$",
		"DOMAssistant"						: "*.$", 
		"Prototype"							: "$$",
		"YAHOO"								: "*.util.Selector.query",
		"Sizzle"							: "*", 
		"jQuery"							: "*",
		"dojo"								: "*.query"
	};

	var selectorMethod;
	var enabledWatchers 					= [];     // array of :enabled/:disabled elements to poll
	var ie6PatchID 							= 0;      // used to solve ie6's multiple class bug
	var patchIE6MultipleClasses				= true;   // if true adds class bloat to ie6
	var namespace 							= "slvzr";
	
	// Stylesheet parsing regexp's
	var RE_COMMENT							= /(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g;
	var RE_IMPORT							= /@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g;
	var RE_ASSET_URL 						= /\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g;
	var RE_PSEUDO_STRUCTURAL				= /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/;
	var RE_PSEUDO_ELEMENTS					= /:(:first-(?:line|letter))/g;
	var RE_SELECTOR_GROUP					= /(^|})\s*([^\{]*?[\[:][^{]+)/g;
	var RE_SELECTOR_PARSE					= /([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g; 
	var RE_LIBRARY_INCOMPATIBLE_PSEUDOS		= /(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g;
	var RE_PATCH_CLASS_NAME_REPLACE			= /[^\w-]/g;
	
	// HTML UI element regexp's
	var RE_INPUT_ELEMENTS					= /^(INPUT|SELECT|TEXTAREA|BUTTON)$/;
	var RE_INPUT_CHECKABLE_TYPES			= /^(checkbox|radio)$/;

	// Broken attribute selector implementations (IE7/8 native [^=""], [$=""] and [*=""])
	var BROKEN_ATTR_IMPLEMENTATIONS			= ieVersion>6 ? /[\$\^*]=(['"])\1/ : null;

	// Whitespace normalization regexp's
	var RE_TIDY_TRAILING_WHITESPACE			= /([(\[+~])\s+/g;
	var RE_TIDY_LEADING_WHITESPACE			= /\s+([)\]+~])/g;
	var RE_TIDY_CONSECUTIVE_WHITESPACE		= /\s+/g;
	var RE_TIDY_TRIM_WHITESPACE				= /^\s*((?:[\S\s]*\S)?)\s*$/;
	
	// String constants
	var EMPTY_STRING						= "";
	var SPACE_STRING						= " ";
	var PLACEHOLDER_STRING					= "$1";
	function patchStyleSheet( cssText ) {
		return cssText.replace(RE_PSEUDO_ELEMENTS, PLACEHOLDER_STRING).
			replace(RE_SELECTOR_GROUP, function(m, prefix, selectorText) {	
    			var selectorGroups = selectorText.split(",");
    			for (var c = 0, cs = selectorGroups.length; c < cs; c++) {
    				var selector = normalizeSelectorWhitespace(selectorGroups[c]) + SPACE_STRING;
    				var patches = [];
    				selectorGroups[c] = selector.replace(RE_SELECTOR_PARSE, 
    					function(match, combinator, pseudo, attribute, index) {
    						if (combinator) {
    							if (patches.length>0) {
    								applyPatches( selector.substring(0, index), patches );
    								patches = [];
    							}
    							return combinator;
    						}		
    						else {
    							var patch = (pseudo) ? patchPseudoClass( pseudo ) : patchAttribute( attribute );
    							if (patch) {
    								patches.push(patch);
    								return "." + patch.className;
    							}
    							return match;
    						}
    					}
    				);
    			}
    			return prefix + selectorGroups.join(",");
    		});
	};
	function patchAttribute( attr ) {
		return (!BROKEN_ATTR_IMPLEMENTATIONS || BROKEN_ATTR_IMPLEMENTATIONS.test(attr)) ? 
			{ className: createClassName(attr), applyClass: true } : null;
	};
	function patchPseudoClass( pseudo ) {
		var applyClass = true;
		var className = createClassName(pseudo.slice(1));
		var isNegated = pseudo.substring(0, 5) == ":not(";
		var activateEventName;
		var deactivateEventName;
		if (isNegated) {
			pseudo = pseudo.slice(5, -1);
		}
		var bracketIndex = pseudo.indexOf("(")
		if (bracketIndex > -1) {
			pseudo = pseudo.substring(0, bracketIndex);
		}		
		
		// check we're still dealing with a pseudo-class
		if (pseudo.charAt(0) == ":") {
			switch (pseudo.slice(1)) {

				case "root":
					applyClass = function(e) {
						return isNegated ? e != root : e == root;
					}
					break;

				case "target":
					// :target is only supported in IE8
					if (ieVersion == 8) {
						applyClass = function(e) {
							var handler = function() { 
								var hash = location.hash;
								var hashID = hash.slice(1);
								return isNegated ? (hash == EMPTY_STRING || e.id != hashID) : (hash != EMPTY_STRING && e.id == hashID);
							};
							addEvent( win, "hashchange", function() {
								toggleElementClass(e, className, handler());
							})
							return handler();
						}
						break;
					}
					return false;
				
				case "checked":
					applyClass = function(e) { 
						if (RE_INPUT_CHECKABLE_TYPES.test(e.type)) {
							addEvent( e, "propertychange", function() {
								if (event.propertyName == "checked") {
									toggleElementClass( e, className, e.checked !== isNegated );
								} 							
							})
						}
						return e.checked !== isNegated;
					}
					break;
					
				case "disabled":
					isNegated = !isNegated;

				case "enabled":
					applyClass = function(e) { 
						if (RE_INPUT_ELEMENTS.test(e.tagName)) {
							addEvent( e, "propertychange", function() {
								if (event.propertyName == "$disabled") {
									toggleElementClass( e, className, e.$disabled === isNegated );
								} 
							});
							enabledWatchers.push(e);
							e.$disabled = e.disabled;
							return e.disabled === isNegated;
						}
						return pseudo == ":enabled" ? isNegated : !isNegated;
					}
					break;
					
				case "focus":
					activateEventName = "focus";
					deactivateEventName = "blur";
								
				case "hover":
					if (!activateEventName) {
						activateEventName = "mouseenter";
						deactivateEventName = "mouseleave";
					}
					applyClass = function(e) {
						addEvent( e, isNegated ? deactivateEventName : activateEventName, function() {
							toggleElementClass( e, className, true );
						})
						addEvent( e, isNegated ? activateEventName : deactivateEventName, function() {
							toggleElementClass( e, className, false );
						})
						return isNegated;
					}
					break;
				default:
					if (!RE_PSEUDO_STRUCTURAL.test(pseudo)) {
						return false;
					}
					break;
			}
		}
		return { className: className, applyClass: applyClass };
	};
	function applyPatches(selectorText, patches) {
		var elms;
		var domSelectorText = selectorText.replace(RE_LIBRARY_INCOMPATIBLE_PSEUDOS, EMPTY_STRING);
		if (domSelectorText == EMPTY_STRING || domSelectorText.charAt(domSelectorText.length - 1) == SPACE_STRING) {
			domSelectorText += "*";
		}
		try {
			elms = selectorMethod( domSelectorText );
		} catch (ex) {
			// #DEBUG_START
			log( "Selector '" + selectorText + "' threw exception '" + ex + "'" );
			// #DEBUG_END
		}


		if (elms) {
			for (var d = 0, dl = elms.length; d < dl; d++) {	
				var elm = elms[d];
				var cssClasses = elm.className;
				for (var f = 0, fl = patches.length; f < fl; f++) {
					var patch = patches[f];
					
					if (!hasPatch(elm, patch)) {
						if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {
							cssClasses = toggleClass(cssClasses, patch.className, true );
						}
					}
				}
				elm.className = cssClasses;
			}
		}
	};
	function hasPatch( elm, patch ) {
		return new RegExp("(^|\\s)" + patch.className + "(\\s|$)").test(elm.className);
	};
	function createClassName( className ) {
		return namespace + "-" + ((ieVersion == 6 && patchIE6MultipleClasses) ?
			ie6PatchID++
		:
			className.replace(RE_PATCH_CLASS_NAME_REPLACE, function(a) { return a.charCodeAt(0) }));
	};
	function log( message ) {
		if (win.console) {
			win.console.log(message);
		}
	};
	function trim( text ) {
		return text.replace(RE_TIDY_TRIM_WHITESPACE, PLACEHOLDER_STRING);
	};
	function normalizeWhitespace( text ) {
		return trim(text).replace(RE_TIDY_CONSECUTIVE_WHITESPACE, SPACE_STRING);
	};
	function normalizeSelectorWhitespace( selectorText ) {
		return normalizeWhitespace(selectorText.
			replace(RE_TIDY_TRAILING_WHITESPACE, PLACEHOLDER_STRING).
			replace(RE_TIDY_LEADING_WHITESPACE, PLACEHOLDER_STRING)
		);
	};
	function toggleElementClass( elm, className, on ) {
		var oldClassName = elm.className;
		var newClassName = toggleClass(oldClassName, className, on);
		if (newClassName != oldClassName) {
			elm.className = newClassName;
			elm.parentNode.className += EMPTY_STRING;
		}
	};
	function toggleClass( classList, className, on ) {
		var re = RegExp("(^|\\s)" + className + "(\\s|$)");
		var classExists = re.test(classList);
		if (on) {
			return classExists ? classList : classList + SPACE_STRING + className;
		} else {
			return classExists ? trim(classList.replace(re, PLACEHOLDER_STRING)) : classList;
		}
	};
	
	// --[ addEvent() ]-----------------------------------------------------
	function addEvent(elm, eventName, eventHandler) {
		elm.attachEvent("on" + eventName, eventHandler);
	};

	// --[ getXHRObject() ]-------------------------------------------------
	function getXHRObject()
	{
		if (win.XMLHttpRequest) {
			return new XMLHttpRequest;
		}
		try	{ 
			return new ActiveXObject('Microsoft.XMLHTTP');
		} catch(e) { 
			return null;
		}
	};
	function loadStyleSheet( url ) {
		xhr.open("GET", url, false);
		xhr.send();
		return (xhr.status==200) ? xhr.responseText : EMPTY_STRING;	
	};
	function resolveUrl( url, contextUrl ) {
	
		function getProtocolAndHost( url ) {
			return url.substring(0, url.indexOf("/", 8));
		};
		if (/^https?:\/\//i.test(url)) {
			return getProtocolAndHost(contextUrl) == getProtocolAndHost(url) ? url : null;
		}
		if (url.charAt(0)=="/")	{
			return getProtocolAndHost(contextUrl) + url;
		}
		var contextUrlPath = contextUrl.split(/[?#]/)[0]; // ignore query string in the contextUrl	
		if (url.charAt(0) != "?" && contextUrlPath.charAt(contextUrlPath.length - 1) != "/") {
			contextUrlPath = contextUrlPath.substring(0, contextUrlPath.lastIndexOf("/") + 1);
		}
		
		return contextUrlPath + url;
	};
	function parseStyleSheet( url ) {
		if (url) {
			return loadStyleSheet(url).replace(RE_COMMENT, EMPTY_STRING).
			replace(RE_IMPORT, function( match, quoteChar, importUrl, quoteChar2, importUrl2 ) { 
				return parseStyleSheet(resolveUrl(importUrl || importUrl2, url));
			}).
			replace(RE_ASSET_URL, function( match, quoteChar, assetUrl ) { 
				quoteChar = quoteChar || EMPTY_STRING;
				return " url(" + quoteChar + resolveUrl(assetUrl, url) + quoteChar + ") "; 
			});
		}
		return EMPTY_STRING;
	};
	
	// --[ init() ]---------------------------------------------------------
	function init() {
		// honour the <base> tag
		var url, stylesheet;
		var baseTags = doc.getElementsByTagName("BASE");
		var baseUrl = (baseTags.length > 0) ? baseTags[0].href : doc.location.href;
		for (var c = 0; c < doc.styleSheets.length; c++) {
			stylesheet = doc.styleSheets[c]
			if (stylesheet.href != EMPTY_STRING) {
				url = resolveUrl(stylesheet.href, baseUrl);
				if (url) {
					stylesheet.cssText = patchStyleSheet( parseStyleSheet( url ) );
				}
			}
		}
		if (enabledWatchers.length > 0) {
			setInterval( function() {
				for (var c = 0, cl = enabledWatchers.length; c < cl; c++) {
					var e = enabledWatchers[c];
					if (e.disabled !== e.$disabled) {
						if (e.disabled) {
							e.disabled = false;
							e.$disabled = true;
							e.disabled = true;
						}
						else {
							e.$disabled = e.disabled;
						}
					}
				}
			},250)
		}
	};
	ContentLoaded(win, function() {
		// Determine the "best fit" selector engine
		for (var engine in selectorEngines) {
			var members, member, context = win;
			if (win[engine]) {
				members = selectorEngines[engine].replace("*", engine).split(".");
				while ((member = members.shift()) && (context = context[member])) {}
				if (typeof context == "function") {
					selectorMethod = context;
					init();
					return;
				}
			}
		}
	});
	function ContentLoaded(win, fn) {

		var done = false, top = true,
		init = function(e) {
			if (e.type == "readystatechange" && doc.readyState != "complete") return;
			(e.type == "load" ? win : doc).detachEvent("on" + e.type, init, false);
			if (!done && (done = true)) fn.call(win, e.type || e);
		},
		poll = function() {
			try { root.doScroll("left"); } catch(e) { setTimeout(poll, 50); return; }
			init('poll');
		};

		if (doc.readyState == "complete") fn.call(win, EMPTY_STRING);
		else {
			if (doc.createEventObject && root.doScroll) {
				try { top = !win.frameElement; } catch(e) { }
				if (top) poll();
			}
			addEvent(doc,"readystatechange", init);
			addEvent(win,"load", init);
		}
	};
})(this);
		</script>
	<![endif]-->
</head>
<body>
<ul class="menu">
  <li tabindex="1"> <span class="title">One</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Two</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Three</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Four</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Five</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Six</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Seven</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Eight</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
  <li tabindex="1"> <span class="title">Nine</span>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
  </li>
</ul>
<script>
	  (function(){
	  
		// Append a close trigger for each block
		$('.menu .content').append('<span class="close">x</span>');		
		// Show window
		function showContent(elem){
			hideContent();
			elem.find('.content').addClass('expanded');
			elem.addClass('cover');	
		}
		// Reset all
		function hideContent(){
			$('.menu .content').removeClass('expanded');
			$('.menu li').removeClass('cover');		
		}
		
		// When a li is clicked, show its content window and position it above all
		$('.menu li').click(function() {
			showContent($(this));
		});		
		// When tabbing, show its content window using ENTER key
		$('.menu li').keypress(function(e) {
			if (e.keyCode == 13) { 
				showContent($(this));
			}
		});

		// When right upper close element is clicked  - reset all
		$('.menu .close').click(function(e) {
			e.stopPropagation();
			hideContent();
		});		
		// Also, when ESC key is pressed - reset all
		$(document).keyup(function(e) {
			if (e.keyCode == 27) { 
			  hideContent();
			}
		});
		
	  })();
	</script>

	<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>
运行代码 全选代码 复制代码 清除代码 恢复代码
预览图片
CSS3+jQuery实现Win8风格的方格状菜单，注意，IE6到IE8不支持本代码，最好使用火狐测试看效果。可看到方格状的菜单，如果鼠标移上菜单并单击，该菜单项会放大显示至整个菜单区域，除了CSS3代码外，本效果还加入了jQuery和Js代码进行控制，代码稍嫌繁杂。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。
三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！
四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.
五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源，请注明转载来自并附带链接
七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com
 大家评论
 站长推荐
 点击排行