前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单

  在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少。

  实现逻辑:

        核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单)

        :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p。当用户鼠标离开元素时,恢复元素原有的样式显示

  实现代码:

   

<style type="text/css">
  *{margin: 0; padding: 0;}    ul{ list-style: none; }    a{text-decoration: none;}            .nav{ height: 50px;            font-size: 14px;              background-color:#0081C2;         }        .nav ul{ width: 90%; margin: 0 auto;}        .nav ul li{             display: inline-block;             width: 15%; height:50px;             text-align: center; line-height: 45px;            position: relative;            }
/*menu相对li定位 并默认隐藏*/
 .menu{ position: absolute;                left: 0; top:50px;                width: 100%; background-color: #005580;                 line-height: 33px;                display: none;              }        .menu p{ width: 100%; height: 35px;}        .menu p a:hover{ color: #dfdfdf;}        .nav ul li a{display: block;                     width: 100%;  height: 100%;                    color: #ffffff; text-align: center;                }  /*当li鼠标hover时显示*/        .nav ul li:hover{ background-color: #00007D;}        .nav ul li:hover .menu{ display: block;}       
    </style>

    <div class="nav">
        <ul>
            <li>
                <a href="#">菜单选项一</a>
                <div class="menu">
                    <p><a href="#">二级菜单1</a></p>
                    <p><a href="#">二级菜单2</a></p>
                    <p><a href="#">二级菜单3</a></p>
                    <p><a href="#">二级菜单4</a></p>
                </div>
            </li>
            <li>
                <a href="#">菜单选项二</a>
                <div class="menu">
                    <p><a href="#">二级菜单1</a></p>
                    <p><a href="#">二级菜单2</a></p>
                    <p><a href="#">二级菜单3</a></p>
                    <p><a href="#">二级菜单4</a></p>
                </div>
            </li>
            <li><a href="#">菜单选项三</a></li>
            <li><a href="#">菜单选项四</a></li>
            <li><a href="#">菜单选项五</a></li>
            <li><a href="#">菜单选项六</a></li>
        </ul>
    </div>

效果:


来看看实现的思路:

  

.nav ul li:hover{ background-color: #00007D;}
.nav ul li:hover .menu{ display: block;}

 

这就是核心;也就是这两行css搞定了一个竖向的二级菜单,当li元素hover鼠标移上的时候将menu显示,如果我们需要给它添加一个动画效果,可以使用css3来搞定

  

.menu{ position: absolute;
                left: 0;
                width: 100%; background-color: #005580;
                line-height: 33px;
                z-index: -1;

                transition: all 500ms;    //添加一个500ms的css3动画效果
                top: -200px;
                opacity: 0;
            }

.nav ul li:hover .menu{ top: 50px;opacity: 1;}    //hover时改变他它的top与透明度  

下面博主也给出javascript的写法,这种写法用在需要从服务端获取较多数据的情况下,通过ajax异步获取菜单数据,所以必须用到javascript事件控制二级菜单;

    .nav ul li.active{ background-color: #00007D;}
      .nav ul li.active .menu{top: 50px;opacity: 1;}
$(".nav>ul>li").hover(function(){    //hover事件     ....其他代码
    $(this).siblings("li").removeClass("active");
    $(this).addClass("active");    //激活状态 显示menu
},function(){
    $(".nav>ul>li").removeClass("active");
});

最后总结:

    css的伪类hover可以做出很多更有趣的效果。

    当可以使用css解决一个效果的时候,应该尽量使用css解决,已减少javascript性能开销

 

------------------------------------合理规划你的学习路线,是成功的不二法门----------------------------------------

时间: 2024-11-05 11:24:40

前端开发css实战:使用css制作网页中的多级菜单的相关文章

web前端开发教程:div+css的6个优点

关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来说,div+css是web设计标准,它是一种网页的布局方法,与传统中经过表格(table)布局定位的方法有所区别,它能够完成页面页面内容与体现相别离, 那么你在前端开发学习对div+css的优点了解多少呢?接下来Div css教程学习中,为大家介绍web前端开发中div+css的6个优点. 介绍web前端开发中div+css的6个优点 1.契合W3C规范标准.这确保您的网

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

学完html+css就可以做的web前端开发项目实战——博雅互动

博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序 1 清除默认样式css文件 reset.css 2 可以引入原子类(可以下载,自己整理) base.css 3 公共样式(比如头部,底部很多面相同的样式) common.css (书写一次css文件可以多个html引入) 4 单页面样式(比如首页,游戏页面) index.css game.css(单独只引入一次) 1.1header 结构 1<!-- header头部开始 --> 2<div class="h

web前端入门到实战:CSS:scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需

web前端入门到实战:CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影.底下是二个css属性的用法: .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p

web前端入门到实战:css之background-position属性实现雪碧图

什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分. 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象. 用雪碧图有什么弊端 个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端.如果你的雪碧图很大又复杂的话就有出现css代码复查,网页占内存大等各种问题. 实例 上面是一个按钮

web前端入门到实战:CSS的文本格式化样式总汇

长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元