用CSS3实现Win8风格的方格导航菜单效果

更新时间:2023-04-03 15:34:26 阅读：评论：0

代码如下所示：

复制代码代码如下:

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/xhtml1-transitional.dtd& />
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”content-type” content=”text/html; chart=utf-8″ />

<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-ret: li;

background: #eee;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) int;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) int;

box-shadow: 0 1px 2px rgba(0, 0, 0, .1) int;

-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 rif, georgia;

position: absolute;

color: rgba(255, 255, 255, .1);

opacity: 0;

-webkit-transition: all .2s ea-out;

-moz-transition: all .2s ea-out;

-ms-transition: all .2s ea-out;

-o-transition: all .2s ea-out;

transition: all .2s ea-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) .clo {

background-color: #2c618f;

}

.menu li:nth-child(2), .menu li:nth-child(2) .content, .menu li:nth-child(2) .clo {

background-color: #91ab31;

}

.menu li:nth-child(3), .menu li:nth-child(3) .content, .menu li:nth-child(3) .clo {

background-color: #714a28;

}

.menu li:nth-child(4), .menu li:nth-child(4) .content, .menu li:nth-child(4) .clo {

background-color: #e58600;

}

.menu li:nth-child(5), .menu li:nth-child(5) .content, .menu li:nth-child(5) .clo {

background-color: #c33a00;

}

.menu li:nth-child(6), .menu li:nth-child(6) .content, .menu li:nth-child(6) .clo {

background-color: #7f5dac;

}

.menu li:nth-child(7), .menu li:nth-child(7) .content, .menu li:nth-child(7) .clo {

background-color: #5672b7;

}

.menu li:nth-child(8), .menu li:nth-child(8) .content, .menu li:nth-child(8) .clo {

background-color: #69003f;

}

.menu li:nth-child(9), .menu li:nth-child(9) .content, .menu li:nth-child(9) .clo {

background-color: #393043;

}

/* ——————————– */</p> <p>.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 ea-out;

-moz-transition: all .3s ea-out;

-ms-transition: all .3s ea-out;

-o-transition: all .3s ea-out;

transition: all .3s ea-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%;

}

/* ——————————– */ </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 .clo {

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 .clo {

display: block;

}

</style>

<script src=”http://demo.jb51.net/jslib/jquery/jquery-1.7.1.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.uragent)[1];

if (doc.compatmode != ‘css1compat’ || ieversion<6 || ieversion>8 || !xhr) {

return;

}

var lectorengines = {

“nw” : “*.dom.lect”,

“mootools” : “$$”,

“domassistant” : “*.$”,

“prototype” : “$$”,

“yahoo” : “*.util.lector.query”,

“sizzle” : “*”,

“jquery” : “*”,

“dojo” : “*.query”

};</p> <p> var lectormethod;

var enabledwatchers = []; // array of :enabled/:disabled elements to poll

var ie6patchid = 0; // ud to solve ie6’s multiple class bug

var patchie6multipleclass = 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_ast_url = /\burl$\s*([“‘]?)(?!data:)([^”‘)]+)\1\s*$/g;

var re_pudo_structural = /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/;

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

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

var re_lector_par = /([ +~>])|(:[a-z-]+(?:$.*?$+)?)|(\[.*?\])/g;

var re_library_incompatible_pudos = /(: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|lect|textarea|button)$/;

var re_input_checkable_types = /^(checkbox|radio)$/;</p> <p> // broken attribute lector 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_concutive_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_pudo_elements, placeholder_string).

replace(re_lector_group, function(m, prefix, lectortext) {

var lectorgroups = lectortext.split(“,”);

for (var c = 0, cs = lectorgroups.length; c < cs; c++) {

var lector = normalizelectorwhitespace(lectorgroups[c]) + space_string;

var patches = [];

lectorgroups[c] = lector.replace(re_lector_par,

function(match, combinator, pudo, attribute, index) {

if (combinator) {

if (patches.length>0) {

applypatches( lector.substring(0, index), patches );

patches = [];

}

return combinator;

}

el {

var patch = (pudo) ? patchpudoclass( pudo ) : patchattribute( attribute );

if (patch) {

patches.push(patch);

return “.” + patch.classname;

}

return match;

}

}

);

}

return prefix + lectorgroups.join(“,”);

});

};

function patchattribute( attr ) {

return (!broken_attr_implementations || broken_attr_implementations.tes理科专业有哪些t(attr)) ?

{ classname: createclassname(attr), applyclass: true } : null;

};

