左侧菜单导航栏的实现

一直困惑左侧菜单导航栏怎么实现的，不过在学过jQuery库后，可以简单的代码就能实现类似于京东，淘宝的左侧菜单导航栏了。

下面是实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东网左侧导航实例</title><!-- 导入JQuery库 --><script src="https://code.jquery.com/jquery-1.8.2.min.js" integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk=" crossorigin="anonymous"></script><style>*{margin: 0;padding: 0;}body{background:#e3e4e5;}.left-nav{margin-top: 30px;height: 468px;background: #f0f3ef;     }.left-nav .right{width: 989px;height: 468px;margin: 0 auto;background-color: #eee;position: relative;}.left-nav .right ul{list-style: none;width: 191px;height: 468px;background-color:#fff;}.left-nav .right ul li{height: 26px;text-align: center;line-height:26px;color:#636363;font-size: 14px;cursor:pointer;}.left-nav .right ul li span:hover{color: red;}.left-nav .right ul li .div2{position:absolute;left: 191px;top: 0px;display:none;width: 798px;height: 468px;text-align: center;box-shadow: 1px 1px 2px #656565;}</style>
</head>
<body><div class="left-nav"><div class="right"><ul><li><span>家用电器</span><div class="div2"><h1>家用电器</h1><p>收到佛奥东方红抵抗力哈里还是哈奋达科技安徽分开的狂欢节的蝴蝶结的家伙 卡号对方法</p></div></li><li><span>电脑办公</span><div class="div2"><h1>电脑办公</h1><p>收到佛奥东方红抵抗力哈里还是哈奋达科技安徽分开的狂欢节的蝴蝶结的家伙 卡号对方法</p></div></li><li><span>礼品鲜花</span><div class="div2"><h1>礼品鲜花</h1><p>收到佛奥东方红抵抗力哈里还是哈奋达科技安徽分开的狂欢节的蝴蝶结的家伙 卡号对方法</p></div></li></ul></div></div>
</body>
<script>
//鼠标移入区域时
$('.left-nav .right ul li').mouseenter(function(){$(this).css({'background':'#eee'});$(this).find('div').css({'background':'#fff'}).show();//显示div$('.div2').not($(this).find('div')).hide();$('.left-nav .right ul li').not($(this)).css({'background':'#fff'});
});
//鼠标移除区域时
$('.left-nav .right ul li').mouseleave(function(){$(this).find('div').hide();//隐藏div$(this).css({'background':'#fff'})
});
</script>
</html>

实现效果图：

左侧菜单导航栏的实现相关推荐

仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考废话不多说先来个效果图接下来直接上代 ...
html5 css3左侧多级菜单,modernizr.custom.js制作html5 CSS3多级层叠侧边菜单导航栏
特效描述:modernizr.custom.js html5CSS3 多级层叠侧边菜单导航栏.CSS3多级层叠菜单代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 All Categ ...
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
一.简单的导航栏首先通过一个入门级的导航栏来练习一下 1.先布局好html的结构 2.通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理,在不同过js的情况下,就可以轻松 ...
Axure 9实现左侧动态导航栏
目前很多B端产品都是基于左侧的导航栏,有研究表明导航栏放在左侧效率更高.那基于Axure怎么能够实现呢,其实只需要动态面板组件就可以搞定. 1.首先,拖入四个矩形组件,如下图所示,第一个矩形取名为一级 ...
Vue开发实例（11）之el-menu实现左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C: ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...

左侧菜单导航栏的实现

下面是实例代码：

实现效果图：

左侧菜单导航栏的实现相关推荐

最新文章

热门文章