百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

44-jQuery 下拉菜单(动画效果) jquery下拉框

bigegpt 2024-10-24 09:02 4 浏览


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>44-jQuery 下拉菜单</title>

<style type="text/css">

*{ /* 通配选择器*/

margin: 0; /*外边距：0*/

padding: 0; /*内边距：0*/

}

.daohang{ /* 导航样式*/

width: 80%; /*宽：80%*/

height: 40px; /* 高：40像素*/

border: #000000 solid 1px; /*边框：黑色 实线 1像素*/

background-color: chartreuse; /*背景颜色*/

border-radius: 10px; /*圆角：10像素*/

margin: 10px auto; /*外边距：上10像素 左右居中*/

}

.daohang>li{ /* 导航里面的li标签样式*/

float: left; /*浮动：左浮动*/

list-style: none; /*去除前面的点*/

/* border: #000000 solid 1px; */

background-color: #FFA500; /*背景颜色*/

width: 15%; /*宽：15%*/

height: 100%; /*高：100%*/

border-radius: 10px; /*圆角：10像素*/

margin-left: 4%; /*外左边距：4%*/

text-align: center; /*文字居中*/

line-height: 35px; /*行高：35像素*/

}

.sub>li{ /* 二级菜单里的里标签样式*/

list-style: none; /*去除前面的点*/

font-size: small; /*字体大小：小*/

background-color: #8B008B; /*背景颜色*/

border: #000000 solid 1px; /*边框：黑色 实线 1像素*/

border-bottom: none; /*下边框：空*/

margin-top: 5px; /* 上边距：5像素*/


}

.sub>li:hover{ /* 二级菜单里面的li标签的鼠标停留*/

background-color: red; /*背景颜色：红色*/

}

.sub{ /* 二级菜单样式*/

display: none; /*隐藏*/

}

</style>

<script src="../static/js/jquery-3.6.0.js"></script>

<script type="text/javascript">

$(function(){

// 定义变量 装 二级菜单的代码

var $sub = $('<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul>')

// 导航ul里面的li标签的移入移出事件

$(".daohang>li").hover(function(){

$(this).append($sub) // 为现在这个li标签添加二级菜单

$(".sub").stop() // 停止二级菜单的动画

$(".sub").slideDown(1000) // 用一秒的时间展开二级菜单

}, function(){ // 移出事件

$(".sub").stop() // 停止二级菜单的动画

$(".sub").slideUp(100) // 用100毫秒的时间收起二级菜单

})

})

</script>

</head>

<body>

<ul class="daohang"> <!-- 导航ul -->

<li>第一个 <!-- li标签 -->

<!-- <ul class="sub1">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul> -->

</li>

<li>第二个</li> <!-- li标签 -->

<li>第三个</li> <!-- li标签 -->

<li>第四个</li> <!-- li标签 -->

<li>第五个</li> <!-- li标签 -->

</ul>

</body>

</html>

相关推荐

得物可观测平台架构升级:基于GreptimeDB的全新监控体系实践

一、摘要在前端可观测分析场景中，需要实时观测并处理多地、多环境的运行情况，以保障Web应用和移动端的可用性与性能。传统方案往往依赖代理Agent→消息队列→流计算引擎→OLAP存储...

warm-flow新春版:网关直连和流程图重构

本期主要解决了网关直连和流程图重构，可以自此之后可支持各种复杂的网关混合、多网关直连使用。-新增Ruoyi-Vue-Plus优秀开源集成案例更新日志[feat]导入、导出和保存等新增json格式支持...

扣子空间体验报告

在数字化时代，智能工具的应用正不断拓展到我们工作和生活的各个角落。从任务规划到项目执行，再到任务管理，作者深入探讨了这款工具在不同场景下的表现和潜力。通过具体的应用实例，文章展示了扣子空间如何帮助用户...

spider-flow:开源的可视化方式定义爬虫方案

spider-flow简介spider-flow是一个爬虫平台，以可视化推拽方式定义爬取流程，无需代码即可实现一个爬虫服务。spider-flow特性支持css选择器、正则提取支持JSON/XML格式...

solon-flow 你好世界!

solon-flow是一个基础级的流处理引擎（可用于业务规则、决策处理、计算编排、流程审批等......）。提供有“开放式”驱动定制支持，像jdbc有mysql或pgsql等驱动，可...

新一代开源爬虫平台:SpiderFlow

SpiderFlow：新一代爬虫平台，以图形化方式定义爬虫流程，不写代码即可完成爬虫。-精选真开源，释放新价值。概览Spider-Flow是一个开源的、面向所有用户的Web端爬虫构建平台，它使用Ja...

通过 SQL 训练机器学习模型的引擎

关注薪资待遇的同学应该知道，机器学习相关的岗位工资普遍偏高啊。同时随着各种通用机器学习框架的出现，机器学习的门槛也在逐渐降低，训练一个简单的机器学习模型变得不那么难。但是不得不承认对于一些数据相关的工...

鼠须管输入法rime for Mac

鼠须管输入法forMac是一款十分新颖的跨平台输入法软件，全名是中州韵输入法引擎，鼠须管输入法mac版不仅仅是一个输入法，而是一个输入法算法框架。Rime的基础架构十分精良，一套算法支持了拼音、...

Go语言 1.20 版本正式发布:新版详细介绍

Go1.20简介最新的Go版本1.20在Go1.19发布六个月后发布。它的大部分更改都在工具链、运行时和库的实现中。一如既往，该版本保持了Go1的兼容性承诺。我们期望几乎所...

iOS 10平台SpriteKit新特性之Tile Maps(上)

简介苹果公司在WWDC2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKitTileEditor。这款工具易于上手，而且看起来速度特别快。在本教程中，你将了解关于TileE...

程序员简历例句—范例Java、Python、C++模板

个人简介通用简介：有良好的代码风格，通过添加注释提高代码可读性，注重代码质量，研读过XXX，XXX等多个开源项目源码从而学习增强代码的健壮性与扩展性。具备良好的代码编程习惯及文档编写能力，参与多个高...

Telerik UI for iOS Q3 2015正式发布

近日，TelerikUIforiOS正式发布了Q32015。新版本新增对XCode7、Swift2.0和iOS9的支持，同时还新增了对数轴、不连续的日期时间轴等；改进TKDataPoin...

ios使用ijkplayer+nginx进行视频直播

上两节，我们讲到使用nginx和ngixn的rtmp模块搭建直播的服务器，接着我们讲解了在Android使用ijkplayer来作为我们的视频直播播放器，整个过程中，需要注意的就是ijlplayer编...

IOS技术分享|iOS快速生成开发文档(一)

前言对于开发人员而言，文档的作用不言而喻。文档不仅可以提高软件开发效率，还能便于以后的软件开发、使用和维护。本文主要讲述Objective-C快速生成开发文档工具appledoc。简介apple...

macOS下配置VS Code C++开发环境

本文介绍在苹果macOS操作系统下，配置VisualStudioCode的C/C++开发环境的过程，本环境使用Clang/LLVM编译器和调试器。一、前置条件本文默认前置条件是，您的开发设备已...

一周热门
最近发表
标签列表