function patchpudoclass( pudo ) {

var applyclass = true;

var classname = createclassname(pudo.slice(1));

var isnegated = pudo.substring(0, 5) == “:not(“;

var activateeventname;

var deactivateeventname;

if (isnegated) {

pudo = pudo.slice(5, -1);

}

var bracketindex = pudo.indexof(“(“)

if (bracketindex > -1) {

pudo = pudo.substring(0, bracketindex);

}

// check we’re still dealing with a pudo-class

if (pudo.charat(0) == “:”) {

switch (pudo.slice(1)) {</p> <p> ca “root”:

applyclass = function(e) {

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

}

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

ca “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;

ca “disabled”:

isnegated = !isnegated;</p> <p> ca “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 pudo == “:enabled” ? isnegated : !isnegated;

}

break;

ca “focus”:

activateeventname = “focus”;

deactivateeventname = “blur”;

ca “hover”:

if (!activateeventname) {

activateeventname = “mouenter”;

deactivateeventname = “mouleave”;

}

applyclass = function(e) {

addevent( e, isnegated ? deactivateeventname : activateeventname, function() {

toggleelementclass( e, classname, true );

})

addevent( e, isnegated ? activateeventname : deactivateeventname, function() {

toggleelementclass( e, classname, fal );

})

return isnegated;

}

break;

default:

if (!re_pudo_structural.test(pudo)) {

return fal;

}

break;

}

}

return { classname: classname, applyclass: applyclass };

};

function applypatches(lectortext, patches) {

var elms;

var domlectortext = lectortext.replace(re_library_incompatible_pudos, empty_string);

if (domlectortext == empty_string || domlectortext.charat(domlectortext.length – 1) == space_string) {

domlectortext += “*”;

}

try {

elms = lectormethod( domlectortext );

} catch (ex) {

// #debug_start

log( “lector R眉毛看相16;” + lectortext + “‘ threw exception ‘” + ex + “‘” );

// #debug_end

}</p> <p>

if (elms) {

for (var d = 0, dl = elms.length; d < dl; d++) {

var elm = elms[d];

var cssclass = 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)) {

cssclass = toggleclass(cssclass, patch.classname, true );

}

}

}

elm.classname = cssclass;

}

}

};

function haspatch( elm, patch ) {

return new regexp(“(^|\\s)” + patch.classname + “(\\s|$)”).test(elm.classname);

};

function createclassname( classname ) {

return namespace + “-” + ((ieversion == 6 && patchie6multipleclass) ?

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_concutive_whitespace, space_string);

};

function normalizelectorwhitespace( lectortext ) {

return normalizewhitespace(lectortext.

replace(re_tidy_trailing_whitespace, placeholder_530u3bstring).

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 clasxists = re.test(classlist);

if (on) {

return clasxists ? classlist : classlist + space_string + classname;

} el {

return clasxists ? 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, fal);

xhr.nd();

return (xhr.status==200) ? xhr.respontext : empty_string;

};

function resolveurl( url, contexturl ) {

return contexturlpath + url;

};

function parstylesheet( url ) {

if (url) {

return loadstylesheet(url).replace(re_comment, empty_string).

replace(re_import, function( match, quotechar, importurl, quotechar2, importurl2 ) {

return parstylesheet(resolveurl(importurl || importurl2, url));

}).

replace(re_ast_url, function( match, quotechar, asturl ) {

quotechar = quotechar || empty_string;

return ”垂线 url(” + quotechar + resolveurl(asturl, url) + quotechar + “) “;

});

}

return empty_string;

};

// –[ init() ]———————————————————

function init() {

// honour the <ba> tag

var url, stylesheet;

var batags = doc.getelementsbytagname(“ba”);

var baurl = (batags.length > 0) ? batags[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, baurl);

if (url) {

stylesheet.csstext = patchstylesheet( parstylesheet( url ) );

}

}

}

if (enabledwatchers.length > 0) {

tinterval( 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 = fal;

e.$disabled = true;

e.disabled = true;

}

el {

e.$disabled = e.disabled;

}

}

}

},250)

}

};

contentloaded(win, function() {

// determine the “best fit” lector engine

for (var engine in lectorengines) {

var members, member, context = win;

if (win[engine]) {

members = lectorengines[engine].replace(“*”, engine).split(“.”);

while ((member = members.shift()) && (context = context[member])) {}

if (typeof context == “function”) {

lectormethod = context;

init();

return;

}

}

}

});

function contentloaded(win, fn) {</p> <p> var done = fal, top = true,

init = function(e) {

if (e.type == “readystatechange” && doc.readystate != “complete”) return;

(e.type == “load” ? win : doc).detachevent(“on” + e.type, init, fal);

if (!done && (done = true)) fn.call(win, e.type || e);

},

poll = function() {

try { root.doscroll(“left”); } catch(e) { ttimeout(poll, 50); return; }

init(‘poll’);

};</p> <p> if (doc.readystate == “complete”) fn.call(win, empty_string);

el {

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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis interdum dictum scelerisque. morbi eu euismod lorem.</div>

</li>

<li tabindex=”1″> <span class=”title”>ven</span>

<div class=”content”>lorem ipsum dolor sit amet, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis 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, conctetur adipiscing elit. suspendis interdum dictum scelerisque. morbi eu euismod lorem.</div>

</li>

</ul>

<script>

(function(){

// append a clo trigger for each block

$(‘.menu .content’).append(‘<span class=”clo”>x</span>’);

// show window

function showcontent(elem){

hidecontent();

elem.find(‘.content’).addclass(‘expanded’);

elem.addclass(‘cover’);

}

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

}

});</p> <p> // when right upper clo element is clicked – ret all

$(‘.menu .clo’).click(function(e) {

e.stoppropagation();

hidecontent();

});

// also, when esc key is presd – ret all

$(document).keyup(function(e) {

if (e.keycode == 27) {

hidecontent();

}

});