jquery css3交互式菜单电视墙特效代码

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

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

以下是 jquery css3交互式菜单电视墙特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>	
	<title>Interactive menu with CSS3 & jQuery</title>
	<link rel="stylesheet" href="style.css">	
	<script src="jquery.min.js"></script>
	<!--[if (gte IE 6)&(lte IE 8)]> 
		<script src="selectivizr.js"></script>
	<![endif]-->
	<style>
		/* Demo page only */

		#about{
		    color: #999;
		    text-align: center;
		    font: 0.9em Arial, Helvetica;
		}

		#about a{
		    color: #777;
		}		
	</style>
</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>

	<!-- BSA AdPacks code -->
	<script>
	  (function(){
		var bsa = document.createElement('script');
		   bsa.async = true;
		   bsa.src = 'http://www.red-team-design.com/js/adpacks-demo.js';
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
	  })();
	</script> 

</body>
</html>

JS代码(selectivizr.js):

/*selectivizr v1.0.2 - (c) Keith Clark,freely distributable under the termsof the MIT license.selectivizr.com*/
/*Notes about this source----------------------- * The #DEBUG_START and #DEBUG_END comments are used to mark blocks of code that will be removed prior to building a final release version (using a pre-compression script)References:----------- * CSS Syntax:http://www.w3.org/TR/2003/WD-css3-syntax-20030813/#style * Selectors:http://www.w3.org/TR/css3-selectors/#selectors * IE Compatability:http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx * W3C Selector Tests:http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/*/
(function(win){
	// If browser isn't IE,then stop execution! This handles the script// being loaded by non IE browsers because the developer didn't use// conditional comments.if (/*@cc_on!@*/
true) return;
	// =========================== Init Objects ============================var doc = document;
	var root = doc.documentElement;
	var xhr = getXHRObject();
	var ieVersion = /MSIE (\d+)/.exec(navigator.userAgent)[1];
	// If were not in standards mode,IE is too old / new or we can't create// an XMLHttpRequest object then we should get out now.if (doc.compatMode != 'CSS1Compat' || ieVersion<6 || ieVersion>8 || !xhr){
	return;
}
// ========================= Common Objects ============================// Compatiable selector engines in order of CSS3 support. Note:'*' is// a placholder for the object key name. (basically,crude compression)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 pollvar ie6PatchID= 0;
	// used to solve ie6's multiple class bugvar patchIE6MultipleClasses= true;
	// if true adds class bloat to ie6var namespace= "slvzr";
	// Stylesheet parsing regexp'svar 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'svar 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'svar 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 constantsvar EMPTY_STRING= "";
	var SPACE_STRING= " ";
	var PLACEHOLDER_STRING= "$1";
	// =========================== Patching ================================// --[ patchStyleSheet() ]----------------------------------------------// Scans the passed cssText for selectors that require emulation and// creates one or more patches for each matched selector.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(",");
}
);
}
;
	// --[ patchAttribute() ]-----------------------------------------------// returns a patch for an attribute selector.function patchAttribute( attr ){
	return (!BROKEN_ATTR_IMPLEMENTATIONS || BROKEN_ATTR_IMPLEMENTATIONS.test(attr)) ?{
	className:createClassName(attr),applyClass:true}
:null;
}
;
	// --[ patchPseudoClass() ]---------------------------------------------// returns a patch for a pseudo-classfunction patchPseudoClass( pseudo ){
	var applyClass = true;
	var className = createClassName(pseudo.slice(1));
	var isNegated = pseudo.substring(0,5) == ":not(";
	var activateEventName;
	var deactivateEventName;
	// if negated,remove:not()if (isNegated){
	pseudo = pseudo.slice(5,-1);
}
// bracket contents are irrelevant - remove themvar bracketIndex = pseudo.indexOf("(")if (bracketIndex > -1){
	pseudo = pseudo.substring(0,bracketIndex);
}
// check we're still dealing with a pseudo-classif (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 IE8if (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;
	// everything elsedefault:// If we don't support this pseudo-class don't create// a patch for itif (!RE_PSEUDO_STRUCTURAL.test(pseudo)){
	return false;
}
break;
}
}
return{
	className:className,applyClass:applyClass}
