仿蓝色理想网站的导航菜单

<html>

<head>

<title>潜水曝气机</title>

</head>

#dNavBar{

background-color:#ffffff;

}

#dNavBar li{

list-style-type:none;

float:left;

width:84px;

height:28px;

line-height:28px;

font-size:12px;

color:#FFFFFF;

border:3px solid #ffffff;

background-color:#86C2FF;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background-color:#0000FF;

width:500px;

border-left:3px solid #ffffff;

border-right:3px solid #ffffff;

height:29px;

line-height:29px;

color:#FFFFFF;

font-size:12px;

padding-left:10px;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: none;

}

a:visited{

color: #FFFFFF;

text-decoration: none;

}

</style>

function ShowMenu()

{

var barCTT=document.getElementById("dNavBar")

var liArr=barCTT.getElementsByTagName("li")

var links=new Array()

links[0]="<a href='#'>当前位置：首页"

links[1]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a> | <a href='#'>项目四</a>"

links[2]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a>"

links[3]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a> | <a href='#'>项目四</a> | <a href='#'>项目五</a>"

links[4]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[5]="<a href='#'>项目一</a> | <a href='#'>项目二</a> | <a href='#'>项目三</a>"

links[6]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[7]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[8]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[9]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[11]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

links[12]="<a href='#'>项目一</a> | <a href='#'>项目二</a>"

for (i=0;i<liArr.length;i++)

{

liArr[i].οnclick=function()

{

selectThis(this,liArr,links)

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;i<allLi.length;i++)

{

allLi[i].style.border="3px solid #ffffff";

allLi[i].style.backgroundColor="#86C2FF";

allLi[i].style.height="28px";

if (indexObj==allLi[i])

{

index=i;

}

indexObj.style.borderBottom="0px solid #666688";

indexObj.style.backgroundColor="#0000FF";

indexObj.style.height="31px";

document.getElementById("subMenu").innerHTML=infoArr[index];

}

</script>

<div id="dNavBar" style="float:none; width:560px;"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>

</div>

</body>

</html>

转载于:https://blog.51cto.com/chunzhisu/1551475

仿蓝色理想网站的导航菜单相关推荐

--仿蓝色理想网站的导航菜单--
网页特效||---仿蓝色理想网站的导航菜单 #dNavBar{ background-color:#ffffff; } #dNavBar li{ list-style-type:none; float ...
蓝色箭头间隔css导航菜单代码
蓝色箭头间隔css导航菜单代码演示图片: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
jquery实现电商网站分类导航菜单
一.HTML部分 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下 ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
纯css实现蓝色圆角效果水平导航菜单代码
这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DO ...
蓝色大气的交替导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS Dock Menu：JS+CSS 仿苹果MAC机桌面导航菜单
所需源文件--见下方文件附件在HTML中的<head>标签中插入如下代码: <script type="text/javascript" src="j ...
仿淘宝网站的TabPage导航效果
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...

仿蓝色理想网站的导航菜单

仿蓝色理想网站的导航菜单相关推荐

最新文章

热门文章