侧边菜单导航(JS+CSS)

最新推荐文章于 2024-03-28 15:24:34 发布
最新推荐文章于 2024-03-28 15:24:34 发布
阅读量8.7k 收藏 42
点赞数 9
分类专栏： web前端 JavaScript 文章标签： 导航 javascript CSS 简单实用 菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b954960630/article/details/78766031
版权

效果展示：

（1） 

（2）  

（3）

注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入

        （2）注意修改引入的css和JS文件的路径


HTML

<!DOCTYPE html>
<html>
<head>
	<title>SideBar Nav</title>
	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/sidenav.css">
</head>
<body>
	<div id="sideBox">
		<h3 class="sideHead">Problems</h3>
		<div class="sideLi">
			<h5 class="sideLih">A Problems</h5>
			<ul class="sideLiUl">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">Other</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">B Problems</h5>
			<ul class="sideLiUl">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problemsdadadaaddad</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">C Problems</h5>
			<ul class="sideLiUl sidebottom">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">D Problems</h5>
			<ul class="sideLiUl sidebottom">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>

			</ul>
		</div>
	</div>

	<script type="text/javascript" src="./js/sidenav.js"></script>
</body>
</html>

CSS 
/**********public**********/
*{
	margin: 0;
	padding: 0;
}
ul{
	list-style-type: none;
}
body{
	background: #fcfcfc;
}
a{
	text-decoration-line: none;
}
/**********Nav Public**********/
#sideBox,
.sideLih,
.sideHead{
	background: #306BA8;
}
.sideLih,
.sideHead{	
	border-bottom: 1px solid #fff;
	color: #fff;	
}
#sideBox,
.sideLiUl{
	box-shadow: 1px 0 3px #306BA8;
}
/**********Nav Box**********/
#sideBox{
	position: fixed;
	left: 0;
	top:30%;
	width: 150px;
	padding: 0 0 20px 0;
}

/**********Nav header**********/
.sideHead{
	height: 55px;
	line-height: 55px;
	color: #fff;
	text-align: center;	
	text-shadow: 1px 0px 0px #ccc;
}

/**********Nav body**********/
.sideLi{
	position: relative;
	left: 0;
	top:0;
}
.sideLih{
	padding: 10px 0px 10px 20px;
	font-weight: lighter;
}
.sideLiUl{
	background:#214a76;
	position: absolute;
	left: 150px;
	top:0;
	width: 306px;
	display: none;
	opacity:0;
　　    filter:alpha(opacity=0); /* filter 过滤器   兼容IE678*/
	overflow: hidden;
	border: 1px solid #214a76;
	border-left: none;
	border-radius: 3px 5px 5px 3px;
}
.sidebottom{
	top:-300%;
}
.sideLiUl li{
	color: #fff;
	float: left;
	overflow: hidden;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 5px;
	display: inline-block;
	width: 90px;
}
.sideLiUl li a{
	color: #fff;
	font-weight: lighter;
	font-size:12px;
}
.sideLi h5:hover,
.sideLiUl li:hover{
	cursor: pointer;
}
.sideLiUl li:hover{
	text-decoration-line: underline;
}

JavaScript 
/*获取样式*/
function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}
/*运动框架*/
function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === 'opacity') {
        obj.style.filter = 'alpha(opacity:' + cur + ')';
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + 'px';
      }

    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }

  }, 30);
}

window.onload = function(){
	var oSideBox  = document.getElementById('sideBox');
    var aSideLi   = oSideBox.getElementsByClassName('sideLi');
    for(var i=0;i<aSideLi.length;i++){
    	aSideLi[i].onmouseover = function(){
           this.children[0].style.backgroundColor = "#214a76";
           this.children[1].style.display = "block";
           startMove(this.children[1],{opacity:100});
        };
        aSideLi[i].onmouseout = function(){
        	startMove(this.children[1],{opacity:0});
        	this.children[1].style.display = "none";
            this.children[0].style.backgroundColor = "#306BA8";
        };
    }
};

