分层导航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>

转载于:https://my.oschina.net/zst153516/blog/674066

分层导航and隐藏导航相关推荐

3.27课·········悬浮动态分层导航与隐藏导航
例1:分层导航 <title>分层导航</title> <script src="../JavaScript/jquery-1.4.2.min.js" ...
Android实现隐藏导航栏
在MainActivity上重载 onWindowFocusChanged 并填入相关内容隐藏android导航栏 /** 隐藏导航栏* */@Overridepublic void onWindow ...
【仿去哪儿】滑动隐藏导航栏
仿照去哪儿,隐藏导航栏(其实是设置为透明背景):向下滑动到时,当顶部图片看不见时,显示导航栏,源代码下载,效果如下: 主要思想:就是监听UITableView的滑动事件,当UITableView滑动一 ...
iOS 隐藏导航栏整个视图上移闪屏问题
2019独角兽企业重金招聘Python工程师标准>>> 在iOS开发中,特别是一些首页展示上要去掉导航栏(UINavigationBar). 最简单的办法在- (void)viewW ...
iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面有上移的异常动画的解决办法。
iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面有上移的异常动画的解决办法. 参考文章: (1)iOS11隐藏导航条后顶部有20单位的空白或者pop页面时明显感觉前一个页面 ...
全面屏适配方案,终极版,华为隐藏导航栏解决方案
全面屏适配方案,终极版,华为隐藏导航栏解决方案参考文章: (1)全面屏适配方案,终极版,华为隐藏导航栏解决方案 (2)https://www.cnblogs.com/lizhanqi/p/93371 ...
去除导航栏的背景色和底部1像素黑色线条or隐藏导航栏
一般项目我们都用创建一个公用的导航控制器,然后定义我们所需要的一些按钮啊样式啊等 - (void)pushViewController:(UIViewController *)viewContro ...
全志强制隐藏导航栏状态栏 Patch
modify 隐藏导航栏状态栏diff --git a/android/frameworks/base/core/res/res/values/dimens.xml b/android/framewo ...
隐藏导航栏或返回按钮
1 - (void)viewWillAppear:(BOOL)animated 2 { 3 [super viewWillAppear:animated]; 4 [self.navigationCon ...
19款探岳刷隐藏教程_三星S10系列如何隐藏导航栏官微“手把手”教你设置
三星于2月28日在乌镇正式发布国行版三星S10系列手机,无论是出色的外观设计,还是超强的性能,亦或是优秀的三摄成像,无不受到消费者的喜爱.但是,有消费者在使用三星S10系列搭载的One UI时却遇到了 ...

分层导航and隐藏导航

分层导航and隐藏导航相关推荐

最新文章

热门文章