后台导航菜单的简单实现

最新推荐文章于 2024-06-19 16:39:11 发布
最新推荐文章于 2024-06-19 16:39:11 发布
阅读量393 收藏 1
点赞数
分类专栏： 网页制作（HTML/PHP/CSS/JAVASCRIPT） 文章标签： jQuery JavaScript ITeye XHTML CSS ViewUI

做一个简单的后台导航菜单

 

这个素材来自其它网站：

http://www.865171.cn/admin-templates/detail-8329.aspx

下载地址：

http://www.865171.cn/admin-templates/download/admin-template-030/admin-templates.rar

 

我只用了它里面的几张图片和样式，不过比他实现的要简单，样式也简写了很多，仅供学习参考使用！

 

展示下样图：

导航样图

 

源代码：

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>管理管理页面</title>
	<script src="js/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
	<style type="text/css">
		body,div,img,ul,li,a,*{margin: 0px;padding:0px;font:12px Arial,Helvetica,sans-serif,'宋体';}
		body {
			color:#000;
			background-color: #EEF2FB;
		}
		#navigation {
			width: 182px;

		}
		.menuBar {
			font-weight:bold;
			width: 182px;
			cursor: pointer;
			height: 30px;
			line-height: 30px;
			moz-outline-style: none;
			background-image: url(images/navigation/menu_bgS.gif);
			background-repeat: no-repeat;
			text-align: center;
		}
		.menu ul li {
			height: 26px;
			line-height: 26px;
			display: block;
			list-style-type: none;
		}
		.menu ul li a  {
			height: 26px;
			line-height: 26px;
			color: #333333;
			display: block;
			overflow: hidden;
			text-align: center;
			text-decoration: none;
			background-image: url(images/navigation/menu_bg1.gif);
			background-repeat: no-repeat;
		}

		.menu ul li a:hover {
			color: #006600;
			font-weight:bold;
			background-image: url(images/navigation/menu_bg2.gif);
		}
		img{margin:0px; padding:0px;}
	</style>
	<script language="javascript">
		$().ready(function(){
			$('.menu').hide();
			$('.menu:first').slideDown();
			$(".menuBar").click(function(){
				$(this).next().slideToggle();//("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
			})
		});
	</script>
</head>
	<body>
		<div id="navigation">
			<div class="content">
				<div class="menuBar">
					网站常规管理
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">菜单管理</a></li>
						<li><a href="#" target="main">模块管理</a></li>
						<li><a href="#" target="main">用户管理</a></li>
						<li><a href="#" target="main">日子管理</a></li>
					</ul>
				</div>
				<div class="menuBar">
					商品信息管理
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">添加货物</a></li>
						<li><a href="#" target="main">查看订单</a></li>
						<li><a href="#" target="main">发货管理</a></li>
						<li><a href="#" target="main">进货管理</a></li>
						<li><a href="#" target="main">订单跟踪</a></li>
						<li><a href="#" target="main">对账报表</a></li>
					</ul>
				</div>
				<div class="menuBar">
					待添加
				</div>
				<div class="menu">
					<img src="images/navigation/menu_topline.gif" width="182" height="5" />
					<ul>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
						<li><a href="#" target="main">待添加</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

 

 

jQuery下载地址：

http://dl.iteye.com/topics/download/40329d8d-66dd-3af7-8c6b-ca10ad0087d2

 

 

