1

マッシャブル サイト http://mashable.com/のような検索パネルを構築しようとして いるので、ユーザーが検索アイコンにカーソルを合わせると、検索パネルが開きます。最初は、そのようなものを使用したCSSの純粋なアプローチでこれを構築することを考えました

<ul>
    <li> menu item 1</li>
    <li> menu item 2</li>
    <li> menu item 3</li>
    <li id="serach">
        search
      <ul>
        <li>
           <input type="text placeholder="search">
           <input type="submit" value="search">
        </li>
     </ul>

    </li>
</ul>

CSS セクション

<style>
    li#serach ul{
     display:none;
   }
   li#serach:hover >ul{
   display:block;

  }
</style>

実際の例はここで見ることができますhttp://jsfiddle.net/mBTQX/ 問題は、ユーザーがメニュー内で左にホバーしているときに検索バーが消えることです (ホバー効果は検索でのみ行われるため) . http://mashable.com/で実装されているのとまったく同じように、ユーザーがメニュー ナビゲーション自体にカーソルを合わせていても検索パネルが残るようにしたい

純粋なcssでそれを行うことが可能か、追加のjsコードが必要かどうか、誰でも私にアドバイスできますか

4

2 に答える 2

1

Javascriptでこれを行う方がおそらく良いでしょう。とはいえ、CSS で求めている効果を実現することは不可能ではありません。

問題が、li#search別のメニュー項目ではなく、別のメニュー項目でもないメニューの部分にカーソルを合わせると、ドロップダウン検索ボックスが消えるということである場合は、幅をli#search広げることで修正できます。もちろん、liより広い領域をカバーしたくないものすべてにホバー効果がある場合、これは問題を引き起こす可能性があります. li:hover彼の新しい問題の解決策は、 のスタイリングをオーバーライドし、li#search代わりにdivwithinに適用することli#searchです。

したがって、HTMLは次のようになります。

<li id="search">
    <div>Search</div>
    <ul>
        <li>
            <input type="text placeholder="search">
            <input type="submit" value="search">
        </li>
    </ul>
</li>

CSSは次のようになります。

li:hover, li#search:hover div {background-color:blue;}
li#search {width:50px;padding-left:50px;}
li#search:hover {background-color:none;}
li#search div {width:50px;}
li#search > ul {width:100px;}

これらのスタイルを自分のサイトに合わせて調整することができます (私はそうしたいと思いますが、投稿した jsFiddle には取り除かなければならない CSS が多すぎます)。重要なことは、 の有効幅 (幅 + パディング) がli#searchの幅と一致することですli#search > ul。

于 2013-06-08T17:50:06.213 に答える
1

更新しました

jQuery の使用:

http://jsfiddle.net/fZgS9/3/

JS

$(function() {

    var nav = $('#nav');
    var search = nav.find('li.search');

    search.on('mouseover', function(event) {

        search.children().addClass('show');

    });

    nav.on('mouseleave', function(event) {

        search.children().removeClass('show');

    });

});

これは基本的な考え方です（jsなし）：

http://jsfiddle.net/fZgS9/1/

HTML

<ul id="nav">
    <li class="search">
        <div>
            <input type="text"/>
        </div>
    </li>
</ul>

CSS

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 50px;
    height: 1em;
    background-color: #09A065;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

#nav > li.search {
    margin: 0;
    padding: 0;
    float: right;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    position: relative;
}

#nav > li.search > div {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ccc;
    display: none;
}

#nav > li.search:hover > div {
    display: block;
}

#nav > li.search:hover:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 2000em;
    height: 1em;
    background: red;
    content: "";
}

重要なのは、相対/絶対位置で遊んで、なし/ブロックを表示することです。li:hover は、子セレクターを使用して内側の div に影響を与えます。

ユーザーがメニュー ナビゲーション自体にカーソルを合わせていても、検索パネルが残るようにしたい...

トリッキーですが、疑似要素を使用して行うと、不透明度で非表示にすることができますが、メニューの残りの部分が覆われます... うーん... JS を使用します...

于 2013-06-08T17:47:09.833 に答える