Jquery列表中的导航菜单的应用
<!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列表中的导航菜单的应用的更多相关文章
- JQUERY 插件开发——MENU（导航菜单）
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
- jquery火焰等效果导航菜单
jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...
- 如何用CSS和jQuery实现一个侧滑导航菜单
为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- jquery 实现两级导航菜单
主要用于运维系统, 对界面要求不高的场合. 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1. HTML 页面及 JS 交互, 注意引入 Jquery ...
- jquery倾斜的动画导航菜单
1. [代码]完整源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- 【Web】利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
随机推荐
- ViewDragHelper的使用
一.ViewDragHelper的原理 是一个能够自用移动ViewGroup内部View的控件. 通过获取ViewGroup的点击事件,之后通过Scroller滑动来进行对ViewGroup内部控件的 ...
- centos在安装apache2.4版本的时候遇到ARP not found解决办法
今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... noconfigure: error: APR not fou ...
- 正式学习react(二)
今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...
- shell中的for、while、until
for var in list do commands done 在每个迭代中,变量var会包含列表中的当前值,第一个迭代会使用列表中的第一个值,第二个迭代使用第二个值. 在do和done中,$var ...
- LeetCode_Sort Colors
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...
- C# LinkButton 带参数的OnCommand事件的写法
前台: <asp:TemplateField HeaderText ="操作"> <HeaderStyle HorizontalAlign ="Cent ...
- windows下将隐藏文件通过命令行改变为普通的显示文件
attrib -h -s *.* /s /d 不懂的看下 attrib /? 帮助.保存为bat也可以.
- android网址
1. 优麒麟手机助手 https://github.com/ubuntu-kylin/phone_manager 2. http://forum.xda-developers.com/index.ph ...
- OnlineJudge 离线题库采集
过段时间要把以前的OJ换掉,我负责VirtualJudge的部分.需要用C与PHP写一个Linux下的VJudge. 在此之前,将以前写给自己学弟学妹用的OJ离线题库的采集程序改进了一下.支持国内一些 ...
- SoftLayerDebug