2

例

私の質問は、css だけを使用してこの例を実現することは可能ですか? そうでなければ、あなたはどうしますか？Jsfiddle の例は非常に高く評価されています ;) スラッシュも取得するにはどうすればよいですか? 画像を使用する必要がありますか、それとも css で使用できますか? そして、クリックすると変化する三角形？おそらくcssでJsを使用してそれを行うことが可能であることを知っています:afterおよび:beforeが私を助けてくれますか? PS: メニューを非表示にする Javascript:

<script language="javascript"> 
    function toggle() {
    var ele = document.getElementById("toggleMenu");
    var text = document.getElementById("displayMenu");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Menu";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>
<div class="menu-toggle"><div id="wrap"><a id="displayMenu" href="javascript:toggle();">Menu</a></div></div>
<div id="toggleMenu" style="display: none">
            <div class="menu">  
                <ul><li> Home </li>
                    <li> Item </li>
                </ul>
            </div>
</div>
4

3 に答える 3

4

通常、CSSだけでクリックイベントを達成するために、画像でこのようなことをします

<figure>
<img id="zoom" src="http://cargowire.net/Content/images/events/stackoverflow.jpg" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>

およびCSS:

   figure { background: #e3e3e3; display: block; float: left;}
       #zoom {
          width: 0px; 
          -webkit-transition: width 1s;
      }

      #zoom:target {
         width: 400px;

      }

ここをチェックしてください: http://jsfiddle.net/dCTeW/おそらく、メニューにも同様のことができます

于 2013-01-17T20:09:40.690 に答える
0

それは完全に可能ですが、私が知る限り、クリックではなく、マウスがホバリングしたときだけです。CSS：hoverstatesを使用することをお勧めします。

ここに詳細な記事があります：http：//csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

そしてその記事のデモはここにあります：http：//csswizardry.com/demos/css-dropdown/

クリックを使用したい場合は、jqueryを少し使用すると次のようになります。

$('.menu-item').click(function(){
    $(this).find('hover-div').toggle()
})

http://api.jquery.com/toggle/
これは、達成する必要のあるトグルのドキュメントです。

于 2013-01-17T20:03:35.033 に答える
0

ホバーの代わりにクリックを使用することを主張する場合は、提案されているように :focus を使用することもできますが、実際にはハックであり、HTML と css の正しい使用法とは見なされません。ただし、デモンストレーションのために、これを見てください：http://jsfiddle.net/9efMt/1/

ご覧のとおり、:focus疑似クラスと+兄弟セレクターを使用して入力を使用します。その CSS には特に問題はありませんが、入力にメニューを配置することはできません!

同じフィドルにあるimoの正しい例で、jsにjqueryを使用しました。メニューリンクがクリックされたときにクラスを切り替えるだけです。次のようになります。

$('#menu2').click(function() {
  $('#menu2-sub').toggleClass('active');
});

CSS はかなり単純明快なものでなければなりません。

于 2013-01-17T20:35:44.560 に答える