话不多说,先上html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'navigation.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="css/style04/module/navigation.css">
<script type="text/javascript" src="js/jquery1.4.js"></script>
<script type="text/javascript" language="javascript" src="js/style04/navigation.js" charset="gb2312"></script>
</head>
<body>
<div class="navigation">
<div class="navigation_left"></div>
<ul>
<li class="selected">网站首页</li>
<li >通知公告</li>
<li >平台介绍</li>
<li >成果资源</li>
<li >推荐专家</li>
<li >展会活动</li>
<li >政策法规</li>
<li >相关下载</li>
</ul>
<div class="navigation_text_right"></div>
<div id="Clock" class="navigation_right"></div>
</div>
</body>
</html>
js代码:
function tick() {
var dateString;
var day = "";
var month = "";
var ampm = "";
var ampmhour = "";
var myweekday = "";
var year = "";
mydate = new Date();
myweekday = mydate.getDay();
mymonth = mydate.getMonth() + 1;
myday = mydate.getDate();
myyear = mydate.getYear();
year = (myyear > 200) ? myyear : 1900 + myyear;
if (myweekday == 0)
weekday = " 星期天";
else if (myweekday == 1)
weekday = " 星期一 ";
else if (myweekday == 2)
weekday = " 星期二";
else if (myweekday == 3)
weekday = " 星期三";
else if (myweekday == 4)
weekday = " 星期四";
else if (myweekday == 5)
weekday = " 星期五";
else if (myweekday == 6)
weekday = " 星期六";
dateString = year + "年" + mymonth + "月" + myday + "日" + weekday;
$("#Clock").html(dateString);
}
window.onload = tick;
$(function() {
var $div_li = $(".navigation ul li");
$div_li.click(function() {
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
}).hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
})
})
css代码:
@CHARSET "UTF-8";
.navigation{
width:1000px;
height:35px;
background-image: url("../../../images/style04/module/navigation_bg.jpg");
background-repeat: repeat-x;
}
.navigation_left{
float:left;
width:21px;
height:35px;
background-image: url("../../../images/style04/module/navigation_left.jpg");
background-repeat: no-repeat;
background-position: left;
}
.navigation li{
float:left;
list-style: none;
width:90px;
height:35px;
font-size: 14px;
line-height: 35px;
font-weight: bold;
color:#FFF;
text-align: center;
cursor:pointer;
}
.navigation li.selected{
float:left;
list-style: none;
width:90px;
height:35px;
background-image: url("../../../images/style04/module/navigation_text_bg.jpg");
background-repeat: no-repeat;
font-size: 14px;
line-height: 35px;
font-weight: bold;
color:#823001;
text-align: center;
}
.navigation li.hover{
background:#DFDFDF;
}
.navigation_text_left{
float:left;
list-style: none;
width:92px;
height:35px;
background-image: url("../../../images/style04/module/navigation_text_left.jpg");
background-repeat: no-repeat;
background-position: left;
font-size: 14px;
line-height: 35px;
font-weight: bold;
text-align: center;
color:#FFF;
}
.navigation_text_left:hover{
float:left;
width:90px;
height:35px;
background-color:red;
font-size: 14px;
line-height: 35px;
font-weight: bold;
text-align: center;
color:red;
}
.navigation_right{
float:right;
width:166px;
height:35px;
background-image: url("../../../images/style04/module/navigation_right.jpg");
background-repeat: no-repeat;
background-position: right;
font-size: 13px;
line-height: 35px;
color:#FCFD86;
}
.navigation_text_right{
float:left;
width:45px;
height:35px;
background-image: url("../../../images/style04/module/navigation_text_left.jpg");
background-repeat: no-repeat;
background-position: right;
}
分享到:
相关推荐
很棒的js特效,js特效 图片特效 导航特效 鼠标特效
CSS3鼠标悬停图标导航动画特效是一款简洁清爽风格鼠标悬停动画切换特效。
导航特效 鼠标事件 鼠标经过显示二级菜单
鼠标经过切换背景的jquery导航条特效,供大家一起共同分享学习。
css3竖直导航栏鼠标点击导航水波动画特效 css3竖直导航栏鼠标点击导航水波动画特效 css3竖直导航栏鼠标点击导航水波动画特效
这是一款Material Design风格鼠标滑过导航菜单特效。该导航菜单特效简单实用,可以制作出非常漂亮的鼠标滑过导航菜单时的下划线动画效果。
jQuery带子导航菜单特效是一款实用的带子导航的导航菜单效果,鼠标滑过主菜单自动显示子导航菜单。
HoverSlippery是一款可以制作导航超链接鼠标滑过动画特效的jQuery插件。该插件可以制作4种鼠标滑过效果,分别是:胶囊跟随效果,双线跟随效果,下划线跟随效果和上划线跟随效果。
js 特效 html 特效 鼠标使图片变化导航 js 特效 html 特效 鼠标使图片变化导航
js 特效 html 特效 各种形状的鼠标 js 特效 html 特效 各种形状的鼠标
js鼠标放置椭圆菜单导航特效
插件描述:css3鼠标悬停导航栏特效. 参考示例:http://www.jq22.com/jquery-info5219
css3文字导航鼠标悬停气泡动画特效
隐藏在左边的导航菜单鼠标经过弹出jquery特效
css3导航菜单鼠标滑过特效下拉菜单翻转动画效果,导航是我们网站必不可少的一部分,我们可以给导航做出很多效果出来,当我们点击导航可以看到我们想要的一些内容,无论是企业网站或者商城网站都需要导航,例如联系...
js 特效 html 特效 鼠标下的导航链接 js 特效 html 特效 鼠标下的导航链接
jQuery+CSS3鼠标悬停动画导航菜单特效,三款绿色美观的网站导航条动画代码,效果简洁又好看,值得下载。