做一个简单的后台导航菜单
这个素材来自其它网站:
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
- 大小: 11.6 KB
分享到:
相关推荐
老板是写jsp的,老板早在08 09年就写了一个可视化开发平台,作为一个技术大牛总是对新东西非常的关注,有一天他找到我说看看阿里云的控制导航栏貌似不错。你写一个给我们的平台用吧,于是本篇博客就诞生了。 一开始...
TSDQQ网址导航系统带后台带手机版 全功能 无限制 绿色实用 1、TSDQQ网址导航系统,是一套免费开源的ASP网站系统。适合快速建立网址导航网站的各位站长使用。本系统采用html css架构,兼容FF,IE7及以上等主流浏览器...
仿Amazon.com菜单效果的简单实现
栏目导航:对网站导航菜单以及菜单排序等进行管理。 HTML静态:实现页面生成HTML,访问速度更快。 安全设置:SQL注入管理,后台可设置SQL防注入参数等,SQL注入记录,可封锁攻击者IP等。 邮件配置:SMTP邮件配置。 ...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
导航管理:添加/删除导航菜单,隐藏与显示。 新闻管理:一级分类,增加/删除/修改新闻。 友情链接:增加/修改/删除图片链接。" 留言管理:留言回复/审核功能,前台发表和显示留言列表。 数据备份:可以在线备份...
- 侧边栏导航菜单栏动态的显示 - 各种可视化地图组件 - 使用 Pinia替代 Vuex,轻量、简单、易用 - 导出excel,自定义样式导出excel、多表头导出 - 表单、表格、水印、多标签显示、打印功能,图片打印、表格打印、普通...
用户打开应用后会进入欢迎界面,然后进行注册登录,主界面有3个底部导航栏:首页、购物车和我的。首先展示所有美食列表,点进去是美食详情页,然后是可折叠式标题栏,可以进行添加购物车,多次点击会增加数量。然后...
2、导航管理:自定义导航菜单名称,支持外部链接、排序等。 3、图片管理:设置网站的幻灯片,支持幻灯片按频道显示名称和链接以及显示的顺序等。 4、添加信息:支持上传缩略图、组图、启用信息、关键字和内容介绍等...
近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.
TSDQQ网址导航系统带后台带手机版 全功能 无限制 绿色实用 通用版tsdqq2015.1.19版 第八版 进行了以下修改 1、网址数目已达3138个。 2、由于疏忽,导致统计代码被注释掉,以至于统计不到数据的局面。 3、增加部分SEO...
网站全新仿照520导航,版面清晰简洁,并可实现版面自由换色。 演示地址www.115le.com 安装方法 1.上传网站安装程序到空间,空间需支持PHP,MYSQL数据库20M 即可。 2.访问网网址执行安装,按照提示填入mysql数据库...
* 增加名站导航切换栏,可以在后台修改调用网址,如“常用软件”,“热门游戏”之类; * 增加天气预报的定制功能,并移至天气处可展开未来三天的天气预报; * 增加程序升级提醒,方便站长获得官方升级信息 * ...
ps:调试很简单,程序包里有个asp调试软件 双击就可以运行!不需要iis! 后台地址admin/index.asp ...基本配置定义功能 ...网站页面顶部的图标菜单,后台可以实现对应的管理,菜单名称和菜单连接可以任意修改
惠阳信息网分类信息系统1.5 ... ps:调试很简单,程序包里有个asp调试软件 双击就可以运行!不需要iis! ...后台地址admin/index.asp ...网站页面顶部的图标菜单,后台可以实现对应的管理,菜单名称和菜单连接可以任意修改
8.1.6 站点导航控件(SiteMapDataSource) 8.2 重复列表控件(Repeater) 8.3 数据列表控件(DataList) 8.4 数据列表控件(GridView) 8.5 数据绑定控件(FormView) 8.6 数据绑定控件(DetailsView) 14 第一篇 ...
平台的前台页面通过简洁的平台页面设计和功能结构的分区更好的提高用户的使用体验,没有过多的多余的功能,把所有的功能操作都整合在功能操作的导航栏之中。更加突出业务的展示和详细的功能操作,使用户在使用本平台...
5、Shiro权限认证,操作权限控制精密细致,对所有管理链接都进行权限验证,可控制到导航菜单、功能按钮。提高开发效率及质量。6、常用类封装,日志、缓存、验证、字典、文件(本地、七牛云)。等等,目前兼容浏览器...
- 支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。 - 后台管理支持修改背景图片,博客配置等信息,操作简单,支持上传相册。 - 代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上传模式...
系统前端设计大气典雅,适合模板定制和更换,导航栏采用下拉菜单方式,与后台目录树成功对接文章列表页采用文章摘要和文章缩略图的方格子展示方式,摘要和缩略图为系统后台添加或者编辑文章时候系统智能提取的,不...