用CSS3实现Win8风格的方格导航菜单效果
程序员文章站
2023-11-19 11:41:46
CSS3+jQuery实现Win8风格的方格状菜单，注意，IE6到IE8不支持本代码，最好使用火狐测试看效果。可看到方格状的菜单，如果鼠标移上菜单并单击，该菜单项会放大显示至整个菜单区域，除... 13-04-10...
代码如下所示：
复制代码
代码如下:<!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>用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: 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%;
}
/* -------------------------------- */ </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>
<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.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 = /@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)$/;</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*((?:[\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)) {</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 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));
}
});</p> <p> // 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>
</body>
</html>
上一篇： css3闪亮进度条效果实现思路及代码