以下是 jQ Metro导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQ Metro导航菜单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/navigationT.js"></script>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/navigationT.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
var col
function ChangeCol() {
if (col == 1) {
colors = new Array('#4D3D98', '#0C8B44', '#88288F', '#D24827', '#00A0B1'); /* Colors of the Menu Items */
body_color = "#1C1651"; /* Background Color of the whole Navigation */
hover_color = "#352869"; /* Color of the border of the menu items for HOVER*/
scroll_color = "#5A4B80"; /* Default background color for the scroll arrow */
scroll_hover = "#FFFFFF"; /* Hover background color for the scroll arrow */
scroll_click = "#282828"; /* background color for the scroll arrow when clicked */
$("div.metro_nav").show();
$("div.metro_na").hide();
} else if (col == 2) {
colors = new Array('#4472B8', '#56439B', '#069547', '#B41E43', '#D74F2B');
body_color = "#1D1D1D"; /* Background Color of the whole Navigation */
hover_color = "#2D2D2D"; /* Color of the border of the menu items for HOVER*/
scroll_color = "#5A4B80"; /* Default background color for the scroll arrow */
scroll_hover = "#FFFFFF"; /* Hover background color for the scroll arrow */
scroll_click = "#282828"; /* background color for the scroll arrow when clicked */
$("div.metro_nav").show();
$("div.metro_na").hide();
} else if (col == 3) {
$("div.metro_nav").hide();
$("div.metro_na").show();
}
setColors();
}
</script>
<style>
div.metro_na {
display: none;
}
body {
margin: 0;
}
img {
border: none;
}
</style>
</head>
<body>
<div class="metro_nav">
<div class="nav_title">Navigation</div>
<ul>
<li>
<a href="#"><img src="images/icon_home.png" /><span>Home</span></a>
</li>
<li>
<a><img src="images/icon_settings.png" /><span>Settings</span></a>
<ul>
<li><a href="#"><img src="images/icon_account.png" /><span>Account</span></a></li>
<li><a href="#"><img src="images/icon_edit.png" /><span>Edit Settings</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_shopping.png" /><span>Shopping</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_gallery.png" /><span>Gallery</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_apps.png" /><span>Apps</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="metro_na">
<div class="nav_title">Navigation</div>
<ul>
<li>
<a href="#"><img src="images/icon_home.png" /><span>Home</span></a>
</li>
<li>
<a><img src="images/icon_settings.png" /><span>Settings</span></a>
<ul>
<li><a href="#"><img src="images/icon_account.png" /><span>Account</span></a></li>
<li><a href="#"><img src="images/icon_edit.png" /><span>Edit Settings</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_shopping.png" /><span>Shopping</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_gallery.png" /><span>Gallery</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
<li>
<a href="#"><img src="images/icon_apps.png" /><span>Apps</span></a>
<ul>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
<li><a href="#"><img src="images/icon_menu.png" /><span>Submenu</span></a></li>
</ul>
</li>
</ul>
</div>
<h1>Pick a Color</h1>
<div class="colpick">
<ul>
<li><a style="background-color : #1C1651" onclick="javascript: col = 1;ChangeCol()"></a></li>
<li><a style="background-color : #1D1D1D" onclick="javascript: col = 2;ChangeCol()"></a></li>
<li><a style="background-color : white; border : solid 2px black;width : 46px; height : 46px;" onclick="javascript: col = 3;ChangeCol()"></a></li>
</ul>
</div>
</body>
</html>
JS代码(navigationT.js):
var colorsT = new Array('#4472B8','#56439B','#069547','#B41E43','#D74F2B');
/* colorsT of the Menu Items */
var body_colorT = "transparent";
/* Background Color of the whole Navigation */
var hover_colorT = "transparent";
/* Color of the border of the menu items for HOVER*/
var scroll_colorT = "#919191";
/* Default background color for the scroll arrow */
var scroll_hoverT = "#D8D8D8";
/* Hover background color for the scroll arrow */
var scroll_clickT = "#282828";
/* background color for the scroll arrow when clicked */
var Content = new Array();
var body_height;
var scroll = "<div class = 'scroll_bar'><span style = 'float:left;
'></span><span style = 'float:right;
background-position:0 -120px;
'></span></div>"var waitForFinalEvent = (function (){
var timers ={
}
;
return function (callback,ms,uniqueId){
if (!uniqueId){
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]){
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback,ms);
}
;
}
)();
function setcolorsTT(){
jQuery("div.metro_na>ul>li").each(function(){
L = colorsT.length;
X = $(this).index();
for(i = 0,j = 0;
i <= X;
i++,j++){
if(j == L)j = 0;
if(i == X)jQuery(this).children("a").css("background-color",colorsT[j]);
}
jQuery("div.metro_na").css("background-color",body_colorT);
$("div.metro_na>div.scroll_bar>span").css("background-color",scroll_colorT)}
)}
function setScrollT(){
if(navigator.appVersion.indexOf("MSIE 7.")!=-1){
$("div.metro_na>ul>li").css({
"display":"inline","zoom":"1"}
);
}
A = $("div.metro_na>ul>li:last-child").offset().left + $("div.metro_na>ul>li:last-child").width()B = $("div.metro_na").offset().left + $("div.metro_na").width();
if(A > B)$("div.metro_na").append(scroll);
$("div.metro_na>div.scroll_bar>span").css("background-color",scroll_colorT)}
$(window).load(function(){
/*--------------------------------------- Setting up colorsT -----------------------------------------*/
setcolorsTT();
/*--------------------------------------- position fixing -----------------------------------------*/
//alert(parseFloat($().jquery));
if(navigator.appVersion.indexOf("MSIE 7.")!=-1){
$("div.metro_na>ul>li").css({
"display":"inline","zoom":"1"}
);
}
$("div.metro_na").each(function(){
A = $(this).children("ul").children("li:last-child").offset().left + $(this).children("ul").children("li:last-child").width()B = $(this).offset().left + $(this).width();
if(A > B)$(this).append(scroll);
$(this).children("div.scroll_bar").children("span").css("background-color",scroll_colorT)}
)/*--------------------------------------- Other fixing -----------------------------------------*/
/*--------------------------------------- Events handling -----------------------------------------*/
if(parseFloat($().jquery) < 1.9){
/*---------- BEGIN NAVIGATION ITEM HOVER --------*/
$("div.metro_na>ul>li>a").live("mouseenter",function(){
jQuery(this).closest("li").css("background-color",hover_colorT);
}
)$("div.metro_na>ul>li>a").live('mouseleave',function(){
jQuery(this).closest("li").css("background-color","transparent");
jQuery(this).closest("li").css("transform",'scale(1.0,1.0)');
}
)/*---------- END NAVIGATION ITEM HOVER --------*/
/*---------- BEGIN NAVIGATION ITEM CLICK --------*/
$("div.metro_na>ul>li>a").live('mousedown',function(e){
e.preventDefault();
jQuery(this).closest("li").css("transform",'scale(.98,.98)');
}
)$("div.metro_na>ul>li>a").live('mouseup',function(){
jQuery(this).closest("li").css("transform",'scale(1.0,1.0)');
var temp = "";
if($(this).closest("li").children("ul").html() != null){
Content[$(this).closest("div.metro_na").index()] = $(this).closest("div.metro_na").html();
temp = "<div class= 'nav_title'>" + $(this).closest("li").children("a").children("span").html() +"<span class = 'back_button'></span>" + "</div>";
temp = temp + "<ul>" + $(this).closest("li").children("ul").html() + "</ul>"X = $(this).closest("div.metro_na");
$(this).closest("div.metro_na").children("*").remove();
X.html(temp);
X.children("div.nav_title").children("img").show();
setScrollT();
X.children("ul").children("*").css({
"left":"30px","opacity":"0"}
);
X.children("div.nav_title").css({
"opacity":"0"}
);
X.children("ul").children("*").animate({
left:'0px',opacity:'1'}
,300);
X.children("div.nav_title").animate({
opacity:'1'}
,300);
setcolorsTT();
}
}
)/*---------- END NAVIGATION ITEM CLICK --------*/
/*---------- BEGIN BACK BUTTON EVENTS --------*/
$("div.nav_title>span.back_button").live('mouseenter',function(){
$(this).css("background-position","0px -30px");
}
)$("div.nav_title>span.back_button").live('mouseleave',function(){
$(this).css("background-position","0px 0px");
}
)$("div.nav_title>span.back_button").live('mousedown',function(e){
e.preventDefault();
$(this).css("background-position","0px -60px");
}
)$("div.nav_title>span.back_button").live('mouseup',function(){
$(this).css("background-position","0px -30px");
}
)$("div.nav_title>span.back_button").live('click',function(){
X = $(this).closest("div.metro_na");
X.html(Content[X.index()]);
X.children("div.nav_title").children("img").hide();
X.children("ul").children("*").css({
"left":"30px","opacity":"0"}
);
X.children("div.nav_title").css({
"opacity":"0"}
);
X.children("ul").children("*").animate({
left:'0px',opacity:'1'}
,300);
X.children("div.nav_title").animate({
opacity:'1'}
,300);
X.children("ul").children("li").css("background-color","transparent");
}
)/*---------- END BACK BUTTON EVENTS --------*/
/*---------- BEGIN SCROLL EVENTS --------*/
$("div.metro_na>div.scroll_bar>span:first-child").live("mouseenter",function(){
$(this).css("background-color",scroll_hoverT);
}
)$("div.metro_na>div.scroll_bar>span:first-child").live("mouseout",function(){
$(this).css("background-color",scroll_colorT);
$(this).css("background-position","0 -90px");
}
)$("div.metro_na>div.scroll_bar>span:last-child").live("mouseenter",function(){
$(this).css("background-color",scroll_hoverT);
}
)$("div.metro_na>div.scroll_bar>span:last-child").live("mouseout",function(){
$(this).css("background-color",scroll_colorT);
$(this).css("background-position","0 -120px");
}
)$("div.metro_na>div.scroll_bar>span:nth-child(1)").live("mousedown",function(){
$(this).css("background-color",scroll_clickT);
$(this).css("background-position","0 -105px");
A = $(this).closest("div.metro_na").children("ul").children("li:first-child").offset().leftB = $("div.metro_na").offset().left + 40;
C = B - A;
if(C > 100)$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"+=" + String(100) + "px"}
,"fast");
else$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"+=" + String(C) + "px"}
,"fast");
}
)$("div.metro_na>div.scroll_bar>span:nth-child(1)").live("mouseup",function(){
$(this).css("background-color",scroll_hoverT);
$(this).css("background-position","0 -90px");
}
)$("div.metro_na>div.scroll_bar>span:nth-child(2)").live("mousedown",function(){
$(this).css("background-color",scroll_clickT);
$(this).css("background-position","0 -135px");
A = $(this).closest("div.metro_na").children("ul").children("li:last-child").offset().left +$(this).closest("div.metro_na").children("ul").children("li:last-child").width();
B = $(this).closest("div.metro_na").offset().left + $(this).closest("div.metro_na").width();
C = A - B + 30;
if(C > 100)$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"-=" + String(100) + "px"}
,"fast");
else$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"-=" + String(C) + "px"}
,"fast");
}
)$("div.metro_na>div.scroll_bar>span:nth-child(2)").live("mouseup",function(){
$(this).css("background-color",scroll_hoverT);
$(this).css("background-position","0 -120px");
}
)/*-------------------------------------------------- END SCROLL EVENTS ------------------------------------------------*/
}
else{
/*-------------------------------------------------- jQuery 1.9.1+ ------------------------------------------------*/
/*---------- BEGIN NAVIGATION ITEM HOVER --------*/
$(document).on("mouseenter","div.metro_na>ul>li>a",function(){
jQuery(this).closest("li").css("background-color",hover_colorT);
}
)$(document).on('mouseleave',"div.metro_na>ul>li>a",function(){
jQuery(this).closest("li").css("background-color","transparent");
jQuery(this).closest("li").css("transform",'scale(1.0,1.0)');
}
)/*---------- END NAVIGATION ITEM HOVER --------*/
/*---------- BEGIN NAVIGATION ITEM CLICK --------*/
$(document).on('mousedown',"div.metro_na>ul>li>a",function(e){
e.preventDefault();
jQuery(this).closest("li").css("transform",'scale(.98,.98)');
}
)$(document).on('mouseup',"div.metro_na>ul>li>a",function(){
jQuery(this).closest("li").css("transform",'scale(1.0,1.0)');
var temp = "";
if($(this).closest("li").children("ul").html() != null){
Content[$(this).closest("div.metro_na").index()] = $(this).closest("div.metro_na").html();
temp = "<div class= 'nav_title'>" + $(this).closest("li").children("a").children("span").html() +"<span class = 'back_button'></span>" + "</div>";
temp = temp + "<ul>" + $(this).closest("li").children("ul").html() + "</ul>"X = $(this).closest("div.metro_na");
$(this).closest("div.metro_na").children("*").remove();
X.html(temp);
X.children("div.nav_title").children("img").show();
setScrollT();
X.children("ul").children("*").css({
"left":"30px","opacity":"0"}
);
X.children("div.nav_title").css({
"opacity":"0"}
);
X.children("ul").children("*").animate({
left:'0px',opacity:'1'}
,300);
X.children("div.nav_title").animate({
opacity:'1'}
,300);
setcolorsTT();
}
}
)/*---------- END NAVIGATION ITEM CLICK --------*/
/*---------- BEGIN BACK BUTTON EVENTS --------*/
$(document).on("mouseenter","div.nav_title>span.back_button",function(){
$(this).css("background-position","0px -30px");
}
)$(document).on('mouseleave',"div.nav_title>span.back_button",function(){
$(this).css("background-position","0px 0px");
}
)$(document).on('mousedown',"div.nav_title>span.back_button",function(e){
e.preventDefault();
$(this).css("background-position","0px -60px");
}
)$(document).on('mouseup',"div.nav_title>span.back_button",function(){
$(this).css("background-position","0px -30px");
}
)$(document).on('click',"div.nav_title>span.back_button",function(){
X = $(this).closest("div.metro_na");
X.html(Content[X.index()]);
X.children("div.nav_title").children("img").hide();
X.children("ul").children("*").css({
"left":"30px","opacity":"0"}
);
X.children("div.nav_title").css({
"opacity":"0"}
);
X.children("ul").children("*").animate({
left:'0px',opacity:'1'}
,300);
X.children("div.nav_title").animate({
opacity:'1'}
,300);
X.children("ul").children("li").css("background-color","transparent");
}
)/*---------- END BACK BUTTON EVENTS --------*/
/*---------- BEGIN SCROLL EVENTS --------*/
$(document).on("mouseenter","div.metro_na>div.scroll_bar>span:first-child",function(){
$(this).css("background-color",scroll_hoverT);
}
)$(document).on("mouseout","div.metro_na>div.scroll_bar>span:first-child",function(){
$(this).css("background-color",scroll_colorT);
$(this).css("background-position","0 -90px");
}
)$(document).on("mouseenter","div.metro_na>div.scroll_bar>span:last-child",function(){
$(this).css("background-color",scroll_hoverT);
}
)$(document).on("mouseout","div.metro_na>div.scroll_bar>span:last-child",function(){
$(this).css("background-color",scroll_colorT);
$(this).css("background-position","0 -120px");
}
)$(document).on("mousedown","div.metro_na>div.scroll_bar>span:nth-child(1)",function(){
$(this).css("background-color",scroll_clickT);
$(this).css("background-position","0 -105px");
A = $(this).closest("div.metro_na").children("ul").children("li:first-child").offset().leftB = $("div.metro_na").offset().left + 40;
C = B - A;
if(C > 100)$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"+=" + String(100) + "px"}
,"fast");
else$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"+=" + String(C) + "px"}
,"fast");
}
)$(document).on("mouseup","div.metro_na>div.scroll_bar>span:nth-child(1)",function(){
$(this).css("background-color",scroll_hoverT);
$(this).css("background-position","0 -90px");
}
)$(document).on("mousedown","div.metro_na>div.scroll_bar>span:nth-child(2)",function(){
$(this).css("background-color",scroll_clickT);
$(this).css("background-position","0 -135px");
A = $(this).closest("div.metro_na").children("ul").children("li:last-child").offset().left +$(this).closest("div.metro_na").children("ul").children("li:last-child").width();
B = $(this).closest("div.metro_na").offset().left + $(this).closest("div.metro_na").width();
C = A - B + 30;
if(C > 100)$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"-=" + String(100) + "px"}
,"fast");
else$(this).closest("div.metro_na").children("ul").children("*").stop(false,false).animate({
left:"-=" + String(C) + "px"}
,"fast");
}
)$(document).on("mouseup","div.metro_na>div.scroll_bar>span:nth-child(2)",function(){
$(this).css("background-color",scroll_hoverT);
$(this).css("background-position","0 -120px");
}
)}
$(window).resize(function (){
waitForFinalEvent(function(){
$("div.metro_na").each(function(){
A = $(this).children("ul").children("li:last-child").offset().left + $(this).children("ul").children("li:last-child").width()B = $(this).offset().left + $(this).width();
if(A > B){
if(!$(this).children("div.scroll_bar").length)$(this).append(scroll);
}
else$(this).children("div.scroll_bar").remove();
$(this).children("div.scroll_bar").children("span").css("background-color",scroll_colorT)}
)}
,50,"some unique string");
}
);
}
)CSS代码(navigation.css):
div.metro_nav{position:relative;font-family:'Segoe UI Semibold','Segoe UI','Helvetica','Arial','sans-serif';font-size:16px;height:160px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;}
div.metro_nav>div.nav_title{position:relative;float:none;width:auto;background-color:transparent;color:white;font-size:20px;text-align:left;height:30px;line-height:30px;margin:5px;margin:5px 40px;}
div.metro_nav>ul{position:relative;height:86px;margin:0;margin-top:15px;padding:0;list-style:none;white-space:nowrap;overflow:hidden;margin:15px 0 0 40px;}
div.metro_nav>ul>li{position:relative;width:116px;height:86px;margin:0;top:0px;display:inline-block;}
div.metro_nav>ul>li>ul{display:none;}
div.metro_nav>ul>li>a{display:block;height:80px;width:110px;position:relative;left:3px;top:3px;cursor:default;text-decoration:none;}
div.metro_nav>ul>li>a>img{height:50%;display:block;margin:auto;position:relative;top:10px;}
div.metro_nav>ul>li>a>span{display:block;color:white;font-size:13px;margin-left:5px;top:20px;position:relative;}
div.metro_nav>.scroll_bar{position:absolute;bottom:0;width:100%;height:15px;}
div.metro_nav>div.nav_title>span.back_button{height:30px;background-position:0px 0px;float:right;position:relative;right:30px;width:30px;background-image:url("metro_nav.png");/* URL should changed to the path of metro_nav.png*/
}
div.metro_nav>.scroll_bar>span{position:relative;height:15px;width:30px;background-image:url("metro_nav.png");/* URL should changed to the path of metro_nav.png*/
display:block;background-position:0 -90px;}
CSS代码(navigationT.css):
div.metro_na{position:relative;font-family:'Segoe UI Semibold','Segoe UI','Helvetica','Arial','sans-serif';font-size:16px;height:160px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;}
div.metro_na>div.nav_title{position:relative;float:none;width:auto;background-color:transparent;color:black;font-size:20px;text-align:left;height:30px;line-height:30px;margin:5px;margin:5px 40px;}
div.metro_na>ul{position:relative;height:86px;margin:0;margin-top:15px;padding:0;list-style:none;white-space:nowrap;overflow:hidden;margin:15px 0 0 40px;}
div.metro_na>ul>li{position:relative;width:116px;height:86px;margin:0;top:0px;display:inline-block;}
div.metro_na>ul>li>ul{display:none;}
div.metro_na>ul>li>a{display:block;height:80px;width:110px;position:relative;left:3px;top:3px;cursor:default;text-decoration:none;}
div.metro_na>ul>li>a>img{height:50%;display:block;margin:auto;position:relative;top:10px;}
div.metro_na>ul>li>a>span{display:block;color:white;font-size:13px;margin-left:5px;top:20px;position:relative;}
div.metro_na>.scroll_bar{position:absolute;bottom:0;width:100%;height:15px;}
div.metro_na>div.nav_title>span.back_button{height:30px;background-position:0px 0px;float:right;position:relative;right:30px;width:30px;background-image:url("metro_navT.png");/* URL should changed to the path of metro_na.png*/
}
div.metro_na>.scroll_bar>span{position:relative;height:15px;width:30px;background-image:url("metro_navT.png");/* URL should changed to the path of metro_na.png*/
display:block;background-position:0 -90px;}
CSS代码(style.css):
body{font-family:'Segoe UI','Segoe UI','Helvetica','Arial','sans-serif';font-size:13px;}
h1{text-align:center;}
div.colpick{width:100%;}
div.colpick>ul{padding:0;margin:auto;width:180px;height:50px;}
div.colpick>ul>li{float:left;height:50px;width:50px;background-color:black;list-style-type:none;margin:auto 5px;}
div.colpick>ul>li>a{display:block;height:100%;width:100%;}
分享到QQ
分享到微博
微信扫一扫
