Div Vertical Menu ver5
这个小功能,如果是算此次,已经是第5次修改了。
可以从这里看到前4次:
V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html
V2, http://www.cnblogs.com/insus/archive/2011/10/18/2216157.html
V3, http://www.cnblogs.com/insus/archive/2011/10/19/2217314.html
V4, http://www.cnblogs.com/insus/p/3205293.html
为什么会有第5次修改呢?原因是随菜单多少时,我们需要改好javascript代码。为添加div的Id和image的Id至阵列中去。
因此Insus.NET想到,使用class的样式,加上使用jQuery来实现:
css样式代码,添加一个class:
.div_menu {
margin-top: 2px;
margin-bottom: 2px;
padding: 5px;
padding-left: 20px;
background-color: #dcdcdc;
height: 16px;
} .imgStyle {
margin-left: 5px;
margin-right: 5px;
} .overStyle {
background-color: #faf0e6;
}
Source Code
在html代码中,你应为div和img标签添加class,或理把其ID改为class也行,在此Insus.NET选择后者:
<div style="background-color: #FFFFFF; height: 3px;">
</div>
<div class="div_menu">
<img class="imgStyle" /><a href='<%= ResolveUrl("~/Default1.aspx") %>'>Hyperlink1</a>
</div>
<div class="div_menu">
<img class="imgStyle" /><a href='<%= ResolveUrl("~/Default2.aspx") %>'>Hyperlink2</a>
</div>
<div class="div_menu">
<img class="imgStyle" /><a href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>
</div>
<div class="div_menu">
<img class="imgStyle" /><a href='<%= ResolveUrl("~/Default4.aspx") %>'>Hyperlink4</a>
</div>
<div class="div_menu">
<img class="imgStyle" /><a href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>
</div>
Source Code
引jQuery库:
<script src="~/Scripts/jquery-2.2.1.js" type="text/javascript"></script>
这样,我们可以把javascript修改为通用的代码:
$(function () {
$(".div_menu").mouseover(function () {
$(this).addClass('overStyle');
}).mouseout(function () {
$(this).removeClass('overStyle');
}); $(".imgStyle").attr('src', '/Content/imgs/link.gif').attr('align', 'absmiddle'); });
Source Code
经过这样重构与修改后,我们日后有菜单项的添加与减少,我们不必再去修改js代码。
Div Vertical Menu ver5的更多相关文章
- Vertical Menu ver4
以前一直使div来创建Vertical菜单,也曾有过3个版本.http://www.cnblogs.com/insus/archive/2011/10/19/2217314.html 现今Insus. ...
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ASP.NET服务器控件Menu
http://www.cnblogs.com/huc87/archive/2009/04/05/1429831.html ASP.NET服务器控件Menu 1. ASP.NET 服务器控件 ...
- 使用div元素来包含内容
在编写样式表时,经常要用到<div>元素来包含内容~~ 下面试简单的示例~ moreHigh.htm l <!DOCTYPE html> <html lang=" ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- CSS+DIV 设计一个简单的个人网页界面
*{ margin:0px; padding:0px; } body{ background:#e5e6d0; } #header,#menu,#banner,#main,#footer{ margi ...
- 点击div折叠
<!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...
- Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...
随机推荐
- Bootstrap-Select 动态加载数据的小记
关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...
- 一道返回num值的小题目
题目描述: 实现fizzBuzz函数,参数num与返回值的关系如下: .如果num能同时被3和5整除,返回字符串fizzbuzz .如果num能被3整除,返回字符串fizz .如果num能被5整除,返 ...
- warensoft unity3d 更新说明
warensoft unity3d 组件的Alpha版本已经发布了将近一年,很多网友发送了改进的Email,感谢大家的支持. Warensoft Unity3D组件将继续更新,将改进的功能如下: 1. ...
- C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...
- 微信开发 :WeixinPayInfoCollection尚未注册Mch 问题解决
在使用开源项目 SENPARC.WEIXIN SDK 调用微信支付接口的时候出现了WeixinPayInfoCollection尚未注册Mch,这个问题. 最后地解决方案是: 我这个傻逼忘了在全局Gl ...
- Div Vertical Menu ver5
这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- (转) 将ASP.NET Core应用程序部署至生产环境中(CentOS7)
原文链接: http://www.cnblogs.com/ants/p/5732337.html 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Cor ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- Linux基础介绍【第一篇】
Linux简介 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心 ...