记录一个前端二级导航栏的淡入淡出效果

最新推荐文章于 2021-08-05 10:00:56 发布
最新推荐文章于 2021-08-05 10:00:56 发布
阅读量447 收藏 2
点赞数
文章标签： 前端 javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/yana-y/p/10953378.html
版权 
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">
*{ margin:0; padding:0}
   .top{ width:100%; height:100px; background:blue;}
   .topNav{ width:100%; height:50px; background:#09F;}
   .topNavCenter{ width:1000px; height:50px; margin:0 auto; background:#96C;}
   .topNavCenter ul li{ list-style:none; float:left; width:100px; height:50px; line-height:50px; text-indent:10px;}
   .topNavCenter ul li a{ color:#fff; text-decoration:none;}
   .topNavCenter ul li:hover{ background:#C39;}
   .topNavCenter ul li ul{ display:none;}
   /*.topNavCenter ul li:hover ul{ display:block;}*/
   .topNavCenter ul li ul li{ border-top:1px solid #fff; height:30px; line-height:30px; background:#63F;}
   .topNavCenter ul li ul li:hover{ background:#0FC; transition:2s;}
   .main{ width:1200px; height:700px; background:#F9C; margin:0 auto;}
</style>

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
   $(function(){
      //文档加载完毕后
      //选中某个元素 $("")
      //$(this)代表当前这个对象
      //hover()  鼠标移入方法（鼠标移入事件，鼠标移出事件）
      $(".topNavCenter ul li").hover(function(){
         //鼠标移入 显示  
         //$(this).find("ul").css("display","block");
         //$(this).find("ul").show(200);   //show()显示
         $(this).find("ul").fadeIn(2000);    //fadeIn()淡入

         },function(){
            //鼠标移出
            //$(this).find("ul").css("display","none");

            //$(this).find("ul").hide(200);    //hide()隐藏
            $(this).find("ul").fadeOut(2000);   //fadeOut() 淡出


            });


      })
</script>
</head>

<body>
   <div class="top"></div>
    <div class="topNav">
       <div class="topNavCenter">
           <ul>
               <li><a href="#">学校概况</a>
                   <ul>
                       <li><a href="#">学校简介</a>
                        <li><a href="#">学校简介</a>
                        <li><a href="#">学校简介</a>
                        <li><a href="#">学校简介</a>
                        <li><a href="#">学校简介</a>
                        <li><a href="#">学校简介</a>
                    </ul>
                </li>
                <li><a href="#">机构设置</a></li>
                <li><a href="#">人才培养</a>
                   <ul>
                       <li><a href="#">本科生培养</a>
                        <li><a href="#">本科生培养</a>
                        <li><a href="#">本科生培养</a>
                        <li><a href="#">本科生培养</a>
                        <li><a href="#">本科生培养</a>
                        <li><a href="#">本科生培养</a>
                    </ul>
                </li>
                <li><a href="#">科学研究</a></li>
                <li><a href="#">招生就业</a></li>
                <li><a href="#">学校概况</a></li>
                <li><a href="#">机构设置</a></li>
                <li><a href="#">人才培养</a></li>
                <li><a href="#">科学研究</a></li>
                <li><a href="#">招生就业</a></li>
            </ul>
        </div>
    </div>
    <div class="main"></div>
</body>
</html>

效果图实现如下：

 



转载于:https://www.cnblogs.com/yana-y/p/10953378.html

weixin_30460489
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web入门：JQuery淡入淡出面板
小院里的霍大侠
12-14 240
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
jQuery实现导航条的淡入淡出
weixin_34319111的博客
05-30 91
2019独角兽企业重金招聘Python工程师标准>>> ...
html二级菜单点击淡入淡出,jQuery实现淡入淡出二级下拉导航菜单的方法
weixin_35344136的博客
06-18 383
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下：这是一款基于jQuery实现的导航菜单，淡入淡出二级的菜单导航，很经常见到的效果，这里使用的是jquery-1.6.2版本的JS，鼠标移动到包括二级子菜单的主菜单上，会立即渐显出二级的子菜单，鼠标在二级子菜单上划过，子菜单项的背景会改变。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"ht...
CSS3 | 导航栏下拉菜单伸缩出现消失
SuzukiT的博客
08-12 1344
  HTML文档： <!--下拉菜单--> <div class="drop_bar"> <ul class="drop_bar"> <li><a href="#home" class="active" target="_blank">主页</a></li> ...
css3样式表制作鼠标滑过导航条淡进淡出效果
weixin_33869377的博客
05-16 166
先看效果：代码如下：*{margin:0;padding:0;} html{background:url('p_w_picpaths/bg_tile.jpg') #333d43;} body{background:url('p_w_picpaths/bg_head.jpg') repeat-x top center, url('p_w_picpaths/bg_vert.jpg...
二级导航栏
04-01
在网页设计中，二级导航栏是一种常见的交互元素，它用于帮助用户更有效地浏览网站的深层内容。本项目提供了一款“二级导航栏”，其特点在于鼠标悬停时能优雅地弹出下级栏目，增强了用户体验。以下是这个二级导航栏...
前端初学者二级导航(超简单的例子)
08-02
总的来说，这个资源包提供了一个简单的二级导航实现示例，对于前端初学者来说，是一个很好的起点。虽然没有完成所有例子的美化，但核心原理已经足够帮助理解前端开发中的基本概念和技巧。通过学习这些内容，你可以...
jQuery实现灰蓝风格标准二级下拉菜单效果代码
10-23
本篇文章将详细讲解如何使用jQuery实现一个灰蓝风格的标准二级下拉菜单效果。 首先，jQuery是一种轻量级的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在本示例中，jQuery被用来控制鼠标...
jQuery淡入淡出多级下拉动画菜单.rar
最新发布
10-01
【jQuery淡入淡出多级下拉动画菜单】是一种常见的网页交互设计，广泛应用于网站导航栏，提升用户体验。这个特效代码基于JavaScript库jQuery实现，利用CSS样式和HTML结构，为菜单项添加动态的淡入淡出效果，同时支持...
蓝色导航二级菜单
01-17
"蓝色导航二级菜单"是一种特别设计的交互组件，旨在提供一个清晰、高效的浏览体验，尤其是在内容丰富的电子商务网站上。蓝色作为主色调，通常给人一种专业、信任和冷静的感觉，这种色彩选择有助于建立品牌信誉，并在...
html+css+JavaScript实现淡入淡出下拉菜单
07-08
开始自己就想做一个属于自己的下拉菜单，从什么都不知道到最后成功设计出来了！程序简单易懂，适合初学者！
jquery实现左侧菜单淡入淡出
SpringHASh的博客
02-05 375
实现效果如图 html <div class="left-nav"> <!-- 左部导航栏 --> <div class="left-nav-title"> 台区能源互联网 </div> <div class="left-nav-.
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
qq_39368007的博客
11-27 251
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed.
uniapp实现导航栏随着滚动淡入淡出效果
qq_44540152的博客
08-05 4024
实现思路:默认导航栏其实一直存在，只需初始时把导航栏透明度设为0，随着滚动，改变透明度即可 onPageScroll(res) { //获取距离顶部距离 const scrollTop = res.scrollTop; if (scrollTop >= 0) { // 导航条颜色透明渐变 if (scrollTop <= 20) { this.opacityNum = 0 } else if (20 < scrollTop && scrollTop
二级菜单及过渡效果的实现(纯css+html)
weixin_45956604的博客
12-15 3084
下面简单分享一下二级菜单的编写
Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】
一入编程深似海
09-29 2923
Vue、JS判断滚动方向【Nav导航条根据滚动条方向显示淡入淡出效果。】 核心内容就几行，ctrl+f 搜索 mounted 第三个就是。 在纯js跑请复制 mounted 块中的代码，并去掉this.show=flase/true; 在vue下跑，没用less的话请去掉lang=&amp;amp;amp;quot;less&amp;amp;amp;quot; 然后自行找个在线less编译一下style块中的内容。 这个代码主要实现了：Nav导航条根据滚动条方向...
CSS + HTML实现导航栏悬停二级菜单效果(仿一加设计)
qq_44920883的博客
04-19 3347
CSS样式 div,ul,li,p{ margin: 0; padding: 0; } a{ text-decoration: none; color: black; } li{ list-style: none; ...
css3 Transition属性（平滑过渡菜单栏案例）
yy211zhu的博客
10-27 6330
css3的制作动画的三大属性（Transform,Transition,Animation）下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。 语法transition: prop
怎么用uni-transition做一个消息提醒的淡入淡出效果
07-09
要使用uni-transition（uni-app的过渡组件）实现消息提醒的淡入淡出效果，可以按照以下步骤进行操作： 1. 在需要显示消息提醒的地方，使用 `<transition>` 组件包裹消息提醒的内容，并为其添加一个唯一的 `name` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值