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 ...

随机推荐

CentOS 5.x版本升级PHP
#-----------------------------CentOS 5.x版本升级PHP------------------#! /bin/sh #1.关闭selinuxcp -rp /etc/ ...
[leetcode]_String to Integer (atoi)
非常考虑思维全面性的一道题,考验是否能够考虑本问题的方方面面. 题目:将一个string转换为int.实现函数atoi()的功能. 先应该明确atoi()有哪些特殊功能:(正常的正负数情况我就不列了) ...
Hbase负载均衡流程以及源码
hmater负责把region均匀到各个region server .hmaster中有一个线程任务是专门处理负责均衡的,默认每隔5分钟执行一次. 每次负载均衡操作可以分为两步: 生成负载均衡计划表 ...
Java 中判断两个对象是否相等
由于每次实例化一个对象时,系统会分配一块内存地址给这个对象,而系统默认是根据内存地址来检测是否是同一个对象,所以就算是同一个类里实例化出来的对象它们也不会相等. public class Transp ...
删除map容器中指定的元素
for (std::map<Int64,Int64>::iterator iter = ips_forbidden_.begin(); iter != ips_forbidden_.end ...
状态可以通过动画切换的按钮--第三方开源--TickPlusDrawable
Android tickplusdrawable(TickPlusDrawable)在github上的项目主页是:https://github.com/flavienlaurent/tickplusd ...
4.html5中超链接
html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有 ...
关于activity_main.xml与fragment_main.xml
第一种解决办法新版安装SDK文件一开始有两个XML文件,activity_main.xml和fragment_main.xml,不习惯的可以这样处理:1.删除fragment_main.xml整个文 ...
hdu1007
Have you ever played quoit in a playground? Quoit is a game in which flat rings are pitched at some ...
struts2传递参数值的3中方式
在使用struts2的时候,当要传递的参数不多的时候,我们会选择使用属性来传参,而当要传递的参数很多的时候,或者多个action会有共用的参数时,我们会使用另外两种传参方式. 注意:使用Model D ...

CSS水平导航条和纵向导航条

CSS水平导航条和纵向导航条的更多相关文章

随机推荐

热门专题