您的位置：首页 > Web前端 > CSS
(div+css特效代码) 导航菜单栏

2013-08-17 23:25 495 查看
截图效果：
Jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<!--css样式文件  (导航菜单栏)-->
<link href="css/index.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

h1 {
	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
	color: #333;
	margin: 0;
	padding: 5px 0;
}

h1 small {
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #fff;
}

.container {
	width: 970px;
	margin: 0 auto;
}

ul#topnav {
	margin: 0;
	padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	background: url(images/topnav_s.gif) repeat-x;
}

ul#topnav li {
	float: left;
	margin: 0;
	padding: 0;
	border-right: 1px solid #555;
}

ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}

ul#topnav li:hover {
	background: #1376c9 url(images/topnav_a.gif ) repeat-x;
}

ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0;
	top: 35px;
	display: none;
	width: 970px;
	background: #1376c9;
	color: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

ul#topnav li:hover span {
	display: block;
}

ul#topnav li span a {
	display: inline;
}

ul#topnav li span a:hover {
	text-decoration: underline;
}

</style>
<!--jquery 核心文件  -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<!--导航菜单栏     js代码  -->
<script type="text/javascript">
	$(document).ready(function() {

		$("ul#topnav li").hover(function() { //Hover over event on list item
			$(this).css({
				'background' : '#1376c9 url(topnav_active.gif) repeat-x'
			}); //Add background color + image on hovered list item
			$(this).find("span").show(); //Show the subnav
		}, function() { //on hover out...
			$(this).css({
				'background' : 'none'
			}); //Ditch the background
			$(this).find("span").hide(); //Hide the subnav
		});

	});
</script>

</head>

<body>
<!--导航菜单栏  -->
<div class="container">	
	<h1></h1>
	<div style="clear: both; display: block; padding-bottom: 20px;">  <ul id="topnav">
        <li><a href="">首页</a></li>
        <li>
            <a href="">关于克明</a>
            <span>
                <a href="">企业介绍</a> |
                <a href="">发展历程</a> |
                <a href="">组织机构</a> |
				<a href="">企业风采</a> |
                <a href="">领导关怀</a> |
				<a href="">企业荣誉</a>
            </span>
        </li>
        <li>
            <a href="">新闻中心</a>
            <span>
                <a href="">公司新闻</a> |
                <a href="">行业资讯</a> |
                <a href="">媒体报道</a>
            </span>
        </li>
        <li>
            <a href="">克明文化</a>
            <span>
                <a href="">企业文化</a> |
                <a href="">员工风采</a>               
            </span>
        </li>
        <li><a href="">克明产品</a>
			 <span>
                <a href="">挂面</a> |
                <a href="">调味酱</a>               
            </span>
		</li>
		 <li><a href="">品牌推广</a>
			 <span>
                <a href="">VI规范</a> |
                <a href="">品牌推广</a>               
            </span>
		</li>
		<li><a href="">售后服务</a>
			 <span>
                <a href="">售后服务</a> |
                <a href="">销售网络</a> | 
				<a href="">联系我们</a>
            </span>
		</li> 
		<li><a href="">投资者服务</a>
			 <span>
                <a href="">投资者互动平台</a>                            
            </span>
		</li>
		<li><a href="">加入克明</a>
			 <span>
                <a href="">人才战略</a> |
                <a href="">职位需求</a> |   
				 <a href="">简历提交</a>
            </span>
		</li>
		<li><a href="">联系我们</a>
			
		</li>
    </ul>
	

</div>
<br><br><br><br>
<div style="text-align:center;clear:both">
</div>
 
<div class="content_right">
  <div class="ad" >
    <ul class="slider" >
      <li><a href="#"><img src="images/buttom_0.jpg"/></a></li>
      <li><a href="#"><img src="images/buttom_1.jpg"/></a></li>
      <li><a href="#"><img src="images/buttom_2.jpg"/></a></li>
      <li><a href="#"><img src="images/buttom_3.jpg" /></a></li>
    </ul>
    <ul class="num" >
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航