jQuery简洁下拉菜单导航

最新推荐文章于 2023-09-25 07:38:35 发布
最新推荐文章于 2023-09-25 07:38:35 发布
阅读量723 收藏
点赞数
分类专栏： 关于学习 
<!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>
<link href="css/body.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/menu.css" rel="stylesheet" media="screen" type="text/css" />
</head>

<body>
<div id="all">

<h1>jQuery简洁下拉菜单导航</h1>

<p>Single-level Drop Down Menu based on jQuery library. See the source.</p>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
  </script>
</p>

<ul id="jsddm">
	<li><a href="#">JavaScript</a>
		<ul>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">jQuery Plugin</a></li>
			<li><a href="#">Ajax Navigation</a></li>
		</ul>
	</li>
	<li><a href="#">Effect</a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Fade Effect</a></li>
			<li><a href="#">Opacity Mode</a></li>
			<li><a href="#">Drop Shadow</a></li>
			<li><a href="#">Semitransparent</a></li>
		</ul>
	</li>
	<li><a href="#">Navigation</a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Fade Effect</a></li>
			<li><a href="#">Opacity Mode</a></li>
			<li><a href="#">Drop Shadow</a></li>
		</ul>
	</li>
	<li><a href="#">HTML/CSS</a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Opacity Mode</a></li>
			<li><a href="#">Drop Shadow</a></li>
		</ul>
	</li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Help</a></li>
</ul>


</body>
</html>

cenguocheng
关注
专栏目录
jQuery导航下拉菜单
wfh_fighting的博客
11-04 526
html> html lang="en"> head> meta charset="UTF-8"> title>下拉菜单title> style> *{margin: 0 auto; padding: 0;} .nav{ width: 340px; height: 30px;
jquery 导航菜单 下拉菜单
kankankankan2222的专栏
01-25 2997
thanka a lot  for :http://www.51xuediannao.com/js/nav/navlevel2.html 效果： 代码: scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript">script>
jQuery-导航下拉菜单-实用简单
weixin_34195364的博客
03-22 116
1 /*CSS代碼*/ 2 /*導航*/ 3 .nav{background: url("../img/menu_bar.gif") repeat-x;} 4 .nav ul li{display: inline-block; height: 40px; line-height: 40px; margin-left: 20px;} 5 .nav ul li a{font-si...
jquery实现导航下拉菜单
joan_yb的博客
07-29 2016
jquery实现导航下拉菜单
jQuery简洁下拉菜单导航.zip
11-21
本项目“jQuery简洁下拉菜单导航”将展示如何利用jQuery和CSS构建一个高效、响应式的导航菜单。 首先，我们来了解jQuery的基本概念。jQuery是由John Resig在2006年创建的，它的核心设计理念是“Write Less, Do More...
jQuery简洁下拉菜单导航特效代码
03-20
**jQuery 简洁下拉菜单导航特效代码详解** 在网页设计中，下拉菜单是一种常见的导航结构，它能够有效地组织大量链接，提高用户体验。jQuery 是一个轻量级的 JavaScript 库，它提供了丰富的功能和简便的 API，使得...
jQuery简洁下拉菜单导航，大小: < 1Kb
05-20
标题提到的"jQuery简洁下拉菜单导航，大小: ，意味着这个实现非常小巧，不会增加太多额外的页面加载时间。 首先，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。由于其简洁的...
Jquery网站导航的 普通下拉菜单
yuanyuan214365的博客
11-25 461
普通下拉菜单 Menu One Link 1 Link 2 Link 3 Link 4 Menu Two Link 1 Link 2 Lin
jQuery网站导航下拉菜单实例
07-24
jQuery网站导航下拉菜单实例是一款中英文导航栏下拉菜单演示代码。
jQuery实现下拉菜单.
04-14
使用jQuery制作的一个下拉菜单，可以直接使用，使用的时候，建议将对应大文件放在指定的位置上，并修改link和script标签中的地址
jquery多级导航下拉菜单
12-05
绝对实用的jq附带2级，3级，4级导航下拉菜单，任意修改，兼容性我不多说jq怎么样支持就怎么样支持
jQuery微软官网全屏导航下拉菜单.zip
05-27
jQuery微软官网全屏导航下拉菜单，大型多级导航菜单。
jquery顶部固定导航下拉菜单.zip
07-04
jquery顶部固定导航下拉菜单是一款基于jquery实现的页面顶部固定导航鼠标悬停显示下拉图标菜单代码。
jquery简单动画效果（下）
男儿当自强
10-17 431
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(document).ready(function(){ $(":input:eq(0)").click(function(){ $("div").sli
使用jQuery实现下拉菜单
最新发布
TechInk的博客
09-25 572
首先，确保你已经将jQuery库引入到你的HTML文件中。下拉菜单是Web开发中常见的交互元素之一，可以提供更好的用户体验和导航功能。在本文中，我将详细介绍如何使用jQuery来实现一个简单的下拉菜单，并提供相应的源代码。通过上述代码，你可以实现一个简单的下拉菜单效果。当点击按钮时，下拉菜单将展开或收起。接下来，让我们创建一个基本的HTML结构，包含一个触发下拉菜单的按钮和一个下拉菜单列表。在CSS中，你可以使用一些样式来隐藏下拉菜单，以及定义展开时的样式。现在，当你点击按钮时，下拉菜单将展开或收起。
JQuery实现导航栏下拉
weixin_51747920的博客
07-02 899
JQuery实现导航栏下拉、按钮缩放效果
Jquery实现的下拉菜单
shiyunge WEB开发记事本
09-05 941
Jquery实现的下拉菜单，如图：   http://www.w3.org/1999/xhtml">$().ready(function(){ $(".menuTitle").mouseover(function(){$(this).addClass("mouseOver")}).mouseout(function(){$(this).removeClass("mouseOve
打造动态下拉导航效果：jQuery下拉菜单实战
资源摘要信息:"jQuery网站导航下拉菜单实例" 知识点概述： jQuery网站导航下拉菜单实例是一个利用jQuery库实现的网站导航组件，它能够提供丰富的交互效果和友好的用户界面。该实例能够通过简单的鼠标悬停操作，展示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值