一个漂亮的网页顶部导航菜单代码

2024-09-05 12:20:37

字体：大中小

来源：转载

供稿：网友

一个漂亮的网页顶部导航菜单代码，支持菜单文字宽度自适应，绿色风格，相信不少人会喜欢，这里用JS控制当前菜单项的标记，与其它的菜单背景有所不同，使其菜单结构更加清淅，而且代码量少，新手也可修改完善。

<!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>一个漂亮的网页顶部导航菜单代码-www.vevb.com</title><style type="text/css">.nav{width:960px;height:29px;text-align:left;margin:20px auto 0;background:url(/jscss/demoimg/201007/sp_nav.gif) repeat-x 0 -30px;position:relative;}.nav ul{margin-left:10px;}.nav ul li{float:left;width:auto;line-height:29px;display:inline;text-align:center;padding-left:5px;font-size:14px;font-weight:bold;background:url(/jscss/demoimg/201007/sp_nav.gif) no-repeat right -59px;}.nav ul li a{float:left;width:auto;color:#FFF;padding:0 20px;}.nav ul li.select{background:url(/jscss/demoimg/201007/sp_nav.gif) no-repeat 0 -90px;position:relative;margin-top:-4px;}.nav ul li.select a{background:url(/jscss/demoimg/201007/sp_nav.gif) no-repeat right -90px;height:33px;line-height:33px;color:#333;text-indent:-5px;}</style></head><body><div class="nav">	<ul>    	<li>武林网</li>        <li>手机卖场</li>        <li>数码天下</li>        <li>时尚女人</li>        <li>精美家居</li>        <li>精品源码</li>        <li>名品秀</li>        <li>特价活动</li>    </ul></div><script language="javascript">	function nav(){	   var url = document.URL;		var urls = document.getElementsByName("navurl");		for(var i=0;i<urls.length;i++){			if(urls[i] == url){				urls[i].parentNode.className = 'select';				return;			}		}		urls[0].parentNode.className = 'select';	}	nav();// jQuery	$(function(){	var a1 = document.URL;	var a2 = $(".nav_other a");	for(var i=0;i</body></html>

上一篇：jQuery仿Flash上下翻动的中英文导航菜单

下一篇：带有延时功能的基础菜单类（CSS与JS）

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注