クリックしたときにメニュードロップが欲しいですが、動作しません。（css）

クリックするとメニューが欲しくなりますが、非常に速く開いたり閉じたりします。私は自分のウェブサイトを作りたいと思っていますが、まだ学習中です... HTMLは動作しますが、CSSはありません。私は:hoverを使いたくありません。は、ここで最も簡単な方法は、いくつかのjQueryを採用することであるイワンクリックしたときにメニュードロップが欲しいですが、動作しません。（css）

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow'); 
 

 
* { 
 
    font-family : Tw Cen MT Condensed, PT Sans Narrow, sans-serif; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 

 
#site_name { 
 
    display: inline-block; 
 
    font-size: 30pt; 
 
    color: #f71f1f; 
 
    font-weight: 900; 
 
    margin-left: 30px; 
 
} 
 

 
/* Primary menu */ 
 

 
#primary-menu { 
 
    background: #b9b9b9; 
 
    height: 75px; 
 
    line-height: 75px; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#primary-menu > div.container { 
 
    float: right; 
 
} 
 

 
#primary-menu > div.container > ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#primary-menu > div.container > ul > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    width: 120px; 
 
    padding: 0 13px; 
 
    height: 100%; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
#drop { 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
    list-style: none; 
 
} 
 

 
#primary-menu > div.container > ul > li:active > #drop { 
 
    display: block; 
 
    border-top: 5px solid white; 
 
} 
 

 
#drop > li { 
 
    background-color: #e0e0e0; 
 
    width: 120px; 
 
    height: 45px; 
 
    line-height: 45px; 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
} 
 

 
#drop > li > a { 
 
    text-decoration: none; 
 
    color: #ed6161; 
 
    font-size: 15pt; 
 
    padding-left: 0; 
 
    margin-left: 0; 
 
} 
 

 
#primary-menu > div.container > ul > li > a { 
 
    text-decoration: none; 
 
    color: #ed6161; 
 
    height: 75px; 
 
    display: inline-block; 
 
} 
 

 
#primary-menu > div.container > ul > li > a:hover { 
 
    color: #eb3434; 
 
}

<!-- Tw Cen MT Condensed... !--> 
 
<html> 
 
    <head> 
 
     <title>IVANTEPLOV</title> 
 
     <link type="text/css" rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div id="page-wrapper"> 
 
    
 
    <!-- /header --> 
 
    <header id="header"> 
 
     <div id="primary-menu"> 
 
      <div id="site_name"> 
 
      <a class="icon">IVANTEPLOV</a> 
 
      </div> 
 
      <div class="container"> 
 
       <ul> 
 
        <li><a href="#">Программирование</a> 
 
         <ul id="drop"> 
 
         <li><a href="#">WEB</a></li> 
 
         <li><a href="#">Java</a></li> 
 
         <li><a href="#">Python</a></li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">Техновости</a> 
 
        <ul id="drop"> 
 
         <li><a href="#">Новейшее</a></li> 
 
         <li><a href="#">Гаджеты</a></li> 
 
         <li><a href="#">Защищенность</a></li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">О нас</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </header> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-03-10 Anonymous

Iは知っているが、これは言語交換ではなく、タイトルに関する： "それは*働かない" – domsson

、あなたが私におかげで大いに役立つことを願って：

$(document).ready(function() { 
$('li#drop').on('click', function() { 
    $('ul').toggleClass('showing') 
}); 
});

...正確なコードではありません私はあなたがそこからそれを理解することができると思いますか？

出典

2017-03-10 17:26:38 mayersdesign

：ホバーを使用して次のレベルのメニューを表示する必要があります。 CSSを使用するだけで効果を得るための唯一の方法です。あなたには、いくつかの効果をしたい場合のLi/ULに「遷移」パラメータを追加しよう：

ul li{ 
    transition: all 0.75s; 
} 
ul li ul{ 
    display: none; 
    opacity: 0; 
} 
ul li:hover ul{ 
    display: block; 
    opacity: 1; 
}

ホバーを使用する必要がない場合は、JSの解決のために検索する必要があり、あなたの質問に、これらのカテゴリを割り当てます。

出典

2017-03-10 17:29:12 felipekrust

しかし、OPは彼がonClickを望んでいることを明確に述べている – mayersdesign

@mayersdesign笑、ちょうど彼が割り当てたカテゴリを見て、 "onclick"ものを無視した。あなたが正しい。彼のフィードバックを待ってみましょう。 – felipekrust

問題ありません:) – mayersdesign

これは、あなたが探しているものを効果的に行うはずです。私は上記のようにいくつかのjQueryを通してより効率的な方法があると信じていますので、CSSに冗長性を持たせる必要はありません。

は、メニューを区別するHREFとIDタグを変更：使用

<div class="container"> 
     <ul> 
     <li><a href="#drop">Программирование</a> 
      <ul id="drop"> 
      <li><a href="#">WEB</a></li> 
      <li><a href="#">Java</a></li> 
      <li><a href="#">Python</a></li> 
      </ul> 
     </li> 
     <li><a href="#drop2">Техновости</a> 
      <ul id="drop2"> 
      <li><a href="#">Новейшее</a></li> 
      <li><a href="#">Гаджеты</a></li> 
      <li><a href="#">Защищенность</a></li> 
      </ul> 
     </li> 
     <li><a href="#">О нас</a></li> 
     </ul> 
    </div>

CSS：ターゲット擬似セレクタの代わりにアクティブ

#drop { 
    position: absolute; 
    display: none; 
    width: 100%; 
    padding-left: 0; 
    margin-left: 0; 
    list-style: none; 
    transition: all 1s ease; 
} 

#drop:target { 
    display: block; 
} 

#drop > li { 
    background-color: #e0e0e0; 
    width: 120px; 
    height: 45px; 
    line-height: 45px; 
    padding-left: 0; 
    margin-left: 0; 
} 

#drop > li > a { 
    text-decoration: none; 
    color: #ed6161; 
    font-size: 15pt; 
    padding-left: 0; 
    margin-left: 0; 
} 

#drop2 { 
    position: absolute; 
    display: none; 
    width: 100%; 
    padding-left: 0; 
    margin-left: 0; 
    list-style: none; 
    transition: all 1s ease; 
} 

#drop2:target { 
    display: block; 
} 

#drop2 > li { 
    background-color: #e0e0e0; 
    width: 120px; 
    height: 45px; 
    line-height: 45px; 
    padding-left: 0; 
    margin-left: 0; 
} 

#drop2 > li > a { 
    text-decoration: none; 
    color: #ed6161; 
    font-size: 15pt; 
    padding-left: 0; 
    margin-left: 0; 
}

jsFiddle： https://jsfiddle.net/9s070o3w/1/

出典

2017-03-10 17:58:54

クリックしたときにメニュードロップが欲しいですが、動作しません。（css）

答えて

関連する問題