菜单 - 显示在整个Menuitems - HTML / CSS下的子菜单 [英] Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

问题描述

这些图片是这样的，用 display：inline-block; & padding-right：10px 将它们排成一行

The menuitems are picture like this with display: inline-block; & padding-right:10px to get them in one line

他们是在ul / li架构，看起来像这样：

They are in a "ul/li architecture" which looks like this:

    <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>

现在我想做一个子菜单，应该是这样：

这是如果你点击灯泡图片应该发生什么。因此，它应该推动整个页面的内容，并设置自己在menuitems。我如何做到这一点？我尝试把 ul 插入到灯泡的 li ，并尝试通过css获取它。

Now i'm trying to make a submenu that should look like this: That's what should happen if you click on the lightbulb-picture. So it should push the content of the whole page down and set himself under the menuitems. How can I do this? I tried it with putting an ul into the li with the lightbulb and tried it to get it there via css. Is it posible to but the Submenu on other position but also link it with the mainmenu?

推荐答案

与上面的问题相同：
Menuitems：

Same as above in the questions: Menuitems:

<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切换整个事情：

And via stylesheet: display:none on the submenuitems. now you can toggle the whole thing with 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 ms）。

The 1000 in toggle() means the speed with it's going to hide or appear (1000 ms).

对于子项目的一些CSS，边看起来就像上面的截图，希望它会帮助你。

With some CSS for the Submenuitems the side looks exactly like the screenshot above - hope it will help you.

Domi

这篇关于菜单 - 显示在整个Menuitems - HTML / CSS下的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！