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 ...
随机推荐
- C# 向批处理文件输入字符
先记录个无关标题哒~ 刚刚学习用C#,在用VS进行图形界面编程时,点界面中添加的空间,VS界面右侧会出现该控件的属性页,但是这个属性页并不全, 只列出了部分重要的属性,一开始还以为是没有对应的属性方法 ...
- Scala学习笔记--xml
http://blog.csdn.net/beautygao/article/details/38497065 https://github.com/scala/scala-xml http://st ...
- javax.net.ssl.SSLException: java.lang.UnsupportedOperationException
Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...
- jQuery验证表单格式
工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...
- 开发中遇到的问题（一）——java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
1.错误描述: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) wit ...
- angular中设置$http的post请求的数据传递格式
ArgularJS的$http方法支持全局设置: $http.defaults.headers.post["Content-Type"] = "application/x ...
- 图片以BLOB存储在后台数据库中,Android客户端要进行读取显示
解决方法: 1:在后台以InputStream的方式将图片从数据库中读出: public static InputStream getPicInputStream(){ String id = &qu ...
- 这样就算会了PHP么？-10
关于基本的文件读写内容: <?php echo "readfile function:<br>"; readfile("tm.txt"); e ...
- 11g Rac 切换
<pre name="code" class="sql">[grid@devrac1 ~]$ crsctl status res -t ------ ...
- Linux服务器挂死案例分析
问题现象: 在linux服务器上运行一个指定的脚本时,就会出现无数个相同进程的,而且不停的产生,杀也杀不掉,最后系统就陷入死循环,无法登陆,只能人工去按机器的电源键才可以.这够崩溃的吧? 问题分析过程 ...