白小宇
关注
  • 9
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Java Web基础】（十三）侧边菜单导航（JS+CSS）
passer__jw767的博客
11-25 2169
效果图是这样的： JSP： <!DOCTYPE html> <html> <head> <title>SideBar Nav</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <link rel="stylesheet" type="text/css" href="./css/sidenav.css
3-导航栏和侧边栏的配置
majc111111的博客
04-11 370
查考链接: https://v2.vuepress.vuejs.org/zh/reference/default-theme/config.html#sidebar。
企微侧边栏开发（内部应用内嵌H5）
最新发布
weixin_43975276的博客
03-28 1359
公司的业务需要用企业微信和客户进行沟通，而客户的个人信息基本都存储在内部CRM系统中，对于销售来说需要一边看企微，一边去内部CRM系统查询，比较麻烦，希望能在企微增加一个侧边栏展示客户的信息，提升销售的工作效率。
使用HTML、CSS和JavaScript创建响应式玻璃质感的边栏Sidebar
m0_61280105的博客
11-22 304
【代码】使用HTML、CSS和JavaScript创建响应式玻璃质感的边栏Sidebar。
js侧边菜单
weixin_30892763的博客
09-14 795
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮显示当前选中菜单.可以收起菜单组. html 菜单容器nav,里面每个ul是一组菜单,每个sidemenu-title是菜单组的标题,可以加图标. <nav class="si...
CSS小练习3——网页左侧导航栏
surymy
11-20 4338
这个难道真的这么简单吗？？ 先上效果图，不能说一模一样，只能说是毫无差别： . 我写的代码是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test1</title> <link rel="stylesheet" href="../reset.css"> <style>
js+css小清新下拉侧边导航菜单
06-04
js+css小清新下拉侧边导航菜单
JavaScript+CSS实现仿天猫侧边网页菜单效果
11-23
本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果。分享给大家供大家参考。具体如下： 这是一款自己写的仿天猫的菜单效果，二级分类的功能已经实现，但没有美化，留着用的朋友自己完善吧，JS功能已经实现，...
js+css3左侧侧边滑动菜单特效代码
03-20
js+css3左侧侧边滑动菜单代码是一款基于css3制作网页左侧悬浮的菜单栏滑动展开收缩代码。
js+css3左侧侧边滑动菜单代码.zip
11-02
js+css3左侧侧边滑动菜单代码.zip
CSS布局练习，jd左侧导航栏
qq_43987112的博客
05-10 295
css布局练习，jd左侧导航栏
jquery.singlePageNav.min.js单页面导航插件
08-09
jquery.singlePageNav.min.js单页面导航插件jquery.singlePageNav.min.js单页面导航插件jquery.singlePageNav.min.js单页面导航插件
一个简单的SideBarNavDemo左右滑出的菜单
10-12
一个简单的SideBarNavDemo左右滑出的菜单 适合新手使用
sidebar_nav
03-21
现场演示 简单的演示在这里： : 复杂的演示在这里： : 关于 您想要一个出色的导航面板，该面板可在各种设备（台式机，iPhone，Android）上使用。问题在于，这是一个难题，学习曲线陡峭。该项目使启动和快速运行变得非常容易。 该项目基于项目，该项目具有出色的导航系统，但仅隔离导航部分却是一项艰巨的任务。该项目从大量提取导航栏并删除依赖项，并制作了一个简单的API以使用此侧边栏导航面板。 原料药 可以使用以下Javascript函数： sidebar_nav_init(title_str, html_str) sidebar_nav_set(html_str) 如果出现错误， sidebar_nav_error()返回true。 HTML设置 您的html文档必须包含ID为sidebar_nav_opacity_pane的div。例子：我的测试 在此示例中，单词“我的测试”
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
html左侧工具栏插件,jQuery绚丽的菜单插件sidenav
weixin_36040020的博客
06-03 997
插件描述：sidenav是一款和绚丽的垂直菜单,样式简洁时尚的jQuery和CSS3侧边栏菜单插件。直接部署即可，文件夹index.html直接打开可查看效果图，js和css文件都在对应文件夹中sidenavsidenav是一款简洁时尚的jQuery和CSS3侧边栏菜单插件。该侧边栏插件具有手风琴的多级菜单效果，使用简单，效果简洁大方。使用方法在页面中引入sidenav.min.css、jquer...
html+移动端左侧菜单,CSS3移动端侧边栏
weixin_28723109的博客
06-05 816
ol,ul,li {list-style: none;}.nav_grid li.menu {display: block;background: url(/uploads/user_upload/68618/menu.png) no-repeat;width: 28px;height: 26px;float: left;margin-top: 6.5%;margin-left: 5%;backg...
js实现侧边导航栏展开和折叠
热门推荐
遇见更好的自己
06-09 3万+
效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。 代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
js实现侧导航栏
qq_43228899的博客
05-07 1003
实现效果： 实现源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
html+css侧边导航栏点击后再展开
07-19
### 回答1： 在HTML和CSS中创建一个可以点击后展开的侧边导航栏，可以使用HTML和CSS的结合。 首先，在HTML中创建一个包含导航栏的父容器元素，例如一个div元素。然后在这个div中创建一个按钮和一个列表。 按钮可使用一个普通的按钮元素，例如一个button元素，用于展开和收起导航栏。列表可以使用一个无序列表（ul）来展示导航栏的各个选项。 在CSS中对父容器元素进行样式设置，包括设置宽度、高度、背景颜色、定位等。将导航栏隐藏起来，可以使用display属性将其设置为none。 接下来，使用CSS选择器选中按钮元素，并设置它的样式属性，如背景颜色、边框样式等。 然后，使用CSS选择器选中列表元素，并设置其样式属性，如背景颜色、边框样式等。将列表元素设置为隐藏，可以使用display属性将其设置为none。 为了实现按钮点击后展开导航栏的效果，可以使用CSS选择器选中按钮元素，并使用:hover伪类设置鼠标悬停时的样式。在:hover伪类中，设置导航栏列表元素的display属性为block，以显示它们。 最后，可以使用JavaScript监听按钮的点击事件，并使用元素的style属性来切换导航栏列表的显示和隐藏状态。在点击事件的处理函数中，判断导航栏列表的当前显示状态，如果是隐藏，则设置其display属性为block，如果是显示，则设置其display属性为none。 这样，当点击按钮时，导航栏列表就会展开或收起。 ### 回答2： 在HTML和CSS中，可以通过点击侧边导航栏后再展开的方式来实现。首先，我们需要先创建一个基本的侧边导航栏的HTML结构，可以使用无序列表（<ul>）和列表项（<li>）来创建导航栏的选项。然后，使用CSS来实现导航栏的展开和收缩效果。 首先，我们可以给每个列表项添加一个点击事件，并绑定一个JavaScript函数。该函数在点击列表项时触发，并通过改变导航栏的CSS属性来实现展开和收缩的效果。例如，我们可以使用classList.toggle("active")来切换导航栏的active类，该类具有一些CSS属性用来控制导航栏的展开和收缩。 接下来，在CSS中我们可以使用transition属性来指定导航栏展开和收缩的过渡效果。通过给导航栏的宽度或者左外边距属性设置一个过渡效果，我们可以实现平滑的展开和收缩过程。同时，在展开状态下可以使用CSS的display属性或者opacity属性来控制导航栏的可见性。 最后，我们可以使用media query来响应不同的屏幕尺寸，以便在小屏幕设备上默认将导航栏收缩起来，只有在点击后才展开。这样可以提供更好的用户体验。 总结起来，通过在HTML中添加点击事件和JavaScript函数，并在CSS中使用过渡效果和响应式设计，我们可以实现侧边导航栏点击后再展开的效果。 ### 回答3： 在HTML和CSS中实现侧边导航栏点击展开的效果可以通过以下步骤实现： 1. 首先，在HTML中创建一个包含导航栏的容器元素，例如一个div元素。 2. 在这个容器中添加需要显示的导航菜单项，可以使用无序列表ul和列表项li来创建菜单结构。 3. 使用CSS样式设置导航栏的基本样式，例如设置宽度、背景颜色和字体样式等。 4. 为导航菜单项添加hover效果的样式，可以使用CSS伪类选择器:hover来实现，当鼠标悬停在菜单项上时，改变菜单项的样式。 5. 使用JavaScript来实现导航栏的点击展开功能。可以将点击事件绑定到导航菜单项上，当点击菜单项时，展开或隐藏子菜单。 下面是一个简单的示例代码： HTML代码： ```html <div class="sidebar"> <ul class="menu"> <li class="menu-item">菜单项1 <ul class="submenu"> <li>子菜单项1</li> <li>子菜单项2</li> </ul> </li> <li class="menu-item">菜单项2</li> <li class="menu-item">菜单项3</li> </ul> </div> ``` CSS代码： ```css .sidebar { width: 200px; background-color: #f2f2f2; font-family: Arial, sans-serif; } .menu { list-style-type: none; padding: 0; margin: 0; } .menu-item { padding: 10px; cursor: pointer; } .submenu { display: none; } .submenu li { padding: 5px; } .menu-item:hover .submenu { display: block; } ``` JavaScript代码 (使用jQuery来简化操作)： ```javascript $(document).ready(function(){ $('.menu-item').click(function(){ $(this).children('.submenu').toggle(); }); }); ``` 以上代码实现了一个具有点击展开功能的侧边导航栏。当点击菜单项1时，子菜单项将展开或隐藏。其他菜单项没有子菜单，因此没有展开效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值