Akkordeon-Menü: verschiedene Höhen erzeugen
Verfasst: So 28. Dez 2014, 18:59
Hallo mal wieder! 
Ich hab kürzlich ein Akkordeon-Menü auf einer Testseite eingebaut.
http://www.holidaypark-uptodate.de/akkordeon-test.html
Jetzt ist es aber durch die Zeilen 35 und 36 (siehe angehängter Quellcode) so, dass jedes der Elemente 150 Pixel hoch wird, wenn man mit der Maus darüberfährt. Da ich aber verschieden umfangreiche Inhalte einbauen möchte, würde ich es gerne so realisieren, dass ich bei jedem Menüpunkt dieses Akkordeon-Menüs eine individuelle Höhe bestimmen kann. Denn wie man auf meiner Testseite sieht, wird zum Beispiel der Inhalt unter "Services" nicht mehr vollständig angezeigt. Hab es schon mit "height: auto;" versucht, will aber leider nicht funktionieren.
Hier mal der Code (HTML und CSS), vielleicht weiß jemand eine Lösung für mein Problem??
Ich hab kürzlich ein Akkordeon-Menü auf einer Testseite eingebaut.
http://www.holidaypark-uptodate.de/akkordeon-test.html
Jetzt ist es aber durch die Zeilen 35 und 36 (siehe angehängter Quellcode) so, dass jedes der Elemente 150 Pixel hoch wird, wenn man mit der Maus darüberfährt. Da ich aber verschieden umfangreiche Inhalte einbauen möchte, würde ich es gerne so realisieren, dass ich bei jedem Menüpunkt dieses Akkordeon-Menüs eine individuelle Höhe bestimmen kann. Denn wie man auf meiner Testseite sieht, wird zum Beispiel der Inhalt unter "Services" nicht mehr vollständig angezeigt. Hab es schon mit "height: auto;" versucht, will aber leider nicht funktionieren.
Hier mal der Code (HTML und CSS), vielleicht weiß jemand eine Lösung für mein Problem??
Code: Alles auswählen
<style>
#accordion .item {
width: 698px;
height: 30px; /* This is the height of the gray portion of each section */
overflow: hidden;
transition: height ease-in-out 1000ms; /* This is the bit that makes the slider...slide */
-o-transition: height ease-in-out 1000ms;
-moz-transition: height ease-in-out 1000ms;
-webkit-transition: height ease-in-out 1000ms;
border: 1px solid #ccc; /* This sets the color and width of the border */
border-radius: 5px; /* This sets the roundness of the border corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 5px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #eeeeee; /* This is for all the old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* This gradient is for firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* This one is for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* and of course we musn't forget ie */
padding: 5px;
color: #333333; /* This and the next few lines sets the font up for the header on each box */
text-decoration: none;
font-family: Georgia, Arial, Tahoma, sans-serif;
}
#accordion p {
height: 150px; /* This and the next few lines sets the font up for the content of each box */
padding: 5px;
font-family: Georgia, Arial, Tahoma, sans-serif;
font-size: 13px;
}
#accordion div:hover {
height: 150px; /* This is the total height when the scroll unfolds see the 150px in the element above */
}
#accordion div:hover a {
border-bottom: 1px solid #cccccc;
}
</style>
<div id="accordion">
<div class="item">
<a href="#">Products</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Services</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="item">
<a href="#">Contact</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Support</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
</div>
