创建可主题化的 jQuery UI 菜单

由于我不太擅长设计，我决定将新版本 MediaCommMVC 的风格完全基于 jQuery UI 主题。

我从菜单开始，并且很确定能找到一个现成的菜单，它提供二级飞出菜单并支持 jQuery 主题。但我在找到的数百个菜单示例中，没有一个支持 jQuery UI 主题（也许我只是错过了？）。jQuery UI 1.8 中有一个属于自动完成小部件的 menu() 函数。但它的风格与主题的整体配色方案不太协调。

我并不太想从头开始创建一个菜单小部件，所以查看了 jQuery UI 示例，以寻找我可以重用的组件。抛开飞出行为不谈，就主题支持而言，按钮组似乎是一个不错的选择。第一级菜单只需几个单选按钮和一个 jQuery 调用即可创建。

<script type="text/javascript">
    $(function () {
        $("#mainNav").buttonset();
    });
</script>
<nav id="mainNav">
    <input type="radio" id="radio1" name="menu" />
       <label for="radio1">Menu Item 1</label>        
    <input type="radio" id="radio2" name="menu" />
        <label for="radio2">Menu Item 2</label>  
    <input type="radio" id="radio3" name="menu" />
        <label for="radio3">Menu Item 3</label>
</nav>

为了添加二级飞出菜单，我将一个菜单项包装在 div 中，并包含嵌套的单选按钮。

<div class="menu-item">
    <input type="radio" id="radio2" name="menu" />
    <label for="radio2">Menu Item 2</label>
    <div class="hover-menu">
        <div class="menu-item">
            <input type="radio" id="radio2Sub1" name="subMenu2" />
            <label for="radio2Sub1">sub menu item 1</label>
        </div>
        <div class="menu-item">
            <input type="radio" id="radio2Sub2" name="subMenu2" />
            <label for="radio2Sub2">sub menu item 2</label>
        </div>
    </div>
</div>

以下 CSS 代码使子菜单在 hover 时可见。

#mainNav .menu-item { display: inline; }
 
#mainNav .menu-item .hover-menu { display: none; }
 
#mainNav .menu-item:hover .hover-menu
{
    display: block;
    position: absolute;
    left: 0;
    top: 28px;
}
 
#mainNav .menu-item:hover { position: relative; }

结果可能如下所示

你可以通过下载 示例 来试用。