分层导航and隐藏导航
一、分层导航
<!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>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分层导航练习</title>
</head>
<style>
#a
{
border:1px solid #3CF;
width:300px;
height:auto;
position:fixed;
left:auto;
top:auto;
z-index:2;
text-align:center;
font-size:18px;
font-family:"黑体";
font-weight:bolder;
color:#000;
line-height:40px;
background-image:url(img/aaa/91bddbc99e97ccfdb0dd1f1587f3f8bf.jpg);
} .daohang div
{
z-index:2;
overflow:hidden;
}
.daohang div:hover
{
border:1px solid #0F0;
background-color:#C90;
z-index:2;
overflow:visible;
} .daohang a,a:visited
{
text-decoration:none;
}
.daohang a:hover
{
color:#C00;
} </style>
<body>
<div id="a">
<img src=""/>
<nav id="menu">
<div class="daohang">
<div><a href="http://map.baidu.com/" target="_blank">首页</a></div>
<div><a href="http://www.dili360.com/" target="_blank">国内游</a></div>
<div> <a href="http://www.nationalgeographic.com.cn/" target="_blank">国外游</a></div>
<div><a href="http://www.viaspace.cn/" target="_blank">太空游</a></div>
<div><a href="http://www.baidu.com" target="_blank">公司信息</a></div>
</div>
</nav>
<div class="g" style="background:#3FF;">
<input type="button" value="<-MENU->" onclick="menuvisible()"/>
</div>
</div> </body>
</html>
<script>
function menuvisible()
{
$("nav").slideToggle(1500);
}
</script>
二、隐藏导航
<title>隐藏导航</title>
<style type="text/css">
*
{
font-size:24px;
text-align:center;
line-height:50px;
}
.a
{
color:#F00;
border:0px solid #000;
width:150px;
height:50px;
background-color:#FF0;
position:fixed;
left:30px;
top:30px;
overflow:hidden; }
.aa
{
color:#F00;
border:0px solid #000;
width:150px;
height:50px;
background-color:#93F;
position:fixed;
left:30px;
top:30px;
overflow:visible;
}
.b
{
width:150px;
height:50px;
top:50px;
left:0px;
overflow:hidden;
}
.bb
{
width:150px;
height:50px;
top:50px;
left:0px;
overflow:visible;
} .c
{
width:450;
height:200;
position:relative;
left:150px;
top:-50px;
}
table
{
border="0";
width:450px;
height:200px;
} </style>
</head> <body>
<div class="a" onmouseover="this.className='aa'" onmouseout="this.className='a'">菜单 <div class="b" style="background-color:#0099ff" onmouseover="this.className='bb'" onmouseout="this.className='b'">手机
<div class="c">
<table bgcolor="#0099ff" cellspacing="0" cellpadding="0">
<tr>
<td>苹果</td>
<td>三星</td>
<td>华为</td>
</tr>
<tr>
<td>中兴</td>
<td>联想</td>
<td>酷派</td>
</tr>
<tr>
<td>小米</td>
<td>魅族</td>
<td>htc</td>
</tr>
<tr>
<td>乐视</td>
<td>vivo</td>
<td>OPPO</td>
</tr>
</table>
</div>
</div>
<div class="b" style="background-color:#FF3" onmouseover="this.className='bb'" onmouseout="this.className='b'">笔记本
<div class="c">
<table bgcolor="#ff3" cellspacing="0" cellpadding="0">
<tr>
<td>Apple</td>
<td>acer</td>
<td>联想</td>
</tr>
<tr>
<td>戴尔</td>
<td>神舟</td>
<td>惠普</td>
</tr>
<tr>
<td>华硕</td>
<td>清华同方</td>
<td>东芝</td>
</tr>
<tr>
<td>Thinkpad</td>
<td>麦本本</td>
<td>索尼</td>
</tr>
</table>
</div>
</div>
<div class="b" style="background-color:#0FF" onmouseover="this.className='bb'" onmouseout="this.className='b'">汽车
<div class="c">
<table bgcolor="#0ff" cellspacing="0" cellpadding="0">
<tr>
<td>奔驰</td>
<td>宝马</td>
<td>法拉利</td>
</tr>
<tr>
<td>斯巴鲁</td>
<td>玛莎拉蒂</td>
<td>布加迪威龙</td>
</tr>
<tr>
<td>奥迪</td>
<td>保时捷</td>
<td>路虎</td>
</tr>
<tr>
<td>道奇</td>
<td>甲壳虫</td>
<td>雷克萨斯</td>
</tr>
</table>
</div>
</div>
</div> </body>
</html>
分层导航and隐藏导航的更多相关文章
- iOS之滑动隐藏导航
滑动隐藏导航狼栏 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.content ...
- 关于iOS导航控制器隐藏和显示会出现返回键失效,导航栏标题动画异常
最近做的demo bug出现了,我觉得这个bug出现得很经典所以贴出来给大家看看, bug演示就是:点击返回键失效出现如下gif图演示的内容 为啥会出现如此奇葩的bug,系统的返回键居然失效了,尴尬 ...
- iOS 滑动隐藏导航栏-三种方式
/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...
- 隐藏左侧快速导航除DMS导航树之外的其他区域
<style type="text/css"> /*隐藏左侧快速导航除DMS导航树之外的其他区域*/ .ms-quicklaunchouter { display: n ...
- HTML&CSS----练习隐藏导航栏（初级）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 安卓ROOT后禁用/隐藏导航栏/虚拟按键
安卓ROOT后禁用/隐藏导航栏/虚拟按键 提醒:提前装好EASY TOUCH 等类似工具. 用ROOT EXPLORER 或 ROOT BROWSER system\bulid.prop 最后加一行: ...
- iOS 隐藏导航条分割线
// 导航条分割线 @property (nonatomic, strong) UIView *navSeparateView; // 获取导航条分割线 UIView *backgroundView ...
- iOS正确解决隐藏导航栏后push和pop或dismiss和present闪黑问题
情景: 一级页面不显示导航栏 ,二级页面显示导航栏. 方法一 适用于push/pop: 一级页面中 - (void)viewWillAppear:(BOOL)animated { [super vie ...
- AMScrollingNavbar框架(自动隐藏导航栏)使用简介
AMScrollingNavbar框架是一个可以上拉隐藏导航栏和下拉显示导航栏的框架,这个开源框架的调用也很简单,本章节就给大家介绍一下这个框架的用法. 一.下载及导入框架 AMScrollingNa ...
随机推荐
- H264(NAL简介与I帧判断)
1.NAL全称Network Abstract Layer, 即网络抽象层. 在H.264/AVC视频编码标准中,整个系统框架被分为了两个层面:视频编码层面(VCL)和网络抽象层面(N ...
- 网页中的超链接<a>标签
格式: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 注意:为文本加入<a>标签 ...
- mysqlnd cannot connect to MySQL 4.1+ using the old insecure authentication解决办法
mysqlnd是个好东西.不仅可以提高与mysql数据库通信的效率,而且也可以方便的设置一些超时.如,连接超时,查询超时.但是,使用mysqlnd的时候,有个地方需要注意.就是服务端的密码格式不能使用 ...
- Linux-modules software
简介 这里指的modules不是linux内核相关的module,只是用于软件多版本控制的一个开源软件包,比如说系统同时有neo4j的不同版本,使用modules软件就可以使得在需要的时候选择相应的软 ...
- HTML-001-日期组件 layDate 演示
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式 ...
- 【转】Android新组件Material Dialog，SwipeRefreshLayout，ListPopupWindow，PopupMenu等
朝花夕拾----新组件的学习和使用 分类: Android UI2015-06-26 11:31 440人阅读 评论(0) 收藏 举报 uidialogMaterial 目录(?)[-] Mate ...
- How to read the HTML DTD
Contents How to read the HTML DTD 1. DTD Comments 2. Parameter Entity definitions 3. Element declara ...
- 实现简易的android 直播技术
Android 的直播,主要使用的是camera采集的数据推流到服务器上,在客户端播放camera采集的数据.采用SurfaceView+ SurfaceTexture来显示camera数据, Sur ...
- disable jboss JMXInvokerServlet .
jboss 默认有几个控制台,都是可能存在漏洞被黑客利用,除了web console .jmx console. 还有JMXInvokerServlet,访问路径是ip/invoker/JMXInvo ...
- JQuery 操作HTML元素 示例
http://www.w3school.com.cn/jquery/jquery_dom_add.asp http://www.w3school.com.cn/jquery/jquery_dom_re ...