用CSS3实现Win8风格的方格导航菜单效果_ Div+Css教程-查字典教程网

代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用CSS3实现Win8风格的方格导航菜单效果</title>

<style>

#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;

}

/* -------------------------------- */ </p> <p>.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;

}</p> <p>/* -------------------------------- */</p> <p>.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;

}</p> <p>/* -------------------------------- */ </p> <p>.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;

}</p> <p>/* -------------------------------- */ </p> <p>.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;

}

/* -------------------------------- */</p> <p>.menu .content {

opacity: 0;

display: none9;

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: block9;

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%;

}

/* -------------------------------- */ </p> <p>.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;

}

/* -------------------------------- */</p> <p>.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>

<!--[if (gte IE 6)&(lte IE 8)]>

(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"

};</p> <p> 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 = /@imports*(?:(?:(?:url(s*(['"]?)(.*)1)s*))|(?:(['"])(.*)3))[^;]*;/g;

var RE_ASSET_URL = /burl(s*(["']?)(?!data:)([^"')]+)1s*)/g;

var RE_PSEUDO_ELEMENTS = /:(:first-(?:line|letter))/g;

var RE_SELECTOR_GROUP = /(^|})s*([^{]*?[[:][^{]+)/g;

var RE_SELECTOR_PARSE = /([ +~>])|(:[a-z-]+(?:(.*?)+)?)|([.*?])/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)$/;</p> <p> // Broken attribute selector implementations (IE7/8 native [^=""], [$=""] and [*=""])

var BROKEN_ATTR_IMPLEMENTATIONS = ieVersion>6 ? /[$^*]=(['"])1/ : null;</p> <p> // 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*((?:[Ss]*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)) {</p> <p> case "root":

applyClass = function(e) {

return isNegated ? e != root : e == root;

}

break;</p> <p> 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;</p> <p> 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

}</p> <p>

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);

};</p> <p> // --[ 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) {</p> <p> 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');

};</p> <p> 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>