jquery导航菜单

末蓝、 2022-10-02 09:54 247阅读 0赞

*{
    				margin: 0;
    				padding: 0;
    			}
    			ul{
    				width: 800px;
    				overflow: hidden;
    				background-color: #000000;
    				position: relative;
    				margin: 0 auto;
    			}
    			li{
    				position: relative;
    				z-index: 100;
    				list-style: none;
    				float: left;
    				padding: 12px 24px;
    				color: white;
    				font-size: 16px;
    			}
    			/*悬浮的背景颜色*/
    			.active{
    				background-color: red;
    			}
    			#hoveract{
    				position: absolute;
    				width: 80px;
    				height: 45px;
    				background-color: red;
    			}

<body>
    		<ul>
    			<li class="active">首页</li>
    			<li>新闻</li>
    			<li>社会新闻</li>
    			<li>汽车</li>
    			<li>家居</li>
    			<li>社会新闻</li>
    			<li>汽车</li>
    			<li>家居</li>
    			<div id="hoveract"></div>
    		</ul>
    	</body>

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		$("li").on("mouseover",function(){
    			var whid=$(this).outerWidth()
    			$('#hoveract').stop();
    			$('#hoveract').animate({left:$(this).position().left,width:whid},'linear')
    		})
    		$("ul").on("mouseout",function(){
    			$('#hoveract').stop();
    			$('#hoveract').animate({left:0,width:$("li").eq(0).outerWidth()},'linear')
    		})
    	</script>

![在这里插入图片描述][20190617195001516.jpg]

[20190617195001516.jpg]: /images/20220113/1f395b8f0b154b5f9ecdff2b0d380a87.png

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery天猫商品分类导航菜单

jQuery天猫商品分类导航菜单 -------------------- 一、HTML模块相关源码 HTML文件：index.html <!DOCTY

水深无声/ 2023年10月04日 10:12/ 0 赞/ 22 阅读

相关利用jQuery制作的导航下拉菜单效果

利用jQuery制作的导航下拉菜单效果，其实利用css同样可以实现导航下拉菜单效果，但自从学习了jQuery后，感觉还是jQuery做起来效果更好。jQuery制作导航下拉菜单

曾经终败给现在/ 2022年11月09日 12:49/ 0 赞/ 259 阅读

相关 jquery导航菜单

{ margin: 0; padding: 0; } ul{ width: 800px;

末蓝、/ 2022年10月02日 09:54/ 0 赞/ 248 阅读

相关 jquery顶部导航浮动二级菜单

[下载地址][Link 1]网站顶部导航条二级菜单，jquery实现的导航浮动效果。 ![1632563637.png][] dd: [Link 1]: https:/

柔情只为你懂/ 2022年09月12日 14:49/ 0 赞/ 231 阅读

相关 jQuery红色商城分类导航菜单代码

[下载地址][Link 1]没什么特别的导航菜单，在电子商务商城网站上常见的分类导航方式，使用jQuery实现的悬浮分类效果的HTML代码。 ![1631392556.png

我就是我/ 2022年09月11日 03:29/ 0 赞/ 228 阅读

相关 jquery简单菜单下拉导航

jquery简单菜单下拉导航代码如下：复制运行即可 <!doctype html> <html> <head> <meta c

爱被打了一巴掌/ 2022年07月15日 04:20/ 0 赞/ 320 阅读

相关 css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子 <body> <div id="top"> <div id="logo"><i

曾经终败给现在/ 2022年06月14日 06:29/ 0 赞/ 308 阅读

相关 jquery水平导航栏动态菜单

附上结果如下: ![这里写图片描述][70] 代码如下: <!DOCTYPE html> <html lang="en"> <head

桃扇骨/ 2022年05月21日 02:40/ 0 赞/ 323 阅读

相关 js、jquery菜单导航条

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

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

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

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

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