分层导航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 ...
随机推荐
- C# BeginInvoke
在用C#编写串口助手时,希望创建线程更新UI,网上有人采用BeginInvoke方法, 这里记录一下使用方法. 参考链接: http://blog.csdn.net/zaijzhgh/article/ ...
- Redis实现分布式锁
http://redis.io/topics/distlock 在不同进程需要互斥地访问共享资源时,分布式锁是一种非常有用的技术手段. 有很多三方库和文章描述如何用Redis实现一个分布式锁管理器,但 ...
- iOS ASIHTTPRequest 使用指南
http://www.devdiv.com/iOS_iPhone-ASIHTTPRequest使用指南---_lt__lt_翻译稿_gt__gt_---连载-thread-93741-1-1.html
- 30天，O2O速成攻略【7.19深圳站】
活动概况 时间:2015年07月19日13:30-16:30 地点:深圳腾讯大厦(南山区科技园科技中一路)2楼多功能厅 主办:APICloud.OneAPM.连接科技 网址:www.apicloud. ...
- Android适配（屏幕适配、国际化适配）-转
首先来说一下Android的屏幕适配: 关于Android屏幕的一些基本概念知识,自行充电..在此只介绍实际开发过程中的使用 1.说到Android的屏幕适配,首当其冲的就是图片的适配 图片适配遵循两 ...
- Intellij IDEA 创建控制台项目，断点调试
在idea 2016中创建一个控制台项目(经常会忘) 打开创建界面 注意,什么都不要选,点击next(最坑的地方,经常忘) 再次点击next ============================= ...
- 利用DBCC PAGE查看SQL Server中的表和索引数据
16:08 2013-01-06 参考http://doc.chinaunix.net/sqlserver/200810/206034.shtmlDBCC PAGE|IND 参数 DBCC PAGE ...
- curl命令常见用法汇总 good
curl是一种命令行工具,作用是发出网络请求,然后得到和提取数据,显示在"标准输出"(stdout)上面. curl是一个强大的命令行工具,它可以通过网络将信息传递给服务器或者从服 ...
- 浅谈C# 匿名变量
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- java.net.BindException: Address already in use: JVM_Bind
是端口占用,如果修改端口后仍提示这样的错误,可能是eclipse自动关闭或正在运行服务非正常中断导致端口没有关闭,这时你再启动,还是提示java.net.BindException: Address ...