;
}
;
	// --[ applyPatches() ]-------------------------------------------------// uses the passed selector text to find DOM nodes and patch themfunction applyPatches(selectorText,patches){
	var elms;
	// Although some selector libraries can find:checked:enabled etc.// we need to find all elements that could have that state because// it can be changed by the user.var domSelectorText = selectorText.replace(RE_LIBRARY_INCOMPATIBLE_PSEUDOS,EMPTY_STRING);
	// If the dom selector equates to an empty string or ends with// whitespace then we need to append a universal selector (*) to it.if (domSelectorText == EMPTY_STRING || domSelectorText.charAt(domSelectorText.length - 1) == SPACE_STRING){
	domSelectorText += "*";
}
// Ensure we catch errors from the selector librarytry{
	elms = selectorMethod( domSelectorText );
}
catch (ex){
	// #DEBUG_STARTlog( "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;
}
}
}
;
	// --[ hasPatch() ]-----------------------------------------------------// checks for the exsistence of a patch on an elementfunction hasPatch( elm,patch ){
	return new RegExp("(^|\\s)" + patch.className + "(\\s|$)").test(elm.className);
}
;
	// =========================== Utility =================================function createClassName( className ){
	return namespace + "-" + ((ieVersion == 6 && patchIE6MultipleClasses) ?ie6PatchID++:className.replace(RE_PATCH_CLASS_NAME_REPLACE,function(a){
	return a.charCodeAt(0)}
));
}
;
	// --[ log() ]----------------------------------------------------------// #DEBUG_STARTfunction log( message ){
	if (win.console){
	win.console.log(message);
}
}
;
	// #DEBUG_END// --[ trim() ]---------------------------------------------------------// removes leading,trailing whitespace from a stringfunction trim( text ){
	return text.replace(RE_TIDY_TRIM_WHITESPACE,PLACEHOLDER_STRING);
}
;
	// --[ normalizeWhitespace() ]------------------------------------------// removes leading,trailing and consecutive whitespace from a stringfunction normalizeWhitespace( text ){
	return trim(text).replace(RE_TIDY_CONSECUTIVE_WHITESPACE,SPACE_STRING);
}
;
	// --[ normalizeSelectorWhitespace() ]----------------------------------// tidies whitespace around selector brackets and combinatorsfunction normalizeSelectorWhitespace( selectorText ){
	return normalizeWhitespace(selectorText.replace(RE_TIDY_TRAILING_WHITESPACE,PLACEHOLDER_STRING).replace(RE_TIDY_LEADING_WHITESPACE,PLACEHOLDER_STRING));
}
;
	// --[ toggleElementClass() ]-------------------------------------------// toggles a single className on an elementfunction 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;
}
}
;
	// --[ toggleClass() ]--------------------------------------------------// adds / removes a className from a string of classNames. Used to// manage multiple class changes without forcing a DOM redrawfunction 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;
}
}
;
	// --[ loadStyleSheet() ]-----------------------------------------------function loadStyleSheet( url ){
	xhr.open("GET",url,false);
	xhr.send();
	return (xhr.status==200) ? xhr.responseText:EMPTY_STRING;
}
;
	// --[ resolveUrl() ]---------------------------------------------------// Converts a URL fragment to a fully qualified URL using the specified// context URL. Returns null if same-origin policy is brokenfunction resolveUrl( url,contextUrl ){
	function getProtocolAndHost( url ){
	return url.substring(0,url.indexOf("/",8));
}
;
	// absolute pathif (/^https?:\/\//i.test(url)){
	return getProtocolAndHost(contextUrl) == getProtocolAndHost(url) ? url:null;
}
// root-relative pathif (url.charAt(0)=="/"){
	return getProtocolAndHost(contextUrl) + url;
}
// relative pathvar contextUrlPath = contextUrl.split(/[?#]/)[0];
	// ignore query string in the contextUrlif (url.charAt(0) != "?" && contextUrlPath.charAt(contextUrlPath.length - 1) != "/"){
	contextUrlPath = contextUrlPath.substring(0,contextUrlPath.lastIndexOf("/") + 1);
}
return contextUrlPath + url;
}
;
	// --[ parseStyleSheet() ]----------------------------------------------// Downloads the stylesheet specified by the URL,removes it's comments// and recursivly replaces @import rules with their contents,ultimately// returning the full cssText.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> tagvar url,stylesheet;
	var baseTags = doc.getElementsByTagName("BASE");
	var baseUrl = (baseTags.length > 0) ? baseTags[0].href:doc.location.href;
	/* Note:This code prevents IE from freezing / crashing when using@font-face .eot files but it modifies the <head> tag and couldtrigger the IE stylesheet limit. It will also cause FOUC issues.If you choose to use it,make sure you comment out the for loopdirectly below this comment.var head = doc.getElementsByTagName("head")[0];
	for (var c=doc.styleSheets.length-1;
	c>=0;
	c--){
	stylesheet = doc.styleSheets[c]head.appendChild(doc.createElement("style"))var patchedStylesheet = doc.styleSheets[doc.styleSheets.length-1];
	if (stylesheet.href != EMPTY_STRING){
	url = resolveUrl(stylesheet.href,baseUrl)if (url){
	patchedStylesheet.cssText = patchStyleSheet( parseStyleSheet( url ) )stylesheet.disabled = truesetTimeout( function (){
	stylesheet.owningElement.parentNode.removeChild(stylesheet.owningElement)}
)}
}
}
*/
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 ) );
}
}
}
//:enabled &:disabled polling script (since we can't hook// onpropertychange event when an element is disabled)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)}
}
;
	// Bind selectivizr to the ContentLoaded event.ContentLoaded(win,function(){
	// Determine the "best fit" selector enginefor (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;
}
}
}
}
);
	/*! * ContentLoaded.js by Diego Perini,modified for IE<9 only (to save space) * * Author:Diego Perini (diego.perini at gmail.com) * Summary:cross-browser wrapper for DOMContentLoaded * Updated:20101020 * License:MIT * Version:1.2 * * URL:* http://javascript.nwbox.com/ContentLoaded/ * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE * */
// @w window reference// @f function referencefunction 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);

CSS代码(style.css):

.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;}

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