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

系统管理员 2022-01-09 19:45 220阅读 0赞

<html>

<head>

<title>[潜水曝气机][Link 1]</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

[Link 1]: http://www.0311zqjd.com/

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 VSCode 底部蓝色导航栏介绍以及导航不见了解决

相关 jquery导航菜单

相关网页导航菜单制作

相关很酷的网站顶部导航菜单样式

相关 css 导航菜单

相关 layui三级导航菜单

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

相关竖向蓝色圆角经典的CSS菜单代码

相关网站导航

相关仿OutLook或者QQ的菜单