0

display: inline-block;メニュー項目は、 &padding-right:10pxを使用してこれらを 1 行にまとめたような画像です。

メニュー項目 それらは、次のような「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 ミリ秒) を意味します。

Submenuitems のいくつかの CSS を使用すると、サイドは上のスクリーンショットとまったく同じように見えます。

ドミ

于 2013-11-06T22:18:13.820 に答える