1

ハッピーサタデー コミュニティ、私は初めての Web サイトを構築しており、css、javascript、php、mvc フレームワークなどについて多くのことを学びました。ブートストラップの例のようなドロップダウンボックスを手伝ってくれる人はいますか....

 ---------------------------
 |      HEADER            +| 

 ---------------------------

 ---------------------------
 |      HEADER            -|
 ---------------------------
 ---------------------------
 ---------------------------
----------------------------

編集：

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
    <li><a tabindex="-1" href="#">Action</a></li> 
    <li><a tabindex="-1" href="#">Another action</a></li> 
    <li><a tabindex="-1" href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a tabindex="-1" href="#">Separated link</a></li> 
</ul>

拡大すると???

4

1 に答える 1

0

これは、jQueryを使用して簡単に行うことができます。ただし、主なアイデアは、ナビゲーションバーの作成に使用する可能性のあるもの<div>など、ヘッダー内の要素の表示プロパティを切り替えることです。<ul>

実例： http： //jsfiddle.net/Kk78h/（必ず「+」記号をクリックしてください。）

<div id="header">
    <h1>Header <span id="adjust">+</span></h1>
    <ul>
        <li>Nav1</li><li>Nav2</li><li>Nav3</li><li>Nav4</li>
    </ul>
</div>

#header { width: 500px;}
h1 { text-align: center; }
h1 #adjust {vertical-align: super; font-size: 20px; color: red; cursor: pointer;}
ul { height: 100px; list-style: none; display: none;}
li { float: left; width: 25%;}

$('#adjust').click(function() {
    $('ul').toggle();
    var cval = $('#adjust').html();
    $('#adjust').html(cval == '+' ? '-' : '+');                                 
});
于 2013-03-09T19:45:44.287 に答える