2016-07-21 14 views
0

Ich bin wirklich auf diesem fest und könnte wirklich Hilfe verwenden. Also ich habe diesen Code:Navigationen mit Dropdowns

<nav> 
     <a class="opcion-1" title="Opcion 1" href="#">Quiénes somos</a> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     <a class="opcion-2" title="Opcion 2" href="#">Nuestro trabajo</a> 
     <a class="opcion-3" title="Opcion 3" href="#">UNAC news</a> 
     <a class="opcion-4" title="Opcion 4" href="#">Cómo donar</a> 
     <a class="lupa" title="Opcion 5" href="#"></a> 
</nav> 

CSS

nav { 
    display: flex; 
    justify-content: space-between; 
    background-color: #ccc; 
    margin-top: 10px; 
} 

nav > a { 
    text-decoration: none; 
    color: black; 
    font-family: Gotham book; 
    text-align: center; 
    width: 20%; 
    border-right: 1px solid #b3b3b3; 
    padding-top: 15px; 
    padding-bottom: 15px; 
} 

nav > .lupa { 
    background-image: url("http://i.imgur.com/kXm05cw.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
nav a.opcion-1:hover { 
    background-image: url(http://i.imgur.com/JnbTq5a.png); 
} 

nav > a:hover { 
    background-color: #FFB53A; 
    color: transparent; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

Was ich brauche, ist für Link1 und die anderen fallen nach unten, wenn die Eltern a ausgewählt ist. Diese werden dann herunterfallen und Text darin aufdecken. Ich muss in der Lage sein, sie auch anzupassen. Sie können sehen, was ich unten brauche.

image

image2

Antwort

0

Ich denke, was Sie suchen, bereits in die JQuery-Bibliothek gebaut wird. Es heißt Akkordeon. Hier

https://jqueryui.com/accordion/

ist ein Beispiel für das Akkordeon.

<div id="accordion"> 
<a href="#one" class="first">Recent Posts</a> 
<div id="one"> 
    this is some info. 
</div> 

<a href="#two">Popular Posts</a> 
<div id="two"> 
    this is some more info. 
</div> 

<a href="#three">Archived Posts</a> 
<div id="three"> 
    this is even more info. 
</div> 

http://jsfiddle.net/edsilv/cgn4s8y7/

+0

Sie würden dann in einem jQuery Registerkarte Plugin oder einem anderen Tab Plugin vielleicht Bootstrap, dass Akkordeon setzen. http://jsfiddle.net/syahrasi/us8uc/ – JQluv

+0

Ich kann nicht scheinen, den Code zu importieren. Das CSS und der Text sind in Ordnung, aber die Tabs ändern sich nicht. –

+0

Können Sie einen Link – JQluv

Verwandte Themen