CSS 控件适配器中,使用最复杂的应该是 TreeView 和 Menu 了,因为他们都可能具有多级递归结构。
在这个工具包自带的官方例子中,有一个 SimpleMenu.css 作为一个定义样式的范本来参考。我在此示例的基础上将它修改为了专门针对垂直排列的菜单的样式 (SimpleMenuVertical.css)。并且为了方便使用,我添加了一些注释,分享于此。
(这种复杂度的 CSS 不加注释对大多数人来说是很难理解的)

这个菜单的显示效果如下:

CSS 代码:

.foo {} /* To satisfy W3C CSS Validator */

/* 
 * All comments created by Neil Chen
 * 2006-9-28
 */

/* 顶层菜单的高度 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
    height: 100%;
}

/* 子菜单对象的定位 */
.SimpleEntertainmentMenu ul.AspNet-Menu ul
{
    width: 130px;
    left: 145px;
    top: 0;
}

/* 所有菜单条目 */
.SimpleEntertainmentMenu ul.AspNet-Menu li
{
    background: #eeeeee;
    width:145px;
    text-align:center;
}

/* 第二级开始的菜单条目字体靠左排列 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu li li
{
    text-align:left;
}

/* 第二级开始的菜单条目的宽度 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu ul li
{
    width:130px;
}

/* 三级菜单的定位 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu li ul li ul
{
    margin: 0 0 0 -15px;
}

/* 自身能点的菜单条目用 a 表示,不能点的显示为 span */
.SimpleEntertainmentMenu ul.AspNet-Menu li a,
.SimpleEntertainmentMenu ul.AspNet-Menu li span
{
    color: black;
    padding: 4px 2px 4px 8px;
    border:1px solid #cccccc;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

/* 清除上一个样式对叶子节点的副作用(不应该显示展开箭头)*/
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}

/* 菜单条目 mouseover 时,以及显式选中高亮的条目的背景色 */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background: Black;
}

/* 所有高亮条目的字体颜色 */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
    color: White;
}

/* 清除上一个样式对高亮项目的下级菜单条目的副作用(前面被父级一并设置了,而高亮效果实际只应该存在于父级菜单本身) */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
    color: Black;
}

/* 当前高亮项目的背景小箭头变化 */
.SimpleEntertainmentMenu ul.AspNet-Menu li a:hover,
.SimpleEntertainmentMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: White;
    background: transparent url(activeArrowRight.gif) right center no-repeat;
}

/* 清除上一个样式对叶子节点的副作用(不应该显示箭头) */
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}

/* 当前选择项边框绿色 */
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
    border: solid 1px #00ff00 !important;
}

/* 当前选择项的父级项目边框为红色 */
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
    border: solid 1px #ff0000 !important;
}

/* 选中项目的子项目边框为蓝色 */
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
    border: solid 1px #0000ff !important;
}

转载于:https://www.cnblogs.com/RChen/archive/2006/09/28/css_adapter_menu_style.html

CSS 控件适配器的菜单样式解释相关推荐

  1. 为ASP.NET控件加入快捷菜单

    Cutting Edge:为ASP.NET控件加入快捷菜单 英文原文: Adding a Context Menu to ASP.NET Controls 作者:Dino Esposito 翻译: M ...

  2. html ui 下拉列表,Atitit.ui控件-下拉菜单选择控件的实现select html_html/css_WEB-ITnose...

    Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& mod ...

  3. WPf控件模板缺省样式

    WPF控件模板缺省样式:http://www.cnblogs.com/khler/archive/2009/07/14/1523043.html 转载于:https://www.cnblogs.com ...

  4. fineui grid ajax,基于FineUI Grid控件添加右键菜单

    FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...

  5. html下拉菜单隐藏属性,css修改selec下拉菜单样式

    css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...

  6. html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...

  7. Android 控件 之 Menu 菜单

    http://www.cnblogs.com/Mrs-cc/archive/2012/07/21/2603042.html 1.OptionsMenu (选项菜单)用法总结 使用方法: 方法一:添加菜 ...

  8. jeecg-boot(Online表单 / 控件及代码生成菜单配置)

    ## 1.online表单开发 1) 创建表单 例:创建 md_test_task 任务测试表 选择 " Online表单开发 " 菜单 : " 新增 " 表单 ...

  9. windows常见窗口样式和控件风格以及类样式

    Windows常见窗口样式和控件风格 王佰营 徐丽红 一.窗口样式 WS_POPUP 弹出式窗口(不能与WS_CHILDWINDOW样式同时使用) WS_CHILDWINDOW 子窗口(不能与WS_P ...

最新文章

  1. Python的__str__()方法
  2. 【Git】搭建Git 服务器
  3. 用matlab做纹理合成,关于图像纹理合成的Matlab例程
  4. linux网络编程之多路I/O转接服务器poll函数
  5. sql点滴41—MyISAM 和 InnoDB 讲解
  6. 【AD】AD20差分等长布线
  7. 电子邮件一般不在用户计算机中,[单选] 在一个完整的Internet电子邮件地址中,决定用户信箱所在的计算机地址的是()。...
  8. scrapy命令介绍
  9. 爬虫实例之获取豆瓣前250名电影名称
  10. 儿童讲堂 - 学科分类
  11. Office EXCEL 创建图片超链接打不开怎么办 Excel打开图片提示发生了意外错误怎么办
  12. 此计算机上的操作系统或service pack,win10系统安装补丁失败提示缺少service pack系统组件的设置办法...
  13. Java Stream map flatMap mapMulti的升维和降维
  14. 常用传输术语OC/STM_SDH/SONET
  15. 故宫景点功课4:太和殿院落下
  16. 线性代数(2)向量线性组合、向量内积的意义
  17. Windows MongoDB 安装及配置
  18. Android教程之名词扫盲汇总
  19. Node.js躬行记(18)——半吊子的可视化搭建系统
  20. android鼠标位移算法分析。

热门文章

  1. HDFS基本命令及上传文件API
  2. servlet的四种响应
  3. 销售管理c语言程序设计,C语言课程设计销售管理系统
  4. linux切换tab,linux-mint – ALT-TAB切换器中的图标从哪里加...
  5. python跟java适用专业_javaweb中java和python混合使用
  6. php preg split,php preg_split()字符串分割函数的使用方法
  7. 设计模式—单例模式(思维导图)
  8. 康托展开与逆康托展开(bzoj 3301: [USACO2011 Feb] Cow Line)
  9. bzoj 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
  10. bzoj 1637: [Usaco2007 Mar]Balanced Lineup