`
WU_Chihiro
  • 浏览: 7743 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

导航子菜单下拉隐藏====JS

    博客分类:
  • JS
 
阅读更多
<script type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(/sfhover/ig,"");}}}

//replace(/sfhover/ig,"")这个函数的意思就是把第二个参数替换第一个参数
//第二个参数是个空 替换之后sfhover 就被替换成空了
$(document).ready(menuFix);
</script>



<div id="nav">
    <li><a href="#" class="yiji"><b>首页</b></a></li>
    <li class="">
      <a href="#" target="_self" class="abg yiji"><b>简介</b></a>
      <ul>
        <h1><img src="img.jpg" alt="" width="205" height="90" /></h1>
        <li class="a"><a href="#" target="_self" >简介</a></li>
        <li class="a"><a href="#" target="_self" >简介</a></li>
        <li class="a"><a href="#" target="_self" >简介</a></li>       
        <li class="a"><a href="#" target="_self" >简介</a></li>
      </ul>     
    </li>
</div>
分享到:
评论

相关推荐

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    JavaScript实现HTML导航栏下拉菜单

    JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐。其实纯css也是可以实现的,但是会有一些限制,必须...

    JS模拟bootstrap下拉菜单效果实例

    在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的“下拉菜单” 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当...

    jquery实现二级导航下拉菜单效果实例

    前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有: 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...

    简单的单击触发的导航子菜单。 无障碍且逐步增强。-JavaScript开发

    Clicky菜单! MRW Web设计Clicky ...如果未启用JS,则菜单会逐步增强,支持悬停和键盘导航(在现代浏览器中)。 基本功能支持鼠标,触摸和键盘交互将链接的父项转换为aria扩展,aria控件和aria隐藏支持的按钮关闭op

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    当展开菜单时,自动向服务器发送请求,查询该菜单下的子菜单,并在客户端显示子菜单,而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree....

    ExtAspNet_v2.3.2_dll

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

    通用下载管理系统-

    通用下拉菜单和首页栏目导航等复杂界面程序由管理系统在数据库中生成运行后的结果,最大限度提高前台页面速度; 下载管理系统支持无穷下载链接; 强力搜索引擎,支持分级栏目模糊搜索,结果中的关键字套红加粗、并...

    JavaWeb网上图书商城完整项目资料

    &gt; 在页面中使用手风琴式菜单(Javascript组件)显示分类。 3). 图书模块: * 按分类查询 * 按作者查询 * 按出版社查询 * 按书名模糊查询 * 多条件组合查询 * 按id查询 除按id查询外,其他都是分页查询。 ...

    PHP程序开发范例宝典III

    实例035 在下拉菜单中显示数据表某列的字段值 50 实例036 在下拉菜单中显示数组中的元素 51 实例037 级联菜单的应用 52 实例038 修改数据时下拉列表的默认值为数据库中原数据信息 54 实例039 可输入字符的...

    IBM WebSphere Portal门户开发笔记01

    13、CSS水平下拉菜单被FLASH覆盖如何解决 253 14、禁止选择页面上的文字来拷贝 254 15、JS屏蔽右键菜单 255 16、禁止保存网页 255 17、CSS和JS文件引入方式 255 18、弹出窗口居中显示JS代码 255 19、CSS渐变样式 256...

    动易专业版——Upgrade_SiteFactory.Professional_2.5.2.0-2.5.3.0的升级包

    ●在前台签写留言未设置隐藏,查看时显示该留言被设置了隐藏。 ●发送短消息页面,验证控件与“清除”按钮冲突。 ●自定义模型匿名投稿时设置的匿名投稿模版不可用。 ●会员中心积分兑换点卷,兑换比率显示不正确...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票...

    jQuery权威指南-源代码

    2.3 综合案例分析—导航条在项目中的应用/37 2.3.1 需求分析/37 2.3.2 效果界面/38 2.3.3 功能实现/38 2.3.4 代码分析/40 2.4 本章小结/41 第3章 jQuery操作DOM /42 3.1 DOM基础/43 3.2 访问元素/44 3.2.1...

    jQuery权威指南366页完整版pdf和源码打包

    2.2.5 可见性过滤选择器 2.2.6 属性过滤选择器 2.2.7 子元素过滤选择器 2.2.8 表单对象属性过滤选择器 2.2.9 表单选择器 2.3 综合案例分析—导航条在项目中的应用 2.3.1 需求分析 2.3.2 效果界面 ...

Global site tag (gtag.js) - Google Analytics