下拉菜单（1.HTML+CSS 2.JavaScript 3.JQuery）

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量88 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/Yue0327/p/5490016.html
版权

方法一：HTML+CSS

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none;display:block; width:90px;}
 a:hover{ color:#FFF; background:#207caf;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background:#207caf;; line-height:35px;} 
 ul li ul{ line-height:35px;display:none; width:90px; position:absolute;}
 ul li:hover ul{ display:block;}
  
 
</style>
</head>

<body>
<div id="menu">
   <ul>
   
  <li><a href="#">首页</a></li>
  <li><a href="#">课程大厅</a>
      <ul>
  
   <li><a href="#">JavaScript</a></li>
  <li><a href="#">jQuery</a></li>
  
      </ul>
  
  </li>
  <li><a href="#">学习中心</a>
    <ul>
    <li><a href="#">视频学习</a></li>
      <li><a href="#">案例学习</a></li>
      <li><a href="#">交流平台</a></li>
      </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  
</ul>


</div> 
          </body>
</html>

方法二：JavaScript

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}



ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}



</style>

 <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">实例练习</a></li>
         <li><a href="#">问与答</a></li>
     </ul>  
  
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  
</ul>

</div>
</body>
</html>

方法三：JQuery

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 
 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}
 
</style>
<script src="jquery/jquery-1.11.2.min.js"></script>

<script type="text/javascript">
  $(function(){
     $(".navmenu").mouseover(function(){
         $(this).children("ul").show();
         
         
         })
     $(".navmenu").mouseout(function(){
         
         $(this).children("ul").hide();
         
         })
      
      })
  
</script>

</head>

<body>
<div id="menu">
   <ul>
   
  <li><a href="#">首页</a></li>
  <li class="navmenu"><a href="#">课程大厅</a>
      <ul>  
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">jQuery</a></li>
      </ul>
  
  </li>
  <li class="navmenu"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">案例学习</a></li>
         <li><a href="#">交流平台</a></li>
      </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  
</ul>


</div> 
          </body>
</html>

 

转载于:https://www.cnblogs.com/Yue0327/p/5490016.html

asdas32d12313
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Html+Css/JavaScript/JQuery三种方法实现下拉菜单
Lux的博客
08-06 847
此教程会分别用Css/JavaScript/JQuery来实现下拉菜单的样式。如下： 效果图： 以下是CSS样式代码： <style type="text/css"> *{margin: 0px;padding: 0px;} #menu{ background-color: #eee; ...
使用Jquery、HTML、CSS、JS实现下拉菜单列表
weixin_56296642的博客
10-04 1029
使用Jquery、HTML、CSS、Javascript实现下拉菜单列表效果
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
热门推荐
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
html5+Css3+JavaScript+jQuery：HTML5篇
weixin_46048259的博客
10-22 1135
html5+Css3+JavaScript+jQuery：HTML5篇
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...
qq_365392777
10-23 1421
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4464
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
mobeiCanyue
01-06 6138
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
HTML+CSS+JavaScript
weixin_54849368的博客
05-20 2403
HTML+CSS+JavaScript 笔记由B站狂神说视频整理 HTML HTML：Hyper Text Markup Language（超文本标记语言） HTML 5 + CSS 3 W3C：World Wide Web Consortium（万维网联盟） W3C标准包括：结构化标准语言（HTML、XML配置文件）、表现语言标准（CSS）、行为标准（DOM文档对象模型、ECMAScript） 标签 基础标签 <!--告诉浏览器，要使用什么规范--> <!DOCTYPE html>
HTML、CSS、JavaScript、jQuery
weixin_54685622的博客
04-18 2152
1 HTML、CSS HTML: 用于开发网页的一门技术 CSS: 用于修饰、渲染网页的一门技术 HTML+CSS可以开发一个非常美观、非常漂亮的网页 开发网页 盖房子 HTML标签搭建网页的结构 砖块(搭建房子的结构) CSS属性 石灰、油漆等涂料 1.1. HTML概述 1.1.1. HTML是什么 HTML(Hyper Text Markup Language): 超文本标记语言 超文本: 超级文本、超过文本（其中可以包含除了文本以 外的其他数据，例如图片、音频、视频等各种格式） 标记：也叫标签、元素
Html+Css+Jquery实现左侧活动拉伸导航菜单栏
TANKING，开源开发者！
03-17 1525
PC端 移动端 代码 <!DOCTYPE html> <html> <head> <title>左侧导航</title> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.mi...
jQuery+CSS3流畅下拉菜单特效.zip
11-19
本主题聚焦于"jQuery+CSS3流畅下拉菜单特效"，旨在探讨如何结合这两种强大的技术来创建动态、流畅且具有吸引力的下拉菜单。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...
jQuery+CSS3复古下拉菜单Formbox.zip
11-19
《jQuery+CSS3复古下拉菜单Formbox：前端开发中的艺术与技巧》 在Web开发领域，用户界面的交互性和视觉吸引力是至关重要的。本文将深入探讨如何利用jQuery和CSS3技术来创建一款复古风格的下拉菜单——Formbox。这款...
jquery+css3绿色下拉菜单.zip
11-19
《jQuery + CSS3 绿色下拉菜单：构建与应用详解》 在现代网页设计中，下拉菜单已经成为导航栏的重要组成部分，它有效地节省了页面空间，提供了清晰的层级结构，便于用户快速浏览和访问网站内容。本教程将深入探讨...
jQuery+CSS3飘带式下拉菜单.zip
11-19
本资源“jQuery+CSS3飘带式下拉菜单.zip”提供了一种创新的实现方式，利用jQuery的动态效果和CSS3的新特性来创建具有飘带效果的下拉菜单。下面我们将深入探讨这个主题中的关键知识点。 首先，jQuery是一款广泛使用...
jquery+css3弹性动感下拉菜单.zip
11-19
本资源“jquery+css3弹性动感下拉菜单.zip”提供了一种利用这两种技术构建弹性和动感下拉菜单的方法。下拉菜单在网站导航中扮演着重要角色，它能帮助用户更方便地访问多层次的页面结构。 首先，让我们了解一下`...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 299
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 323
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 951
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1124
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果
05-11
这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。 HTML代码： ``` 请选择 <option value="1">选项一 <option value="2">选项二 <option value="3">选项三 ``` CSS代码： ``` .custom-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值