<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表中的导航菜单的应用</title>
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
body{
font-size:13px;
}
ul, li {
list-style-type:none;
padding:0px;
margin:0px;
}
.menu {
width:190px;
line-height:28px;
border-top:1px dashed #00ffff;
}
.content {
padding-top:10px;
clear:left;
}
a {
text-decoration:none;
color:#666;
padding:10px;
}
.optn {
width:190px;
border:1px solid #E5d1A1;
}
.optnFocus {
background-color:#fff;
font-weight:bold;
}
div {
padding:10px;
}
div img {
float:left;
padding-right:5px;
}
span {
padding-top:3px;
font-size:14px;
font-weight:bold;
float:left;
}
.tip {
width:190px;
border:1px solid #ffa200;
position:absolute;
padding:10px;
background-color:#fff;
display:none;
}
.tip li {
line-height: 23px;
}
#sort {
position:absolute;display:none;
} </style>
<script type="text/javascript">
$(function () {
var curY;
var curH;
var curW;
var strY;
var strX;
var objL; //设置当前位置数值 参数obj为当前对象名称
function setInitValue(obj) {
curY = obj.offset().top;
curH = obj.height();
curW = obj.width();
strY = curY + (curH / 2) + "px";
strX = curW - 5 + "px";
}
//设置当前所选项的鼠标滑过事件
$(".optn").mouseover(function () {
objL = $(this);
setInitValue(objL);
var allY = curY - curH + "px";
objL.addClass("optnFocus");
objL.next("ul").show().css({ "top": strY, "left": strX });
})
.mouseout(function () {
$(this).removeClass("optnFocus");
$(this).next("ul").hide();
$("#sort").hide();
})
$(".tip").mousemove(function () {
$(this).show();
objL = $(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus");
$("#sort").show().css({ "top": strY, "left": strX });
})
.mouseout(function () {
$(this).hide();
$(this).prev("li").removeClass("optnFocus");
$("#sort").hide();
}) }); </script>
</head>
<body>
<ul>
<li class="menu">
<div>
<img alt=""src="15.jpg" />
<span>电脑数码类产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a></li>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
<img id="sort" src="13.jpg" />
</li>
</ul>
</body>
</html>

Jquery列表中的导航菜单的应用的更多相关文章

  1. JQUERY 插件开发——MENU(导航菜单)

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  2. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  3. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  4. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  5. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

  6. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  8. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  9. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

随机推荐

  1. Gulp:基于流的自动化构建工具

    前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...

  2. jQuery中的插件的编写和使用

    1,常用的jQuery插件:表单验证插件formValidator a.目前支持5大验证方式:1.inputValidator(针对input,textarea,select控件的字符长度,值范围,选 ...

  3. sqlserver2008 case when then else end

    在写sql语句的时候,有时候我们需要对字段的只进行判断计算.查看了下相关文档在sql2012.sql2014里边可以使用  IIF 函数直接完成. 但是现在我需要在sql2008版本中完成最字段的计算 ...

  4. kibana 统计每天注册数

  5. UESTC_Just a Maze CDOJ 1162

    Just a Maze Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 262144/262144KB (Java/Others) Su ...

  6. Inorder Successor in BST 解答

    Question Given a binary search tree and a node in it, find the in-order successor of that node in th ...

  7. Smallest Rectangle Enclosing Black Pixels 解答

    Question An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. ...

  8. OpenStack Mixture HypervisorsDriver configure and implementation theory

    通过本文,您将可以了解在 OpenStack 中如何进行混合 Hypervisor 的配置及其实现原理的基本分析.本文主要结合作者在 Nova 中的实际开发经验对 OpenStack 中混合 Hype ...

  9. 从运维角度浅谈 MySQL 数据库优化

    一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分 ...

  10. Windows无需CygWin 使用NDK开发

    无需cygwin,使用NDK进行开发   NDK从7开始自带编译器,在windows上无需配置cygwin的环境. 在eclips中配置NDK路径 在eclipse中点击菜单栏window-Perfe ...