JS下滑菜单，向下滑出二级导航

最新推荐文章于 2020-12-03 10:34:51 发布
最新推荐文章于 2020-12-03 10:34:51 发布
阅读量1.9k 收藏
点赞数
分类专栏： js学习
<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
    <ul id="sidemenu">
      <li><a href="http://www.codefans.net/sort/list_15_208_1.shtml" >+ 网页菜单类素材一</a>                           
            <ul>
                  <li><a href="#">下滑菜单</a></li>
                  <li><a href="#">折叠菜单</a></li>
                  <li><a href="#">垂直菜单</a></li>
             </ul>
      </li>
      <li><a href="#" >+ 编程源码类资源</a>
           <ul>
                <li><a href="#">ASP源码</a></li>
                <li><a href="#">Delphi源码</a></li>
                <li><a href="#">vc++源码</a></li>
                <li><a href="#">VB源码</a></li>
           </ul>
       </li>
    </ul>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
  $('#sidemenu ul').hide();
  $('#sidemenu ul:first').hide();
  $('#sidemenu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#sidemenu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>
請叫我菜鳥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript+CSS下拉菜单系列（一）——仅一个选项下拉，高度固定的下拉菜单
你给我信任，我给你全部！
10-02 499
需要用到的图片素材： 和 代码如下： css+javascript下拉菜单系列(一) body{background-color:#FFFFFF;} #content{ width:231px; height:auto; border:solid 1p
Js左右滑出菜单栏
01-17
Js左右滑出菜单栏
鼠标下滑到一定的高度时二级导航条固定在顶部
weixin_30706507的博客
09-17 270
css样式： .fixednav{ position:fixed; top:0px; left:0; width:100%; z-index:1; } jQuery js结构： $(function(){ var nav=$(".nav");//获取当前对象 var win =$(windows);//获取窗口 var do=$(document); win.scroll...
js下拉
Byfar
09-19 189
# 下拉滑动 每次滑动的距离 0.1 0.3 0.5 0.7 0.9 def drop_down(): for x in range(1, 10, 2): time.sleep(0.5) j = x / 10 js = 'document.documentElement.scrollTop = document.documentElem...
jquery实现向下滑出的二级导航下滑菜单效果
10-23
jQuery实现向下滑出的二级导航下滑菜单效果，是一种利用jQuery与JavaScript技术结合来实现的网页元素动态效果。在前端开发过程中，菜单效果的实现是界面设计中的一项基本技能，而二级菜单作为导航栏中常见的组成部分...
jQuery实现向下滑出的二级菜单效果实例
10-23
二级菜单通常隐藏在主菜单项的下方，当触发显示事件后，二级菜单会以滑动动画的形式“向下滑出”。这种效果不仅在视觉上增加了界面的动态性，也提高了用户交互的直观性。 为了实现向下滑出的二级菜单效果，开发者...
基于jQuery实现的向下滑动二级菜单效果代码
10-23
通过以上的知识点，我们可以总结出，实现一个向下滑动的二级菜单，需要结合jQuery的事件绑定、链式操作、动画效果以及CSS样式的合理运用。这个功能在现代的网站设计中非常实用，可以让用户在浏览网站时获得更好的...
jquery导航菜单二级菜单slide滑动渐隐显示
06-05
一级菜单项包含二级菜单的触发器，而二级菜单则隐藏在一级菜单项下。例如： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1-1</a></li> <li><a href="#">子菜单1-2</a></li> <!-- 更多一级菜单...
js实现横向弹出二级菜单
06-05
本文将详细讲解如何使用JavaScript实现一个横向弹出的二级菜单，包括菜单的显示、隐藏以及响应式行为。 首先，我们需要在HTML中创建基本的菜单结构。二级菜单通常嵌套在一级菜单项下，利用`<ul>`和`<li>`元素来表示...
JS+CSS实现简单的二级下拉导航菜单效果
10-23
主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下
js二级滑动展开菜单导航
06-05
左侧竖向二级展开
超炫的js横向二级导航菜单slide往下滑动动画效果js代码
11-22
超炫的js横向二级导航菜单slide往下滑动动画效果js代码
向下滑出、向右滑出的网页多级菜单JS类实例.rar
07-10
一个向下滑出、向右滑出的多级菜单JS封装类，包括了菜单实例，如果主菜单中包括有子菜单项，则会显示一个小三角，鼠标放上去就可展开显示对应的二级子菜单，二级菜单同上所言，若有子菜单的话，会向右依次展开，菜单风格若不满意，你可自己美化。本代码基于JavaScript DIV css共同实现。
【代码笔记】HTML+CSS+JAVAScript+jQuery点击图标下滑列表
NewStar的博客
07-29 818
原理：同前一篇，不过使用的是sildeToggle方法。 具体思路：同前一篇。 具体实现代码： JS文件： function showSort() { $("#sort").click(function() { $("#u_list3").stop().slideToggle(100); }, function() { $("#u_list3").stop().slideTog
用js实现下拉滑页效果
weixin_39525197的博客
07-06 2775
用js实现下拉滑页效果 代码 js内容 /* 下拉滑页 */ $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 //alert(scrollTop); var scrollHeight = $(document...
jsp页面div上下滑动_登录页面：
weixin_39793098的博客
12-03 328
这个页面是今天早上通过插件写的：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerNa...
js实现页面下拉后展示导航，以及点击导航自动滑动到相关页面
weixin_33772645的博客
03-31 507
//监控，下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTop(); if(targetTop > 750){ $("#fixed-menu").css('display','block'); ...
js实现鼠标放在一级菜单，下滑出二级菜单
最新发布
06-06
可以使用 HTML、CSS 和 JavaScript 实现这个效果。具体步骤如下： 1. HTML 结构：使用 ul 和 li 标签创建一级和二级菜单的结构。例如： ``` <ul class="menu"> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> ``` 2. CSS 样式：使用 CSS 设置菜单的样式，包括宽度、高度、背景颜色、边框等。同时需要设置二级菜单的显示方式为隐藏（display:none）。例如： ``` .menu { width: 200px; background-color: #f2f2f2; border: 1px solid #ccc; padding: 0; margin: 0; } .menu li { list-style: none; padding: 10px; position: relative; } .menu li:hover ul { display: block; } .menu ul { position: absolute; top: 100%; left: 0; width: 200px; display: none; background-color: #fff; border: 1px solid #ccc; padding: 0; margin: 0; } .menu ul li { list-style: none; padding: 10px; } ``` 3. JavaScript 交互：使用 JavaScript 监听一级菜单的鼠标悬停事件，当鼠标悬停在一级菜单上时，显示对应的二级菜单。例如： ``` var menuItems = document.querySelectorAll('.menu > li'); for (var i = 0; i < menuItems.length; i++) { menuItems[i].addEventListener('mouseover', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'block'; } }); menuItems[i].addEventListener('mouseout', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'none'; } }); } ``` 这样，当鼠标放在一级菜单上时，就会下滑出对应的二级菜单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值