1

Googleホームページで、[その他]ボタンをクリックすると、そのボタンの下に次のようなメニューが開きます。

グーグルのスクリーンショット

css / javascript / jqueryを使用して、Webサイトのナビゲーションバーのタブの1つで同様のことを行うにはどうすればよいですか？

編集：より具体的には、これのCSS部分をどのように達成するのか疑問に思っています。

  • ドロップダウンが切り替えられたときにタブに上/下矢印のグラフィックを表示する方法。（つまり、切り替えた場合は下向き矢印を表示し、そうでない場合は上向き矢印を表示します）。（単に置くので<img>はなく、背景画像を使用して矢印を切り替えます）

  • 新しいリストをタブの下にポップアップして配置する方法。

4

3 に答える 3

3

これは、これを実行できる1つの方法の例です。もちろん、diffメソッドなどを試すこともできますが、これは基本的な実用的なソリューションです。

リンクをクリックして切り替えるドロップダウン要素はかなり良いです。

<div id="topBar">
    <a href="#" id="more">More
        <span id="arrow">
            <span id="arrdown">&#x25BC;</span>
            <span id="arrup">&#x25B2;</span>
        </span>
    </a>
    <div class="dropdown">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
    </div>
</div>​

次に、JSクリックで切り替えます。

$('#more').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown').toggle();
    return false;
});

$('.dropdown a').click(function() {
    return false;
});

css：

body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }

</ p>

これがCSSの実際の例です：http：//jsfiddle.net/ZUPBj/

于 2012-06-16T19:36:41.310 に答える
2

これには多くの異なるアプローチがあり、最も単純なものの1つです。

メニュー項目がクリックされたときに切り替えられる非表示のdivを作成します。

<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
    $(".menu").on("click",function(){
        $(".dropDown").toggle();
    });
</script>​​​​

JsFiddle

于 2012-06-16T19:20:41.060 に答える
1

いくつかのグーグルはあなたにたくさんのチュートリアルをオンラインで見つけるでしょう。「htmlでドロップダウンメニューを作成する」を検索しました。以下のこれらのリンクは、私が見つけたより良いチュートリアルの一部です。

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizo​​ntal-dropdown-menu-with-html-css-and-jquery/

http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/

基本的に、ユーザーがメニューの最初のレベルにカーソルを合わせると、非表示のdivが表示されます。

于 2012-06-16T19:20:57.227 に答える