分层导航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 ...
随机推荐
- 变态的HelloWorld
public static void main(String[] args) { int i, n[] = { (((1 << 1) << (1 << 1) < ...
- NSNotificationCenter带参
(1)post Notification类 [[NSNotificationCenter defaultCenter] postNotificationName:CRMPerformanceNewCe ...
- pod》error:The dependency `` is not used in any concrete target
内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...
- angularJs：双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- 打开Apache自带的Web监视器
首先,需要打开httpd.conf中的mod_status模块,具体步骤为: 1.用VI打开文件/etc/httpd/conf/httpd.conf 2.在VI命令模式下,输入/server-stat ...
- dubbo的简单使用
整个过程大致是这样的 1.注册中心使用zookeeper,地址为192.168.192.128:2181! 2.首先服务方 所在的服务器是127.0.0.1:8081 服务方提供的接口: public ...
- Java的浮点数和整数的进制转换
整数的表达 –原码:第一位为符号位(0为正数,1为负数) –反码:符号位不动,原码取反 –负数补码:符号位不动,反码加1 –正数补码:和原码相同 -6 5 原码 10000110 0 ...
- Recompile the invalid object for oracle.
1. How does the invalid object come? The Oracle database will invalidate objects if a dependent obje ...
- oracle dump event
一.Memory Dumps 1).Global Area ALTER SESSION SET EVENTS 'immediate trace name global_area level n'; 1 ...
- [BS-22] Objective-C中nil、Nil、NULL、NSNull的区别
Objective-C中nil.Nil.NULL.NSNull的区别 1.定义: nil: OC语言定义:#define nil __DARWIN_NULL / #define __D ...