2017-03-10 19 views
0

Ich möchte Menü sinkt, wenn ich darauf klicke, aber es öffnet und schließt sehr schnell. Ich möchte meine eigene Website erstellen, aber ich lerne immer noch ... Html funktioniert, aber CSS nicht. Ich möchte nicht :hover verwenden. Hoffe Ihr könnt mir Dank viel helfen kann, IvanIch möchte Menü fällt, wenn ich geklickt habe, aber es funktioniert nicht (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>

+1

Ich weiß, Dies ist kein Sprachaustausch, aber in Bezug auf den Titel: "Es * funktioniert * nicht" – domsson

Antwort

0

Die hier einfachste Ansatz ist einige jQuery zu verwenden:

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

... ist nicht richtig Code aber ich denke du kannst es von dort aus herausfinden?

0

Sie sollten verwenden: Hover, um die Menüs der nächsten Ebene anzuzeigen. Nur so können Sie den gewünschten Effekt nur mit CSS erzielen. Wenn Sie eine gewisse Wirkung wollen versuchen, „Übergang“ Parameter zum li/ul hinzuzufügen:

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

Wenn nicht Hover verwenden müssen, müssen Sie für JS Auflösung suchen, diese Kategorien in Frage zuweisen.

+0

Aber OP sagt klar, er will onClick – mayersdesign

+0

@mayersdesign lol, sah nur die Kategorien, die er zugewiesen hatte und ignorierte das "onclick" Zeug. Du hast recht. Warten wir auf sein Feedback. – felipekrust

+0

OK kein Problem :) – mayersdesign

0

Dies sollte effektiv tun, was Sie suchen. Ich glaube, es könnte einen effizienteren Weg durch einige jQuery wie oben vorgeschlagen geben, so dass Sie keine Redundanzen im CSS haben müssen.

die href und ID-Tags Changed die Menüs zu unterscheiden:

<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: Ziel pseudo-Selektor statt: aktiv

#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/

Verwandte Themen