当前位置:编程学习 > JS >>

一个flash的导航条效果 用js或其他技术做也可

3个w点xht点cn/index点aspx 这个网站的 导航条 谁能做一个给我 要一样的 要可以修改导航上面的字 和连接的 用什么做都可以 flash也行 DIV+CSS 也行 只要效果一样 在今天下午6点前能做出来的 新手可以挑战一下 高手可以复习一下 救命啊 ~~~~~~~~~ 做好了 还有加分 求各路高手新手帮助小弟
追问:在那上面找了一个类似的  但是还是有很大的差距
领导看了 不满意
答案:(刚才那个在IE6下有点问题,我又改了一下)这是我自己写的,要用到jquery框架,自己去下载一个jquery-1.6.min.js文件
另外关于颜色与尺寸自己可以修改css:
<!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=gb2312" />
<title>给一个参考</title>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#nav li").hover(
	function(){
		$(this).children(".submenu").slideDown("600");
		$(this).children("em").addClass("cur");
	},
	function(){
		$(this).children(".submenu").slideUp("300");
		$(this).children("em").removeClass("cur");
	});
});
</script>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
#nav {
	text-align:center;
	font-size:12px;
	color:#fff;
	background-color: #F00;
	width: 600px;
	padding-right: 30px;
	padding-left: 30px;
	font-size:12px;
}
#nav ul {
	list-style-type:none;
}
#nav li {
	float:left;
	width:90px;
	margin-right:10px;
	height:28px;
	line-height:28px;
	cursor:pointer;
	position:relative;
}
#nav em {
	display:block;
}
.submenu {
	display:none;
	width:90px;
	padding:6px 0 12px;
	background-color:red;
	position:absolute;
	left:0;
	z-index:999;
}
.submenu a {
	color:#FFF;
	display:block;
	text-decoration:none;
	font-size:12px;
	line-height:1.8;
}
.submenu a:hover {
	color:#f00;
	background-color:#FFF;
}
.cur {
	background-color:#FFF;
	color:#f00;
}
-->
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li><em>新鸿泰集团</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
    <li><em>新鸿泰人</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
    <li><em>新鸿泰事</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
    <li><em>新鸿泰观点</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
    <li><em>新鸿泰服务</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
    <li><em>新鸿泰快讯</em>
      <div class="submenu"><a href="#">公司简介</a><a href="#">公司简介</a><a href="#">公司简介</a></div>
    </li>
  </ul>
  <br clear="all" style=" line-height:1%;" />
</div>
</body>
</html>
其他:上网搜  懒人图库 js与div+css的滑动门技术,哈哈。 

上一个:如何用asp+js连接sql数据库,实现查询,添加和删除操作。要求输入姓名能查到电话号码,也可以添加删除。
下一个:怎样 通过html代码或者 JS 访问 本地浏览文件夹?

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,