asp导航条子菜单横向
示意图：（代码红色部分为主要。）
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>实验室管理</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
body {margin:0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
/*New Nav Style*/
#nav{ height:49px; position:relative; width:1100px; margin:20px auto;}
#nav .l{ height:49px; width:28px; float:left}
#nav li { float:left; list-style:none;text-align:center;font-size:14px; }
#nav li .v a{ width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; }
#nav li .v a:hover,#nav li .v .sele{color:#fff;height:49px;line-height:49px; font-size:14px;}
#nav .kind_menu { height:30px;height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;}
#nav .kind_menu a {color:#000; float:left; text-align:center; width:80px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px; text-decoration:none;}
#nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid; text-decoration:none;}
#nav .kind_menu span { font-size:10px; color:#000; line-height:30px; line-height:26px; float:left }
Style Attribute
{
text-align: center;
}
#div_list
{
background: #33CCFF;
height: 40px;
width: 1100px;
margin: 0 0 10px 0;
}
#div_foot
{
height: 50px;
font-size: xx-large;
}
.clr
{
clear: both;
}
.style17
{
text-align: center;
width: 485px;
}
.style18
{
color: #00FF00;
}
.style19
{
font-size: x-large;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul#nav li").hover(function () { //Hover over event on list item
$(this).find("span").show().css({ 'background': '#33CCFF', 'display': 'block' }); //Show the subnav
}, function () { //on hover out...
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="width: 1100px; margin: 1px auto; list-style-type: square;">
<div id="div_head1" style="background-image: url('img/head.png'); background-repeat: no-repeat;
background-attachment: scroll;">
<asp:Image ID="Image1" runat="server" Height="84px" ImageUrl="~/img/logo.gif" Width="99px" />
<span class="style19"><strong>机电一体化实验室信息管理系统</strong></span>
<br />
<br />
</div>
<div id="div_time" style="height: 30px; width: 1100">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick1">
</asp:Timer>
<asp:TextBox ID="tb_timer" runat="server" ReadOnly="True" BorderStyle="None" Width="186px"></asp:TextBox>
<span class="style3"> <span class="style18"> 为研发服务
为生产服务 为社会服务</span></span> <asp:Label ID="Label1" runat="server"
Style="text-align: left" Text="欢迎您："></asp:Label>
<asp:Label ID="Label2" runat="server" Text=" xxx"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="div_main">
<div id="div_list">
<div id="nav">
<div class="l">
</div>
<ul class="c">
<li class="nav_lishw" id=""><span class="v"><a href="2.aspx" target="_blank"
class="sele">首页</a></span>
<div class="kind_menu"
style="font: small serif; left: 30px; display: block; color: #FF0000;">
欢迎您访问本系统!
</div>
</li>
<li class="" id=""><span class="v"><a href="#" class="">实验室导航</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="2_1.aspx">实验室文化</a> <span>|</span> <a href="#">管理制度</a> <span>|</span> <a href="2_3.aspx">
试验流程</a><span>|</span> <a href="#">实验内容</a><span>|</span> <a href="#">实验平台</a>
</div>
</li>
<li class="" id=""><span class="v"><a href="#" class="">实验管理</a></span>
<div class="kind_menu" style="display: none;">
<a href="#">实验申请</a> <span>|</span> <a href="#">试验计划</a> <span>|</span> <a href="3_3.aspx">
当前实验</a> <span>|</span> <a href="#">实验报告</a> <span>|</span> <a href="#">实验查询</a>
</div>
</li>
<li class="" id=""><span class="v"><a href="#" class="">项目管理</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="#">项目申请</a> <span>|</span> <a href="#">项目计划</a> <span>|</span> <a href="#">
在研项目</a> <span>|</span> <a href="#">项目介绍</a> <span>|</span> <a href="#">项目总结</a>
<span>|</span> <a href="#">项目查询</a>
</div>
</li>
<li class="" id=""><span class="v"><a href="#" class="">物资管理</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="#">基本实验条件</a> <span>|</span> <a href="#">物资库</a> <span>|</span> <a href="#">
材料库</a> <span>|</span> <a href="#">元件库</a> <span>|</span> <a href="#">工具库</a>
<span>|</span> <a href="#">设备库</a> <span>|</span> <a href="#">挂件库</a> <span>|</span>
<a href="#">资料库</a> <span>|</span> <a href="#">新品库</a> <span>|</span> <a href="#">配套实验条件</a>
</div>
</li>
<li class="" id=""><span class="v"><a href="#" class="">资料管理</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="#">资料查询</a> <span>|</span> <a href="#">资料添加</a> <span>|</span> <a href="#">
资料修改</a> <span>|</span> <a href="#">资料下载</a>
</div>
</li>
<li class="" id="Li1"><span class="v"><a href="#" class="">通知通告</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="7_1.aspx">通知查询</a> <span>|</span> <a href="#">通知通告</a> <span>|</span> <a href="#">
通知发布</a>
</div>
</li>
<li class="" id="Li2"><span class="v"><a href="#" class="">学生风采</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="#">实验室活动</a> <span>|</span> <a href="#">实验室项目</a> <span>|</span> <a href="#">
实验室成果</a> <span>|</span> <a href="#">优秀团队</a> <span>|</span> <a href="#">优秀个人</a>
</div>
</li>
<li class="" id="Li3"><span class="v"><a href="#" class="">工厂信息化</a></span>
<div class="kind_menu" style="left: 10px; display: none;">
<a href="#">信息化概念</a> <span>|</span> <a href="#">信息化实例</a> <span>|</span> <a href="#">
信息化模拟</a> <span>|</span> <a href="#">信息化实践</a>
</div>
</li>
</ul>
</div>
</div>
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script type="text/javascript">
var site_url = window.location.href.toLowerCase();
switch (true) {
default:
$("#nav li").attr("class", "");
$("#nav li").eq(0).attr("class", "nav_lishw");
$(".nav_lishw .v a").attr("class", "sele");
$(".nav_lishw .kind_menu").show();
}
$("#nav li").hover(
function () {
clearTimeout(setTimeout("0") - 1);
$("#nav .kind_menu").hide();
$("#nav li .v .sele").attr("class", "shutAhover");
$(this).attr("id", "nav_hover")
$("#nav_hover .v a").attr("class", "sele");
$("#nav_hover .kind_menu").show();
},
function () {
if ($(this).attr("class") != "nav_lishw") {
$("#nav_hover .v .sele").attr("class", "");
$("#nav_hover .kind_menu").hide();
}
$(this).attr("id", "")
$("#nav li .v .shutAhover").attr("class", "sele");
setTimeout(function () {
$(".nav_lishw .kind_menu").show();
$(".nav_lishw .v a").attr("class", "sele");
}, 50);
}
);
</script>
<div class="clr">
</div>
<div id="div_foot">
<p class="style17" style="background-color: #33CCFF; width: 1100px">
<span style="color: rgb(0, 0, 0); font-family: 宋体; font-size: 12px; font-style: normal;
font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px;
orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal;
widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important;
float: none;">版权所有</span><font style="color: rgb(0, 0, 0); font-size: 12px; font-style: normal;
font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px;
orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal;
widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: Arial, Helvetica, sans-serif;">©</font><span
style="color: rgb(0, 0, 0); font-family: 宋体; font-size: 12px; font-style: normal;
font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px;
orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal;
widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important;
float: none;"><span class="Apple-converted-space"> </span>2008-2013<span class="Apple-converted-space"> xxx </span>-
专业网站建设服务平台<span class="Apple-converted-space"> </span></span></p>
</div>
</div>
</div>
</form>
</body>
</html>
asp导航条子菜单横向的更多相关文章
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- Orchard官方文档翻译(七) 导航与菜单
原文地址:http://docs.orchardproject.net/Documentation/Navigation-and-menus 想要查看文档目录请用力点击这里 最近想要学习了解orcha ...
- Android实现下拉导航选择菜单效果
本文介绍在Android中如何实现下拉导航选择菜单效果. 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左 ...
- Jetpack Compose学习(7)——MD样式架构组件Scaffold及导航底部菜单
Jetpack Compose学习(7)--MD样式架构组件Scaffold及导航底部菜单 | Stars-One的杂货小窝 Compose给我们提供了一个Material Design样式的首页组件 ...
- Android导航菜单横向左右滑动并和下方的控件实现联动
这个是美团网个人订单的效果,找了很多地方都没找到,自己研究了两天终于弄出来了^_^,有什么问题希望大家指出来,谢谢. 实现原理是上方使用HorizontalScrollView这个可以水平横向拖动的控 ...
- 关于CSS样式的那些事_导航条菜单讲解
最近开始忙着开自己的个人博客了,自己的前端确实是渣渣.没办法,一步步来,从慕课网上慢慢学着先. 首先带来的是一个导航栏的设计: 垂直导航栏的设计: 直接上代码: <!DOCTYPE html P ...
- [译]：Orchard入门——导航与菜单
原文链接:Navigation and Menus 文章内容基于Orchard1.8版本.同时包含Orchard 1.5之前版本的导航参考 Orchard有许多不同的方法来创建菜单.本文将介绍两种较为 ...
- [转]asp三级select菜单联动（加数据库）
'数据库结构'类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称'类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aI ...
- 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- npapi加载失败的几个原因
本文只讨论加载失败的原因,不复述npapi的使用教程 1. 资源文件是否加上 MIMEType命名的id,和html中的<object>的标签是否对应 如果不相同加载必然失败: 2. 注册 ...
- BZOJ 4000: [TJOI2015]棋盘( 状压dp + 矩阵快速幂 )
状压dp, 然后转移都是一样的, 矩阵乘法+快速幂就行啦. O(logN*2^(3m)) ------------------------------------------------------- ...
- Android安装应用失败UID 和 PID
参考:http://blog.sina.com.cn/s/blog_62ef2f140101j6q2.html 安装任意第三方的一个apk,恢复出厂设置,再次安装相同的apk,提示安装失败,通过打印L ...
- 重拾javascript动态客户端网页脚本
笔记一: 一.DOM 作用: · DOM(Doument Object Model) 1.document文档 HTML 文件 (标记语言) <html> < ...
- Window下 Qt 编译MySQL驱动（居然用到了动态库格式转换工具）
一步步在Window下开发Qt 今天开始安装MySQL,看了些关于MySQL安装的博文,方法大致相同,但是遇到的细节问题各有不同,或者没有讲全面,下面来说说个人的安装过程及遇到的问题. 1.首先下载, ...
- Qt在windows与Mac OS中获取执行程序版本号
1 windows中获取执行文件exe的版本号 QString GetFileVertion(QString aFullName) { QString vRetVersion; string vF ...
- Codeforces 711E ZS and The Birthday Paradox（乘法逆元）
[题目链接] http://codeforces.com/problemset/problem/711/E [题目大意] 假设一年有2^n天,问k个小朋友中有两个小朋友生日相同的概率. 假设该概率约分 ...
- 蓝桥杯之FBI树问题
问题描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&q ...
- aliyun opts 集锦
<一,>,aliyun 使用数据盘(aliyun新增数据盘使用,创建vg,aliyun 镜像系统本身未使用lvm-vg-lv) 1.1直接挂载文件系统 较易,不做分析 http://hel ...
- 封装的localstorge的插件，store.js
封装的localstorge的插件,store.js https://github.com/marcuswestin/store.js/