0

menuitems 是这样的图片，带有display: inline-block;&padding-right:10px将它们放在一行中

菜单项 它们位于“ul/li 架构”中，如下所示：

    <nav>
        <ul>
            <li><img src="./information.jpg" height="120" width="*"></img></li>
            <li><img src="./fotos.jpg" height="120" width="*"></img></li>
            <li><img src="./security.jpg" height="120" width="*"></img></li>
            <li><img src="./projekt.jpg" height="120" width="*"></img></li>
            <li><img src="./elearning.jpg" height="120" width="*"></img></li>
            <li><img src="./kontakt.jpg" height="120" width="*"></img></li>
        </ul>
    </nav>

现在我正在尝试制作一个看起来像这样的子菜单： 带有子菜单的菜单 如果您单击灯泡图片，就会发生这种情况。所以它应该把整个页面的内容往下推，把自己放在菜单项下。我怎样才能做到这一点？我尝试将其ul放入li灯泡中，并尝试通过 css 将其到达那里。是否可以将子菜单放在其他位置但也可以将其与主菜单链接？

4

2 回答 2

1

我不知道您是否绝对要使用ul li. 如果没有，这就是我在没有 javascript 的情况下会做的事情。我会使用带有隐藏复选框的标签并使用活动状态来显示/隐藏一个 div。因此，您可以使用 css 轻松设置它们的样式。这将下推内容并显示您想要的任何内容。在这种情况下，您的子菜单将通过向下推送内容出现在您的图像下方。

这是一个jsfiddle。

希望能帮助到你！

于 2013-11-06T21:34:37.700 回答
0

与上述问题相同：菜单项：

<div id="info">
    <a href="#"><img src="./information.jpg" height="120" width="*"></img></a>
</div>
<div id="foto">
    <a href="#"><img src="./fotos.jpg" height="120" width="*"></img></a>
</div>
<div id="security">
    <a href="#"><img src="./security.jpg" height="120" width="*"></img></a>
</div>
...

在这之后：

<div id="infosub">
    <div class="submenu">submenuitem1</div></br>
    <div class="submenu">submenuitem2</div></br>
    <div class="submenu">submenuitem3</div>
</div>
<div id="fotosub">
    <div class="submenu">submenuitem1</div></br>
    <div class="submenu">submenuitem2</div></br>
    <div class="submenu">submenuitem3</div>
</div>
    ...

并通过样式表：display:none在子菜单上。现在你可以用 jquery 切换整个事情：

$(document).ready(
function() {
    $("#info").click(function() {
        $("#infosub").toggle(1000);
    });
    $("#foto").click(function() {
        $("#fotosub").toggle(1000);
    });
    $("#security").click(function() {
        $("#securitysub").toggle(1000);
    });
});

toggle() 中的 1000 表示它将隐藏或出现的速度（1000 毫秒）。

使用一些用于子菜单的 CSS，侧面看起来与上面的屏幕截图完全相同 - 希望它对您有所帮助。

多米

于 2013-11-06T22:18:13.820 回答