这个小功能,如果是算此次,已经是第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的更多相关文章

  1. Vertical Menu ver4

    以前一直使div来创建Vertical菜单,也曾有过3个版本.http://www.cnblogs.com/insus/archive/2011/10/19/2217314.html 现今Insus. ...

  2. 纯div+css制作的弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ASP.NET服务器控件Menu

    http://www.cnblogs.com/huc87/archive/2009/04/05/1429831.html ASP.NET服务器控件Menu 1.       ASP.NET 服务器控件 ...

  4. 使用div元素来包含内容

    在编写样式表时,经常要用到<div>元素来包含内容~~ 下面试简单的示例~ moreHigh.htm l <!DOCTYPE html> <html lang=" ...

  5. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  6. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. CSS+DIV 设计一个简单的个人网页界面

    *{ margin:0px; padding:0px; } body{ background:#e5e6d0; } #header,#menu,#banner,#main,#footer{ margi ...

  8. 点击div折叠

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...

  9. Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

随机推荐

  1. Bootstrap-Select 动态加载数据的小记

    关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...

  2. 一道返回num值的小题目

    题目描述: 实现fizzBuzz函数,参数num与返回值的关系如下: .如果num能同时被3和5整除,返回字符串fizzbuzz .如果num能被3整除,返回字符串fizz .如果num能被5整除,返 ...

  3. warensoft unity3d 更新说明

    warensoft unity3d 组件的Alpha版本已经发布了将近一年,很多网友发送了改进的Email,感谢大家的支持. Warensoft Unity3D组件将继续更新,将改进的功能如下: 1. ...

  4. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  5. 微信开发 :WeixinPayInfoCollection尚未注册Mch 问题解决

    在使用开源项目 SENPARC.WEIXIN SDK 调用微信支付接口的时候出现了WeixinPayInfoCollection尚未注册Mch,这个问题. 最后地解决方案是: 我这个傻逼忘了在全局Gl ...

  6. Div Vertical Menu ver5

    这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...

  7. es6小白学习笔记(一)

    1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...

  8. (转) 将ASP.NET Core应用程序部署至生产环境中(CentOS7)

    原文链接: http://www.cnblogs.com/ants/p/5732337.html 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Cor ...

  9. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  10. Linux基础介绍【第一篇】

    Linux简介 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心 ...