js实现导航菜单效果

淩亂°似流年 2022-08-07 06:00 202阅读 0赞

<script type="text/javascript">
    	$(document).ready(function(){
    		var temp;
    		var nva_popitems = $(".nva ul li .nva_pop").hover(function(){
    			if(temp){window.clearTimeout(temp);}
    			var _self = $(this);
    			var _index = nva_popitems.index(_self);
    			nva_popitems.hide();
    			nva_baritems.removeClass("hover");
    			nva_baritems.eq(_index).addClass("hover");
    			_self.show();
    		},function(){
    			temp = window.setTimeout(function(){
    				nva_popitems.hide();
    				nva_baritems.removeClass("hover");
    			},100);
    		});
    		var nva_baritems = $(".nva ul li .nva_bar").hover(function(){
    			if(temp){window.clearTimeout(temp);}
    			var _self = $(this);
    			var _index = nva_baritems.index(_self);
    			nva_baritems.removeClass("hover");
    			_self.addClass("hover");
    			nva_popitems.hide();
    			nva_popitems.eq(_index).show();
    		},function(){
    			temp = window.setTimeout(function(){
    				nva_popitems.hide();
    				nva_baritems.removeClass("hover");
    			},100);
    		});
    		
    });
    </script>
    <div class="nva">
            	<ul>
                	<li><a href="#" class="nva_bar">产品与服务</a>
                    	<div class="nva_pop" style="display:none;">
                        	<dl>
                            	<dd><a href="#">注册与变更</a>
                                	<span class="son_pop">
                                    	<i><a href="#" class="none">社保公积金办理</a></i>
                                        <i><a href="#" class="none">企业VI设计</a></i>
                                        <i><a href="#" class="none">法律服务</a></i>
                                        <i><a href="#" class="none">高新软件企业申请</a></i>
                                    </span>
                                </dd>
                                <dd><a href="#">记账与报税</a></dd>
                                <dd><a href="#" class="none">商标专利版权</a></dd>
                                <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#" class="nva_bar">管家服务</a>
                    	<div class="nva_pop" style="display:none;">
                        	<dl>
                            	<dd><a href="#">注册与变更</a>
                                	<span class="son_pop">
                                    	<i><a href="#" class="none">社保公积金办理</a></i>
                                        <i><a href="#" class="none">企业VI设计</a></i>
                                        <i><a href="#" class="none">法律服务</a></i>
                                        <i><a href="#" class="none">高新软件企业申请</a></i>
                                    </span>
                                </dd>
                                <dd><a href="#">记账与报税</a></dd>
                                <dd><a href="#" class="none">商标专利版权</a></dd>
                                <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li style="background:none;"><a href="#" class="nva_bar">创业与经营</a>
                    	<div class="nva_pop" style="display:none;">
                        	<dl>
                            	<dd><a href="#">注册与变更</a>
                                	<span class="son_pop">
                                    	<i><a href="#" class="none">社保公积金办理</a></i>
                                        <i><a href="#" class="none">企业VI设计</a></i>
                                        <i><a href="#" class="none">法律服务</a></i>
                                        <i><a href="#" class="none">高新软件企业申请</a></i>
                                    </span>
                                </dd>
                                <dd><a href="#">记账与报税</a></dd>
                                <dd><a href="#" class="none">商标专利版权</a></dd>
                                <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>
                            </dl>
                        </div>
                    </li>
                </ul>
            </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 192 阅读

相关 android 侧滑菜单效果----DrawerLayout（抽屉导航)

转载请注明[http://blog.csdn.net/zenmela2011/article/details/50264785][http_blog.csdn.net_zenm

迈不过友情╰/ 2022年08月18日 10:50/ 0 赞/ 259 阅读

相关 js实现导航菜单效果

<script type="text/javascript"> $(document).ready(function(){ var temp;

淩亂°似流年/ 2022年08月07日 06:00/ 0 赞/ 203 阅读

相关原生js实现苹果菜单效果

主要用到的知识点 Math.pow(a,b);//a的b次方 Math.sqrt(a);//a的开方其他的并不难，直接上代码 <!DOCTYPE html>

水深无声/ 2022年05月29日 12:16/ 0 赞/ 177 阅读

相关 js、jquery菜单导航条

漂亮的导航条 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

怼烎@/ 2022年05月09日 10:33/ 0 赞/ 246 阅读

相关实现小菜单效果

![70][] 实现类似上图所示的小菜单：微信小程序wxml页面(如果是html之类的可以用div代替view)：  <view

缺乏、安全感/ 2022年05月08日 09:48/ 0 赞/ 484 阅读

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

大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQue

不念不忘少年蓝@/ 2022年01月28日 23:59/ 0 赞/ 369 阅读

相关导航下拉菜单效果

以下是首页包含的TOP.htm文件 <link href="js/menu\_style.css" rel="stylesheet" type="text/css" />

港控/mmm°/ 2021年12月20日 02:11/ 0 赞/ 377 阅读

相关使用vuetify实现导航菜单

1. 菜单项 menu: [ { index: "1", title: "首页" }, {

矫情吗；*/ 2021年07月25日 18:08/ 0 赞/ 1229 阅读

相关如何利用js实现音乐导航效果

如何利用js实现音乐导航效果 1、audio.play() 播放音频 2、audio.currentTime = 0 从头开始播放 3、引入工具库代码如下：

灰太狼/ 2020年04月24日 10:04/ 0 赞/ 1025 阅读