CSS水平导航条和纵向导航条
问题描述:
使用CSS制作水平导航条和纵向导航条
问题解决:
(1)水平导航条
1.1 效果预览:
1.2 具体实现:文件hnav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>水平导航条</title>
<style type="text/css">
#menu {
font: 12px verdana, arial, sans-serif;
} #menu,#menu li {
list-style: none;
padding: 0;
margin: 0;
} #menu li {
float: left;
} #menu li a {
display: block;
width: 100px;
padding: 8px 50px;
background: #3A4953;
color: #fff;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
} #menu li a:hover {
background: #146C9C;
color: #fff;
text-decoration: none;
border-right: 1px solid #000;
} #menu li a.last {
border-right: 0; /* 去掉左侧边框 */
} .second {
width: 100px;
background: #C30431;
display: none;
} .second a {
display: block;
height: 20px;
line-height: 20px;
color: #fff;
border-top: 1px solid #000;
text-align: center;
/*border-bottom: dashed 1px #E67A92;*/
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).children("div").show();
}, function() {
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a>
<div class="second">
<a>新闻</a> <a>影音</a> <a>娱乐</a>
</div></li>
<li><a href="http://www.Code52.Net">Code52.Net</a>
<div class="second">
<a>首页</a> <a>新闻</a> <a>建议</a>
</div></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
</ul>
</body>
</html>
注意要点:
1、 ul li 需要使用float:left设置
2、 ul li a 需要设置display:block ,其下拉菜单这里使用的是<div>块
2、垂直导航条
2.1 效果预览:
2.2 具体实现:文件lnav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.nav {
float: left;
position: relative;
width: 253px;
} h2,ul,p {
margin: 0;
padding: 0;
text-align: center;
} h2 {
font-weight: 400;
font-size: 100%;
background: #9B203F;
border-bottom: solid 1px #500C1B;
} h2 a {
list-style-type: none;
height: 37px;
color: #fff;
line-height: 37px;
} ul {
font-size: 0;
background: #9B203F;
padding: 0 0 40px;
float: left;
} ul li {
list-style-type: none;
color: #fff;
font-size: 14px;
padding: 0 20px; /*上内边距和下内边距为0px;左内边距和右内边距为20px */
height: 34px;
line-height: 34px;
position: relative;
float: left;
} ul li a {
display: block;
width: 196px;
border-bottom: dashed 1px #E67A92;
} ul li.hover_bg {
background: #C30431;
} .dropdownMenu {
width: 253px;
background: #C30431;
position: absolute; /*这里的定位“相对于” 已经定位的祖先元素ul li 定位 */
right: -253px; /*该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移*/
top: 0;
padding-bottom: 30px;
display: none;
} .dropdownMenu p {
padding: 0 20px;
} .dropdownMenu a {
display: block; /*此元素将显示为块级元素,元素前后带有换行符*/
height: 34px;
line-height: 34px;
color: #fff;
border-bottom: dashed 1px #E67A92;
} a {
cursor: pointer;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".nav ul li").hover(function() {
$(this).addClass("hover_bg");
$(this).children("div").show();
}, function() {
$(this).removeClass("hover_bg");
$(this).children("div").hide();
});
});
</script>
</head> <body>
<div class="nav">
<h2>
<a>全部商品分类</a>
</h2>
<ul>
<li><a>图书、音像、数字商品</a>
<div class="dropdownMenu">
<p>
<a>电子书</a> <a>数字音乐</a> <a>音像</a> <a>文艺</a> <a>人文社科</a> <a>生活</a> <a>科技</a>
<a>教育</a>
</p>
</div></li>
<li><a>家用电器</a>
<div class="dropdownMenu">
<p>
<a>大家电</a> <a>生活家电</a> <a>厨房家电</a> <a>个人健康</a> <a>五金家电</a>
</p>
</div></li>
<li><a>电脑办公</a>
<div class="dropdownMenu">
<p>
<a>电脑整机</a> <a>电脑配件</a> <a>外设产品</a> <a>网络产品</a> <a>办公打印</a>
</p>
</div></li>
</ul>
</div>
<!--nav-->
</body>
</html>
注意要点:
1、ul li list-style-type:none 去除ul列表前圆圈。
2、ul li position:relative 设置相对定位
3、.dropMenu position:absolute 设置绝对定位,同时设置width:253px; right:-253px; top:0px;
CSS水平导航条和纵向导航条的更多相关文章
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- div+css+position实现简单的纵向导航栏
完成效果: 这应该是很简单的纵向导航栏了. OK,进入正题 首先,我们看上面的效果图可以分析得出,要实现这个效果需要用到的技术点 1.hover 2.position 3.布局 我认为在这个效果的实现 ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 控制器隐藏了导航 下页pop 导航位置看到黑条
控制器隐藏了导航 下页pop 导航位置看到黑条 解决: -(void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
- Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位 1)纵向列表 可以看 ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- PeopleSoft Object Types Definitions
PeopleSoft stores object definitions types such as Record, Field and SQL definitions as numbers in ...
- [leetcode]_Balanced Binary Tree
第四道树题,逐渐能写递归了.虽然最后AC的代码还是看了网络,但是距离成功攻克此类问题仅一步之遥. 题目:一棵树,判断是否为AVL.(AVL条件:树上任意一点的左右子树的高度差<=1) 思路:树依 ...
- Sliverlight中PagedCollectionView的使用
最近项目中一直在和PagedCollectionView这个类打交道.通过它,我们可以以分页的形式自动处理并显示集合中的片段,尤其是和Pager控件配合的时候更能彰显其威力. PagedColecti ...
- mysql列属性auto(mysql笔记四)
常见的的是一个字段不为null存在默认值 没值得时候才去找默认值,可以插入一个null到 可以为null的行里 主键:可以唯一标识某条记录的字段或者字段的集合 主键设置 主键不可为null,声明时自动 ...
- php 安装xdebug扩展
php 扩展获取地址 http://pecl.php.net/package/ 编译安装的过程 wget http://pecl.php.net/get/xdebug-2.2.2.tgz tar -z ...
- php或js判断网站访问者来自手机或者pc
php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下: ...
- 安装mysql 5.7 最完整版教程
Step1: 检测系统是否自带安装mysql #yum list installed | grep mysql Step2: 删除系统自带的mysql及其依赖 命令: yum remove mysql ...
- Java 第五天 Spring IOC 配置文件
Spring xml结构定义文件: http://www.springframework.org/schema/beans/spring-beans.xsd 可用xsd列表: http://www.s ...
- Oracle sql trace
一.SQL_TRACE说明 1.1.在全局启用 在参数文件(pfile/spfile)中指定:sql_trace =true 1.2.在当前session级设置 启用当前session的跟踪: alt ...
- 第二节:AppDomain
CLR COM服务器初始化时,会创建一个AppDomain.AppDomain是一组程序集的逻辑容器.CLR初始化时创建的第一个AppDomain称为默认的AppDomain,这个默认的AppDoma ...