以下是 jquery+css3半透明三级导航 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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" lang="zh-cn">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>jquery+css3半透明三级导航</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="App_Themes/C1/StyleBase.css?v=2" type="text/css" rel="stylesheet" />
<link href="css/gc_menu.css?v=1.2" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/gc_menu_index.js"></script>
<script id="scriptInit" type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "menuholder",
orientation: 'h'
})
</script>
</head>
<body style="background:url(img/spread_repeater.png) repeat-x; height:600px;">
<div class="header" id="header">
<div id="header-inner">
<div class="clear"> </div>
<div style="margin-top:10px;height:50px;">
<div style="float: right; margin-top:50px; margin-right:200px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 0 5px rgba(0,0,0,0.75);
border-radius: 4px 4px 4px 4px; background: transparent url(App_Themes/c1/images/nav_repeater.png) repeat-x center center;">
<div id="menuholder" class="ddsmoothmenu">
<ul>
<li><a href="#">产 品</a>
<ul>
<li class="title">控 件 类 型 </li>
<li><a href="#">ComponentOne Universal</a></li>
<li><a href="#">ComponentOne Ultimate</a></li>
<li><a href="#">HTML5 / Wijmo</a></li>
<li><a href="#">ComponentOne Studio</a>
<ul style="display:none;">
<li><a href="#">Studio Enterprise</a></li>
<li><a href="#">Studio for WinForms</a></li>
<li><a href="#">Studio for ASP.NET Wijmo</a></li>
<li><a href="#">Studio for WinRT XAML</a></li>
<li><a href="#">Studio for WinJS</a></li>
<li><a href="#">Studio for Silverlight</a></li>
<li><a href="#">Studio for WPF</a></li>
<li><a href="#">Studio for ActiveX</a></li>
<li><a href="#">Studio for Windows Phone</a></li>
<li><a href="#">Studio for Compact Framework</a></li>
<li><a href="#">Studio for iPhone</a></li>
</ul>
</li>
<li><a href="#">表格控件</a>
<ul style="display:none;">
<li><a href="#">Spread Studio for .NET</a></li>
<li><a href="#">Spread for WinForms</a></li>
<li><a href="#">Spread for ASP.NET</a></li>
<li><a href="#">Spread WPF-Silverlight</a></li>
<li><a href="#">Spread WinRT</a></li>
<li><a href="#">Spread COM</a></li>
<li><a href="#">MultiRow for WinForms</a></li>
</ul>
</li>
<li><a href="#">报表控件</a>
<ul style="display:none;">
<li><a href="#">ActiveReports</a></li>
<li><a href="#">ActiveReports COM</a></li>
<li><a href="#">PowerTools智能报表方案</a></li>
</ul>
</li>
<li><a href="#">文字处理</a>
<ul style="display:none;">
<li><a href="#">TX for Windows Forms</a></li>
<li><a href="#">TX for WPF</a></li>
<li><a href="#">TX Server for WinForms</a></li>
<li><a href="#">TX Server for WPF</a></li>
<li><a href="#">TX ActiveX</a></li>
<li><a href="#">TX ActiveX Server</a></li>
<li><a href="#">GcOffice文档编辑套包</a></li>
</ul>
</li>
<li><a href="#">商业智能</a>
<ul style="display:none;">
<li><a href="#">ActiveAnalysis</a></li>
</ul>
</li>
<li><a href="#">图表控件</a>
<ul>
<li><a href="#">ComponentOne Chart for WinForms</a></li>
<li><a href="#">Wijmo Chart for ASP.NET</a></li>
</ul>
</li>
<li class="title">技 术 平 台 </li>
<li><a>技术平台</a>
<ul>
<li><a href="#">Windows 8</a></li>
<li><a href="#">WinForm</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">WPF-Silverlight</a></li>
<li><a href="#">移动设备平台</a></li>
<li><a href="#">ActiveX</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">演 示</a></li>
<li><a href="#">试 用</a></li>
<li><a href="#">技术服务</a>
<ul>
<li><a href="#">技术服务介绍</a></li>
<li><a href="#">产品技术社区</a></li>
<li><a href="#">产品博客</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">选型顾问服务</a></li>
</ul>
</li>
<li><a href="#">购 买</a>
<ul>
<li><a href="#">购买流程</a></li>
<li><a href="#">授权方式</a></li>
<li><a href="#">产品价格</a></li>
<li><a href="#">许可协议</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">购买日文版</a></li>
<li><a href="#">优惠活动</a></li>
</ul>
</li>
<li><a href="#">公 司</a>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">大事记</a></li>
<li><a href="#">荣誉奖项</a></li>
<li><a href="#">用户案例</a></li>
<li><a href="#">用户反馈</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:320px;"></div>
</body>
</html>
<!--footer end-->
JS代码(gc_menu_index.js):
//** Smooth Navigational Menu- By Dynamic Drive DHTML code library:http://www.dynamicdrive.com//** Script Download/ instructions page:http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu///** Menu created:Nov 12,2008//** Dec 12th,08" (v1.01):Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus:http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth//** Feb 11th,09" (v1.02):The currently active main menu item (LI A) now gets a CSS class of ".selected",including sub menu items.//** May 1st,09" (v1.3)://** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v'//** 2) In IE6,shadows are now always disabled//** July 27th,09" (v1.31):Fixed bug so shadows can be disabled if desired.//** Feb 2nd,10" (v1.4):Adds ability to specify delay before sub menus appear and disappear,respectively. See showhidedelay variable below//** Dec 17th,10" (v1.5):Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+,IE9+,Opera9.5+,or Safari3+/Chrome. Only .js file changed.//** July 17th,11'- Updated to v 1.51:Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.var ddsmoothmenu ={
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):arrowimages:{
down:['downarrowclass','img/down.gif',23],right:['rightarrowclass','img/right.gif']}
,transition:{
overtime:200,outtime:100}
,//duration of slide in/ out animation,in milliseconds shadow:{
enable:true,offsetx:3,offsety:3}
,//enable shadow? showhidedelay:{
showdelay:100,hidedelay:100}
,//set delay in milliseconds before sub menus appear and disappear,respectively ///////Stop configuring beyond here/////////////////////////// detectwebkit:navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1,//detect WebKit browsers (Safari,Chrome etc) detectie6:document.all && !window.XMLHttpRequest,css3support:window.msPerformance || (!document.all && document.querySelector),//detect browsers that support CSS3 box shadows (ie9+ or FF3.5+,Safari3+,Chrome etc) ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null,//boolean check for popular mobile browsers getajaxmenu:function ($,setting){
//function to fetch external page containing the panel DIVs var $menucontainer = $('#' + setting.contentsource[0]) //reference empty div on page that will hold menu $menucontainer.html("Loading Menu...") $.ajax({
url:setting.contentsource[1],//path to external menu file async:true,error:function (ajaxrequest){
$menucontainer.html('Error fetching content. Server Response:' + ajaxrequest.responseText)}
,success:function (content){
$menucontainer.html(content) ddsmoothmenu.buildmenu($,setting)}
}
)}
,buildmenu:function ($,setting){
var smoothmenu = ddsmoothmenu var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL $mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu" var $headers = $mainmenu.find("ul").parent() $headers.hover(function (e){
$(this).children('a:eq(0)').addClass('selected')}
,function (e){
$(this).children('a:eq(0)').removeClass('selected')}
) $headers.each(function (i){
//loop through each LI header var $curobj = $(this).css({
zIndex:100 - i}
) //reference current LI header var $subul = $(this).find('ul:eq(0)').css({
display:'block'}
) $subul.data('timers',{
}
) this._dimensions ={
w:this.offsetWidth,h:this.offsetHeight,subulw:$subul.outerWidth(),subulh:$subul.outerHeight()}
this.istopheader = $curobj.parents("ul").length == 1 ? true:false //is top level header? $subul.css({
top:this.istopheader && setting.orientation != 'v' ? (this._dimensions.h - 3) + "px":0}
)//hacked by edward $curobj.children("a:eq(0)").css(this.istopheader ?{
paddingRight:smoothmenu.arrowimages.down[2]}
:{
}
).append( //add arrow images'<img src="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[1]:smoothmenu.arrowimages.right[1])+ '" class="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[0]:smoothmenu.arrowimages.right[0])+ '" style="border:0;
" />') if (smoothmenu.shadow.enable && !smoothmenu.css3support){
//if shadows enabled and browser doesn't support CSS3 box shadows this._shadowoffset ={
x:(this.istopheader ? $subul.offset().left + smoothmenu.shadow.offsetx:this._dimensions.w),y:(this.istopheader ? $subul.offset().top + smoothmenu.shadow.offsety:$curobj.position().top)}
//store this shadow's offsets if (this.istopheader) $parentshadow = $(document.body) else{
var $parentLi = $curobj.parents("li:eq(0)") $parentshadow = $parentLi.get(0).$shadow}
this.$shadow = $('<div class="ddshadow' + (this.istopheader ? ' toplevelshadow':'') + '"></div>').prependTo($parentshadow).css({
left:this._shadowoffset.x + 'px',top:this._shadowoffset.y + 'px'}
) //insert shadow DIV and set it to parent node for the next shadow div}
$curobj.hover(function (e){
var $targetul = $subul //reference UL to reveal var header = $curobj.get(0) //reference header LI as DOM object clearTimeout($targetul.data('timers').hidetimer) $targetul.data('timers').showtimer = setTimeout(function (){
header._offsets ={
left:$curobj.offset().left,top:$curobj.offset().top}
var _menuleft = header.istopheader && setting.orientation != 'v' ? 0:header._dimensions.w;
var nodemenuleft = (header._offsets.left + _menuleft + header._dimensions.subulw > $(window).width()) ? (header.istopheader && setting.orientation != 'v' ? -header._dimensions.subulw + header._dimensions.w:-header._dimensions.w):_menuleft //calculate this sub menu's offsets from its parent //hacked by edward if ($subul[0].childElementCount == 14){
nodemenuleft += 3;
}
else{
if (header._offsets.left + _menuleft + header._dimensions.subulw > $(window).width()) nodemenuleft -= 3;
else nodemenuleft += 3;
}
if ($targetul.queue().length <= 1){
//if 1 or less queued animations $targetul.css({
left:nodemenuleft + "px",width:header._dimensions.subulw + 'px'}
).animate({
height:'show',opacity:'show'}
,ddsmoothmenu.transition.overtime) if (smoothmenu.shadow.enable && !smoothmenu.css3support){
var shadowleft = header.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx:nodemenuleft var shadowtop = header.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety:header._shadowoffset.y if (!header.istopheader && ddsmoothmenu.detectwebkit){
//in WebKit browsers,restore shadow's opacity to full header.$shadow.css({
opacity:1}
)}
header.$shadow.css({
overflow:'',width:header._dimensions.subulw + 'px',left:shadowleft + 'px',top:shadowtop + 'px'}
).animate({
height:header._dimensions.subulh + 'px'}
,ddsmoothmenu.transition.overtime)}
}
}
,ddsmoothmenu.showhidedelay.showdelay)}
,function (e){
var $targetul = $subul var header = $curobj.get(0) clearTimeout($targetul.data('timers').showtimer) $targetul.data('timers').hidetimer = setTimeout(function (){
$targetul.animate({
height:'hide',opacity:'hide'}
,ddsmoothmenu.transition.outtime) if (smoothmenu.shadow.enable && !smoothmenu.css3support){
if (ddsmoothmenu.detectwebkit){
//in WebKit browsers,set first child shadow's opacity to 0,as "overflow:hidden" doesn't work in them header.$shadow.children('div:eq(0)').css({
opacity:0}
)}
header.$shadow.css({
overflow:'hidden'}
).animate({
height:0}
,ddsmoothmenu.transition.outtime)}
}
,ddsmoothmenu.showhidedelay.hidedelay)}
) //end hover}
) //end $headers.each() if (smoothmenu.shadow.enable && smoothmenu.css3support){
//if shadows enabled and browser supports CSS3 shadows var $toplevelul = $('#' + setting.mainmenuid + ' ul li ul') var css3shadow = parseInt(smoothmenu.shadow.offsetx) + "px " + parseInt(smoothmenu.shadow.offsety) + "px 3px rgba(0,0,0,0.75)" //construct CSS3 box-shadow value var shadowprop = ["boxShadow","MozBoxShadow","WebkitBoxShadow","MsBoxShadow"] //possible vendor specific CSS3 shadow properties for (var i = 0;
i < shadowprop.length;
i++){
$toplevelul.css(shadowprop[i],css3shadow)}
}
$mainmenu.find("ul").css({
display:'none',visibility:'visible'}
)}
,init:function (setting){
if (typeof setting.customtheme == "object" && setting.customtheme.length == 2){
//override default menu colors (default/hover) with custom set? var mainmenuid = '#' + setting.mainmenuid var mainselector = (setting.orientation == "v") ? mainmenuid:mainmenuid + ',' + mainmenuid document.write('<style type="text/css">\n'+ mainselector + ' ul li a{
background:' + setting.customtheme[0] + ';
}
\n'+ mainmenuid + ' ul li a:hover{
background:' + setting.customtheme[1] + ';
}
\n'+ '</style>')}
this.shadow.enable = (document.all && !window.XMLHttpRequest) ? false:this.shadow.enable //in IE6,always disable shadow jQuery(document).ready(function ($){
//ajax menu? if (typeof setting.contentsource == "object"){
//if external ajax menu ddsmoothmenu.getajaxmenu($,setting)}
else{
//else if markup menu ddsmoothmenu.buildmenu($,setting)}
}
)}
}
//end ddsmoothmenu variableCSS代码(gc_menu.css):
@charset "utf-8";/* CSS Document */
.ddsmoothmenu{z-index:1000;width:100%;}
.ddsmoothmenu ul{z-index:1000;margin:0;padding:0;list-style-type:none;}
/*Top level list items*/
.ddsmoothmenu ul li{position:relative;display:inline;float:left;z-index:1000;width:104px;margin-left:5px;text-align:center;font-weight:bold;}
.ddsmoothmenu li.home{width:210px;margin:5px 0 0 0}
.ddsmoothmenu li.home a{display:block;float:left;width:170px;height:28px;margin-left:5px;background:url(../img/img_logo_c1.png) no-repeat 7px 5px}
.ddsmoothmenu li.home a:hover{background:url(../img/img_logo_c1.png) no-repeat 7px 5px}
/*Top level menu link items style*/
.ddsmoothmenu ul li.single a:hover{-moz-border-radius:4px;/* FF1+ */
-webkit-border-radius:4px;/* Saf3-4 */
border-radius:4px;/* Opera 10.5,IE 9,Saf5,Chrome */
}
.ddsmoothmenu ul li a{display:block;color:#ffffff;padding:8px 10px;z-index:1000;color:#fff;text-decoration:none;-moz-border-radius:2px 2px 0 0;/* FF1+ */
-webkit-border-radius:2px 2px 0 0;/* Saf3-4 */
border-radius:2px 2px 0 0;/* Opera 10.5,IE 9,Saf5,Chrome */
}
* html .ddsmoothmenu ul li a{/*IE6 hack to get sub menu links to behave correctly*/
display:inline-block;}
.ddsmoothmenu ul li a:link,.ddsmoothmenu ul li a:visited{display:block;color:#ffffff;-moz-border-radius:4px 4px 0 0;/* FF1+ */
-webkit-border-radius:4px 4px 0 0;/* Saf3-4 */
border-radius:4px 4px 0 0;/* Opera 10.5,IE 9,Saf5,Chrome */
}
.ddsmoothmenu ul li a.selected{/*CSS class that's dynamically added to the currently active menu items' LI A element*/
display:block;background:#374249;color:#ffffff;-moz-border-radius:4px 4px 0 0;/* FF1+ */
-webkit-border-radius:4px 4px 0 0;/* Saf3-4 */
border-radius:4px 4px 0 0;/* Opera 10.5,IE 9,Saf5,Chrome */
opacity:0.95;}
.ddsmoothmenu ul li a:hover{display:block;background:#374249;/*background of menu items during onmouseover (hover state)*/
color:#ffffff;-moz-border-radius:4px 4px 0 0;/* FF1+ */
-webkit-border-radius:4px 4px 0 0;/* Saf3-4 */
border-radius:4px 4px 0 0;/* Opera 10.5,IE 9,Saf5,Chrome */
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{color:#ffffff;position:absolute;left:0;display:none;/*collapse all sub menus to begin with*/
visibility:hidden;width:235px;top:38px;background-color:#374249;-moz-border-radius:0 0 4px 4px;/* FF1+ */
-webkit-border-radius:0 0 4px 4px;/* Saf3-4 */
border-radius:0 0 4px 4px;/* Opera 10.5,IE 9,Saf5,Chrome */
opacity:0.95;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{color:#ffffff;display:list-item;float:none;width:225px;padding:0;margin:4px 0 4px 5px;text-align:left;font-weight:normal;list-style:none outside none;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li.title{width:215px;margin:6px 0 6px 5px;padding:2px 5px;background:#69767e;/*background of menu items during onmouseover (hover state)*/
color:#fff;text-align:left;-moz-border-radius:4px;/* FF1+ */
-webkit-border-radius:4px;/* Saf3-4 */
border-radius:4px;/* Opera 10.5,IE 9,Saf5,Chrome */
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{top:0;left:0;color:#ffffff;}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{color:#ffffff;width:217px;/*width of sub menus*/
*width:215px;/*width of sub menus*/
padding:4px;margin:0;}
.ddsmoothmenu ul li ul li a:hover{display:block;/*padding:4px;*/
background:#69767e;/*background of menu items during onmouseover (hover state)*/
color:#ffffff;-moz-border-radius:4px;/* FF1+ */
-webkit-border-radius:4px;/* Saf3-4 */
border-radius:4px;/* Opera 10.5,IE 9,Saf5,Chrome */
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height:1%;}
/*Holly Hack for IE7 and below*/
/*========== Second menu bar / narrow ======================*/
/*1st sub level menu*/
.ddsmoothmenu ul li ul.narrow{position:absolute;left:0;display:none;/*collapse all sub menus to begin with*/
visibility:hidden;width:200px;background-color:#333;-moz-border-radius:0 0 4px 4px;/* FF1+ */
-webkit-border-radius:0 0 4px 4px;/* Saf3-4 */
border-radius:0 0 4px 4px;/* Opera 10.5,IE 9,Saf5,Chrome */
opacity:0.9;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul.narrow li{display:list-item;float:none;width:180px;padding:0;margin:6px 0 10px 5px;text-align:left;font-weight:normal;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul.narrow li.title{width:180px;margin:6px 0 10px 5px;padding:2px 5px;background:#69767e;/*background of menu items during onmouseover (hover state)*/
color:#fff;text-align:left;-moz-border-radius:4px;/* FF1+ */
-webkit-border-radius:4px;/* Saf3-4 */
border-radius:4px;/* Opera 10.5,IE 9,Saf5,Chrome */
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{top:0;left:0;color:#ffffff;}
/* Sub level menu links style */
.ddsmoothmenu ul li ul.narrow li a{width:180px;/*width of sub menus*/
/width:225px;/*width of sub menus*/
padding:5px;margin:0;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{margin-left:4px;}
.rightarrowclass{position:absolute;top:6px;right:5px;}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{/*shadow for NON CSS3 capable browsers*/
position:absolute;left:0;top:0;width:0;height:0;background:none;}
.toplevelshadow{/*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity:0.9;}
分享到QQ
分享到微博
微信扫一扫
