垂直菜单是否有 CSS/JQuery 片段？ [关闭]答案

【问题标题】：Is there a CSS/JQuery snippet for vertical menus? [closed]垂直菜单是否有 CSS/JQuery 片段？ [关闭]
【发布时间】：2010-11-28 04:00:10
【问题描述】：

我正在寻找与 Facebook 左侧菜单非常相似的东西。

干净优雅
水平条状，选中时突出显示

【问题讨论】：

我认为这是一个基本列表，其中列表样式设置为无，并且对文本应用了额外的样式。在页面加载期间突出显示相应的项目。不过，我什至没有查看源代码 - 上次我这样做时，我完全陷入了迷茫（由于它被加密而感到困惑）。

标签： javascript jquery html css templates

【解决方案1】：

这是一个列表菜单，最多包含 3 层。在悬停样式中，只需将背景颜色和柚木更改为您的规格。这是我用来编程joomla 的下拉菜单的。当你把它放在一个div中。在这里测试http://jsfiddle.net/DnNye/3/ 它仍然需要一些调整才能完全工作，但这是一个开始。

HTML

<div id="navigation">
    <ul>
        <li>Home
            <ul>
                <li>Test1
                    <ul>
                        <li>Test1</li>
                        <li>Test2</li>
                        <li>Test3</li>
                    </ul>
                </li>
                <li>Test2</li>
                <li>Test3</li>
            </ul>
        </li>
        <li>About</li>
    </ul>
</div>

CSS

#navigation {width:150px; font-size:12px;}
#navigation ul {margin:0px; padding:0px; background-color:#666;}
#navigation ul li {
    height:25px;
    line-height:25px;
    list-style:none;
    padding-left:10px;
    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
}
#navigation ul li:hover {background-color:#F90; position:relative;}

#navigation ul ul {
    display:none;
    position:absolute;
    left:75px;
    top:5px;
    border:#fff solid;
    border-width:1px;
    background-color:#999;
}
#navigation ul li:hover ul {display:block;}
#navigation ul ul li {border:none; width:150px; float:left; display:inline;}
#navigation ul ul li:hover {text-decoration:underline; border:none;}
#navigation li:hover ul li ul {display:none;}
#navigation ul > ul > ul ul li ul {left:110px; background-color:#0099CC;}
#navigation ul > ul ul li:hover ul {display:block;}

适用于某些 Internet Explorer 的 JAVASCRIPT

// drop down list functionality for Internet Explore
// IE does not support the :hover in anything but links
// just need to duplacate the navigation in css and include .sfHover in place of :hover ex: #navigation ul ul li:hover becomes #navigation ul ul li:hover, navigation ul ul li.sfHover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i = 0; i < sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.className += " sfhover";
        };
        sfEls[i].onmouseout = function() {
            this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
        };
    }
};
if (window.attachEvent) { window.attachEvent("onload", sfHover); }

【讨论】：