JQuery 横向下拉导航延迟版

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量99 收藏
点赞数
文章标签： javascript xhtml ViewUI

 

 

 

 

 

 <!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=gb2312" />
<title>JQuery 横向下拉导航延迟版  </title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 $(".subNavLi").hover(function(){   //鼠标的over函数
 $(this).addClass("current");
   subNav=$(this).children("ul");  //获得要显示的ul，即子菜单
  timeoutid=setTimeout(function(){    //延迟处理，防止鼠标无意划过时，子菜单出现
         if(subNav.css("display")=="none"){    //鼠标指向有子菜单的元素时，
          subNav.slideToggle();     //显示子菜单
          }         
        },200);  
     },
  function(){ //鼠标的out函数
  
 $(this).removeClass("current");
   clearTimeout(timeoutid);  
   if(subNav.css("display")=="block"){   //鼠标移出子菜单元素时，
      subNav.slideToggle();   //子菜单消失
   }
         
});
});
</script>


<style type="text/css">
* { margin:0; padding:0; }
li { display:inline; }
li ul { display:none; position:absolute; padding-top:30px; }
li.current { background:#eee; }
li.current a { color:#f00; }
</style>


</head>
<body>
<div class="container">
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li class="subNavLi"><a href="#">原创作品</a>
      <ul class="subNav">
        <li><a href="#">1111111111111111111111</a></li>
        <li><a href="#">1111111111111111111111</a></li>
        <li><a href="#">1111111111111111111111</a></li>
      </ul>
    </li>
    <li class="subNavLi"><a href="#">设计素材</a>
      <ul class="subNav">
        <li><a href="#">SubNav</a></li>
        <li><a href="#">SubNav</a></li>
        <li><a href="#">SubNav</a></li>
        <li><a href="#">SubNav</a></li>
      </ul>
    </li>
    <li class="subNavLi"><a href="#">佳作欣赏</a>
      <ul class="subNav">
        <li><a href="#">SubNav Link</a></li>
        <li><a href="#">SubNav Link</a></li>
        <li><a href="#">SubNav Link</a></li>
        <li><a href="#">SubNav Link</a></li>
        <li><a href="#">SubNav Link</a></li>
        <li><a href="#">SubNav Link</a></li>
      </ul>
    </li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>
</body>
</html>

 

 

 

 

 

 

 

 

weixin_34319999
关注
导航栏Tab内容 hover延迟出现（CSS）
”前端金城武”“哦”
09-04 5936
导航栏的菜单TAB在鼠标hover的时候会在下方出现隐藏的内容是很多网站很常见的一种样式。 大家很容易想到的是在每个TAB下让各自单元的内容用dispaly:none，先隐藏起来，然后再在：hover选择器中写display:bock样式让其显现出来。可是直接display:block的话隐藏内容瞬间显示，鼠标移开瞬间消失，这样的体验是很不好的。 然后我们又很快想到利用transition来设置
HTML下拉菜单怎么做成横向,JQuery实现绚丽的横向下拉菜单
weixin_36042436的博客
05-31 1266
以前经常看见网站有菜单的显示，鼠标移上去就出现下拉的效果，很绚丽，经过看JQuery视频后，发现实现也挺容易的。Html中，通过和标签将所需的元素写出来。代码如下:菜单项1 子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项32最外围的中元素即为菜单项1、菜单项2、菜单项3，下拉菜单分别在各主菜单之下，如果菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜...
jQuery横向导航选项卡下拉菜单显示代码
11-19
jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码 jQuery横向导航选项卡下拉菜单显示代码
原生js写jQuery延迟下拉菜单
weixin_42171432的博客
06-21 300
<!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=edge"> <title>延迟下拉菜单</
jquery 横向导航栏 免费
zeng092210的博客
05-07 1108
导航栏效果图： 就不多啰嗦，这东西不难就是大多人不想写样式 直接上代码： index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery下拉导航例子</title> <link media="screen" rel...
JQuery之横向下拉菜单
弈缘人生
12-18 2243
以前经常看见网站有菜单的显示，鼠标移上去就出现下拉的效果，很绚丽，经过看JQuery视频后，发现实现也挺容易的。             Html中，通过和标签将所需的元素写出来。       菜单项1 子菜单项11 子菜单项12
html导航栏横向展开,jquery实现可横向和竖向展开的动态下滑菜单效果
weixin_42488542的博客
05-30 1294
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局...
jQuery练习——下拉菜单
m0_55394328的博客
09-12 3577
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。 笔者还是前端的菜鸟，还请大家多多指教呀~
php 横向列表,JQuery实现绚丽的横向下拉菜单_jquery
weixin_28683391的博客
04-02 105
即为菜单项1、菜单项2、菜单项3，下拉菜单分别在各主菜单之下，如果菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。CSS中代码如下:ul,li{/*清除ul和li上的小圆点*/list-style:none;}ul{/*清除子菜单的缩进值*/padding:0;margin:0;}.hmain{background-im...
jQuery横向下拉导航菜单 jQuery横向下拉导航菜单网页特效.zip
11-21
而jQuery横向下拉导航菜单则是这种交互式菜单的一种常见实现方式，尤其在响应式设计中非常流行。本教程将深入探讨如何使用jQuery和CSS创建一个功能完备、视觉效果良好的横向下拉导航菜单。 首先，jQuery是一个轻量...
jQuery横向下拉导航菜单特效代码
03-20
《jQuery横向下拉导航菜单特效代码详解》 在网页设计中，导航菜单是不可或缺的部分，它引导用户在网站中自由穿梭。而一个优秀的导航菜单，不仅要简洁明了，还需要具有良好的交互体验。jQuery横向下拉导航菜单就是...
jQuery横向下拉导航菜单.zip
07-04
"jQuery横向下拉导航菜单"就是这样一个利用jQuery实现的高效导航方案。 首先，jQuery的事件处理机制是其核心之一。在这款菜单中，`mouseover` 和 `mouseout` 事件被用来检测用户鼠标是否悬停在主菜单上。当鼠标进入...
jquery下拉横向导航菜单
06-05
jQuery是一款广泛使用的JavaScript库，它为开发者提供了许多便利的功能，其中包括创建动态和交互式的下拉导航菜单。本篇文章将深入探讨如何使用jQuery实现一个下拉横向导航菜单，并且讲解如何通过二级下拉菜单直接...
jquery横向下拉三级菜单效果
06-06
总结起来，“jquery横向下拉三级菜单效果”是一个利用jQuery实现的高效解决方案，它提供了流畅的交互体验和层次分明的导航结构。通过熟练掌握jQuery的事件处理、选择器和动画功能，开发者可以定制出符合自己需求的...
【JQuery】——横向纵向下拉菜单
杨晓敏
02-25 1415
在学习jQuery的过程中，遇到项目中最常用到的下拉菜单，本着高效的原则，在此总结一下横向和纵向下拉菜单的实现效果，形成自己的小类库，以便自己在项目过程中能够方便的调用。       HTML部分：       引用menu.css、jquery.js（已经封装好的）和menu.js文件 JQuery实战-菜单效果
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 3250
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 146
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 645
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
纯CSS实现的多级横向下拉导航菜单
"纯CSS实现的多级下拉横向导航菜单代码示例" 在网页设计中，导航菜单是用户界面的重要组成部分，它帮助用户轻松地浏览网站内容。本实例将介绍如何利用CSS来创建一个美观的多级下拉横向导航菜单。通过这个实例，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值