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基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- Scala io操作
1. 读文件 scala特有的是scala.io.Source,例如: import scala.io._ Source.fromFile(“cn.scala”,”utf8”).mkString 逐行 ...
- poj3162 Walking Race
题目大意:给一个树形图n个点(n-1条边),XXX要练习竞走,每次选定一个点k作为开始点,每次走从k开始能走的最长的一条路径(不要重边).要求出最长的连续的这样的k,假设连续有kx个,前提:这样kx条 ...
- HDU 5584 LCM Walk（数学题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5584 题意:(x, y)经过一次操作可以变成(x+z, y)或(x, y+z)现在给你个点(ex, e ...
- Anndroid 开发架构读书笔记
市面上大部分应用不外乎就是颠过来倒过去地做以下这些事情: --------------- --------------- --------------- --------------- | | | | ...
- codeforces 510E. Fox And Dinner 网络流
题目链接 给出n个人, 以及每个人的值, 要求他们坐在一些桌子上面, 每个桌子如果有人坐, 就必须做3个人以上. 并且相邻的两个人的值加起来必须是素数.每个人的值都>=2. 由大于等于2这个条件 ...
- zoj 3792 Romantic Value
题目链接 求最小割的值, 以及割边最少的情况的边数. 先求一遍最小割, 然后把所有割边的权值变为1, 其他边变成inf, 在求一遍最小割, 此时求出的就是最少边数. Inf打成inf WA了好几发. ...
- gmpy2安装使用方法
GMP(GNU Multiple Precision Arithmetic Library,即GNU高精度算术运算库),它是一个开源的高精度运算库,其中不但有普通的整数.实数.浮点数的高精度运算,还有 ...
- linux Bash bug修复记录
- 多线程中Local Store Slot(本地存储槽)
在Java中有一种ThreadLocal机制,为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可以独立地改变自己的副本,而不会和其它线程的副本冲突.从线程的角度看,就好像每一个线程都完全 ...
- HDU 5019 Revenge of GCD
题解:筛出约数,然后计算即可. #include <cstdio> #include <algorithm> typedef long long LL; LL a1[10000 ...