CSS/JQuery水平菜单(两行) [英] CSS / JQuery Horizontal menu with 2 line

问题描述

我创建了一个带有jquery的菜单:div 1用于主菜单，div 2用于子菜单. 将鼠标悬停在项目上时，div 2出现在所选菜单下.

I created a menu with jquery: div 1 for a main menu and div 2 for the submenu. When you hover the mouse over the item, the div 2 appears under the selected menu.

我可以使菜单更优化吗?

Can I make a menu more optimized?

可以使用图像中描述的功能在两行上创建CSS菜单吗?

Can you make a CSS menu on 2 lines with the function described in the image?

<div id="main-menu">
    <ul>
        <li><a href="#" class="category" rel="">Home</a></li>
        <li><a href="#" class="category" rel="submenu1">test</a></li>
    </ul>
</div>

<div id="menu-wrap">
    <div id="menu">
        <div id="submenu1" class="submenu">
            <ul>
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
            </ul>
        </div>
    </div>
</div>

是否可以不使用jquery而是仅使用CSS来实现菜单?

is possible to realize the menu without the use of jquery but only CSS?

推荐答案

为使其正常运行，子菜单将需要嵌套(在DOM中)在其主菜单条目内.我们需要使用列表来修改HTML标记.

In order for this to work, the sub-menus will need to be nested (in the DOM) inside of their main-menu entries. We'll need to modify the HTML markup using lists.

代码说明:我们将为整个对象创建一个容器，然后将其浮动.在容器之后，我们将有一个div，它仅清除浮点数，因此页面的其余部分可以正确显示.在容器内部，我们将为主菜单提供一个无序列表-每个列表项将包含一个链接和一个子菜单的无序列表.这些子菜单列表最初将是display:none.我们必须绝对定位子菜单，以便它们显示在主菜单下方而不是中间.然后神奇的事情是使用:hover伪选择器和一个嵌套选择:悬停主菜单列表项时，其子级ul标记将设置为display:block.

A description of the code: we'll create a container for the whole thing, and float that right. After the container, we'll have a div that simply clears the float, so the rest of the page displays properly. Inside of the container, we'll have an unordered list for the main menu -- each list item will contain a link and an unordered list for the submenus. Those submenu lists will initially be display:none. We'll have to position the submenus absolutely, so that they appear below below the main menu instead of in the middle. Then the magic happens using the :hover pseudo selector, and a nested selection: when a main-menu list item is hovered, it's child ul tag will be set to display:block.

HTML更改:

<div id="menu-container">
    <ul id="main-menu">
        <li> <a href="#">Home</a> </li>
        <li> <a href="#">Menu Item 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1 Item 1</a></li>
                <li><a href="#">Submenu 1 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 2</a>
            <ul class="submenu">
                <li><a href="#">Submenu 2 Item 1</a></li>
                <li><a href="#">Submenu 2 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 3</a>
            <ul class="submenu">
                <li><a href="#">Submenu 3 Item 1</a></li>
                <li><a href="#">Submenu 3 Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="clear">&nbsp;</div>

以及随附的CSS:

#menu-container {
    float:right;
}
#main-menu {
    text-align:right;
    position:relative;
}
.submenu {
    position:absolute;
    left:0;
    top:1em;
    width:100%;
    text-align:center;
    display:none;
}
#main-menu, .submenu {
    list-style:none;
}
#main-menu li, .submenu li {
    display:inline;
}
#main-menu li:hover ul {
    display:block;
}
.clear {
    clear:both;
}

请在此处观看现场演示.

如果需要的话，可能需要进行一些调整以支持旧版浏览器.某些代码(用于悬停效果)来自 A List Apart Suckerfish CSS下拉菜单.

This may need some tweaking to support legacy browsers, if that is a requirement. Some code (for hover effect) was sourced from the A List Apart Suckerfish CSS Dropdown Menu.

这篇关于CSS/JQuery水平菜单(两行)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！