LightSoldier
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后台管理系统【home页面】
weixin_62765236的博客
10-05 290
后台管理系统【home页面】
后台管理菜单导航（界面）
03-18
最新整理的一份易想后台管理导航菜单及界面
后台管理系统 分页
最新发布
qq_61132537的博客
06-19 274
, //这个只是示例 给后端传参数是params:data export function jubenleist(data) { return request({ url: '/back/script/select', method: 'get', params: data }) }//第三步就是给后端传入参数。
简单易操作的后台左边导航，新手网站必备
09-01
比较适合新手使用，如果您觉得鼠标的OVER以及DOWN事件不习惯，可以修改。简单易操作
admin后台菜单栏的实现
wwwwwww31311的博客
02-17 433
菜单管理树形结构 整个树结构最好不要超过三层 权限表pid用来标识一个父子模块的关系 根据项目开始前制作的功能模块，如下图，我们插入数据 java表示树结构 1 为了配置zTree插件，我们应该使用以下属性 id：菜单项组件 pid：表示父节点； name：节点名； icon：节点图标； url:节点跳转路径； open：是否开启节点控制 2 数据表字段设计如下 3 Menu类在上述基础上使用List<·Menu> children属性存储当前节点的子节点 4 根据设计大纲的网站功能模块来
jQuery网站后台侧边栏导航菜单
ICode联盟
12-17 246
jQuery网站后台侧边栏导航菜单是一款蓝色简易的后台侧边栏导航菜单特效。
创建简单的后台管理菜单
a2791897673的博客
09-02 1336
一、实现过程： 1.在模块根目录添加类文件：AdminMenu.cs，如果已经存在该文件，则忽略这一步。 2.实现类：AdminMenu public class AdminMenu : INavigationProvider { public Localizer T { get; set; } /// &lt;summary&gt; /// 指定这个菜单是一个管理菜...
CSS3后台管理垂直导航代码
07-24
在CSS3技术的支持下，这个导航菜单可以实现平滑的动画过渡、渐变、阴影等视觉效果，提升整体界面的现代感和专业性。CSS3的新特性如伪类选择器（`:hover`, `:active`, `:focus`）使得在鼠标悬停、点击或获取焦点时，...
jQuery后台左侧三级导航菜单
11-19
在构建后台导航菜单时，jQuery提供了丰富的API和功能，使得动态交互变得简单易行。 三级导航菜单通常包括一级菜单、二级菜单和三级菜单，它们按照层次结构展开。在后台设计中，左侧布局通常用于放置导航菜单，因为...
jQuery左侧下拉导航菜单后台框架模板
06-01
这个框架模板使得构建功能丰富的、响应式的网页导航菜单变得更加简单。 首先，jQuery是一个轻量级的JavaScript库，它的主要优势在于简化了DOM操作、事件处理、动画效果以及Ajax交互。在本模板中，jQuery被用来处理...
layUI实现三级导航菜单效果
10-16
在Web开发中，创建一个功能丰富的用户界面是至关重要的，特别是对于后台管理系统，导航菜单是组织和呈现大量信息的关键元素。layUI是一个轻量级的前端框架，它提供了丰富的组件和样式，使得开发者能够快速构建出美观...
Excel VBA: 工作表(Sheet)浏览导航插件
03-24
NULL 博文链接：https://wjason.iteye.com/blog/1099527
003-01-VBA小工具-任务导航
01-05
003-01-VBA小工具-任务导航
jQuery ace后台菜单导航
11-03
在jQuery Ace后台菜单导航中，我们利用jQuery选择器选取DOM元素，通过事件绑定实现用户交互，并使用动画效果来增强视觉体验。 接着，我们来看看如何实现后台菜单导航。在HTML结构中，通常会包含一个侧边栏或者顶部...
DISCUZ后台添加导航栏和左侧菜单栏
qiangqiang_blog的博客
05-28 9672
discuz后台不存在模板文件，所以我们无法通过追源码的方式来添加导航栏，下面介绍下discuz后台添加导航栏的方法： 需要用到的文件就两个： (1)\source\admincp\admincp_menu.php (2)\source\language\lang_admincp_menu.php     admincp_menu.php中代码：$topmenu = array (
简单SAP项目开发之导航栏左侧菜单(模拟后台ajax请求)mock.js的使用
licmi的博客
08-24 1109
简单SAP项目开发之导航栏左侧菜单（模拟后台ajax请求）mock.js的使用前言mock.js模拟响应ajax请求安装mock.js依赖配置开发环境及生产环境导入模拟数据测试左侧树收缩功能效果总线的概念 前言 续前篇SAP项目开发之登录注册：链接: https://blog.csdn.net/licmi/article/details/108155421. mock.js模拟响应ajax请求 安装mock.js依赖 npm install mockjs -D 配置开发环境及生产环境 为了只在开发环境
年会活动html酷炫抽奖功能-高端版
xcLeigh
01-26 3214
年会活动html酷炫抽奖功能-高端版，支持json数据，主题风格切换。 资源下载地址（https://download.csdn.net/download/weixin_43151418/14934322）
【学习】若依源码（前后端分离版）之 “ 分页以及查询的功能实现”
qq_44386537的博客
08-04 4324
分页处理一方面可以提高我们浏览数据的效率，符合我们浏览者的心理，减少了大量数据存在的杂乱问题；同时分页技术也可以降低带宽使用，提高访问速度。这次一起来学习ruoyi的分页功能实现
jQuery大法第五式--动画效果
qq_36789311的博客
08-16 179
一、基本的动画效果 1、隐藏元素 hide():可以用于隐藏元素，将元素CSS样式属性display设置为none，它会记住原先的属性状态。 （1）不带参数 hide()：用于实现不带任何效果的隐藏匹配元素。 （2）带参数 hide(speed,[callback])：用于实现以动画形式隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数。 speed：动画的时长 callb...
探讨网站左侧导航的优化实现
CSS在实现这样的导航栏时，主要任务是处理布局、鼠标悬停效果、展开/关闭子菜单等。博客园可能采用了一些JavaScript或jQuery来实现交互效果，如点击主类别时显示/隐藏对应的子菜单。不过，文章并未深入讨论具体的CSS...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值