列表中的导航菜单应用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>列表中的导航菜单应用</title><style type="text/css">body{font-size:13px}ul,li{list-style-type:none;padding:0px;margin:0px}.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}.content{padding-top:10px;clear:left}a{text-decoration:none;color:#666;padding:10px}.optnFocus{background-color:#fff;font-weight:bold}div{padding:10px}div img{float:left;padding-right:6px}span{padding-top:3px;font-size:14px;font-weight:bold;float:left}.tip{width:190px;border:solid 2px #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" src="jquery-1.11.1.js"></script><script type="text/javascript">$(function(){var curY; //获取所选项的Top值var curH; //获取所选项的Height值var curW; //获取所选项的width值var srtY; //设置提示箭头的Top值var srtX; //设置提示箭头的Left值var objL; //设置当前对象function setInitValue(obj){curY = obj.offset().topcurH = obj.height();curW = obj.width();    //.optn的width值srtY = curY + (curH / 2)+"px";    //设置提示箭头的TOP值srtX = curW - 5 + "px";    //设置提示箭头的left值}$(".optn").mouseover(function() {/* Act on the event */objL = $(this);//获取当前对象setInitValue(objL);//设置当前位置var allY = curY - curH + "px";//设置提示框的Top值objL.addClass("optnFocus");//增加获取焦点时的样式// objL.next("ul").show().css({"top" : "8px" , "left" : curW})objL.next("ul").show().css({"top" : allY , "left" : curW})$("#sort").show().css({"top" : srtY , "left" : srtX});}).mouseout(function(){$(this).removeClass("optnFocus");$(this).next("ul").hide();$("#sort").hide();})$(".tip").mouseover(function(){$(this).show();objL = $(this).prev("li");setInitValue(objL);objL.addClass("optnFocus");$("#sort").show().css({"top" : srtY , "left" : srtX})}).mouseout(function(){$(this).hide();$(this).prev("li").removeClass("optnFocus");$("#sort").hide();})})</script>
</head>
<body><ul><li class="menu"><div><img src="Images/icon.gif" /><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><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="Images/sort.gif" alt=""/></li></ul>
</body>
</html>

列表中的导航菜单应用相关推荐

列表中的导航菜单的制作
效果图如下代码如下:(图片大家可以自己找) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
列表应用（导航菜单）
(1)功能描述: 在页面表单中,分别展示某类产品的全部子类项,当用户将鼠标移动某子类时,所选子类样式发生变化,并在该子类的右边以浮动的形式展示该类的全部产品:当用户将鼠标移除某子类时,所选子类样式恢复 ...
如何在WordPress中制作导航菜单（7个功能点）
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
网页中滑动导航菜单制作
<html> <head> <title>网页特效-导航菜单-滑动的二级导航菜单</title> <meta http-equiv="c ...
element-UI中NavMenu导航菜单默认打开问题
最近写一个网站导航栏,需求要每页打开时,默认导航栏的第一项展开,导航栏我用的是element-UI框架中的NavMenu,我看到以下两个参数,我就写上了 <el-menu default-act ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
网页前端：导航菜单的制作
文章目录前言具体操作总结前言实验目的: (1)掌握有序列表和无序列表,在导航菜单中的工作过程: (2)导航菜单能够根据鼠标的悬浮进行样式的变化. 实验内容: 根据要求完成以下网页菜单: 1. ...
Android实现导航菜单左右滑动效果
本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果. 今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案. 第一种解决方案: 在以前的一篇博文中我使用andro ...

列表中的导航菜单应用

列表中的导航菜单应用相关推荐

最新文章

热门文章