Ask CSS accordion

saya mau menampilkan sub menu,ketika menu di klick sub menu tidak tampil seutuhnya dan efek transition nya tidak berfungsi, apakah script css yang saya tulis kurang tepat, mohon pencerahannya. trimakasih....

<style>
    .menu {
	background-color:#555;
	color:white;
	display:block;
	border:1px solid black;
	border-radius:7px;
	margin:1px;
	padding:6px 17px;
	text-decoration:none;
	font: 15px bolt;
        transition: max-height 0.5s ease-in-out;

}

#menu1{
		padding:0;
		height:0;
		overflow:hidden;
}

#menu1:target{
	background-color:#999;
	color:white;
	border:1px solid black;
	border-radius:7px;
	margin:1px;
	padding:6px 17px;
	text-decoration:none;
	font: 15px bolt;
	display:block;
}
</style>

<body>
                <div id="konten">
			<a href="#menu1" class="menu">Menu</a>
			<div id="menu1" class="sub-menu">Sub Menu1</div>
		</div>
</body>

css

@A_Fauzi

15 Kontribusi 2 Poin

Diperbarui 8 tahun yang lalu

3 Jawaban:

Jawaban Terpilih

css ma element yg mau di transisikan gk nyambung gan klo accordion pke css, agan bs akalin ky dibawah ini

struktur HTML

<section class="container">
  <div>
    <input id="ac-1" name="accordion" type="checkbox" />
    <label for="ac-1">ABOUT US</label>
    <article class="ac-menu1">
      <p>Some content... </p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion" type="checkbox" />
    <label for="ac-2">SERVICES</label>
    <article class="ac-menu2">
      <p>Some content... </p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion" type="checkbox" />
    <label for="ac-3">CONTACT US</label>
    <article class="ac-menu3">
      <p>Some content... </p>
    </article>
  </div>
</section>

kode CSS

body {
  background: #333;
}

.container {
  width: 400px;
  margin: 50px auto;
}

.container input {
  display: none;
}

.container label {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: FloralWhite;
  text-shadow: 1px 1px 1px rgba(65, 105, 225, 0.8);
  line-height: 33px;
  font-size: 19px;
  background: CornflowerBlue;
  box-shadow: 0px 0px 0px 1px rgba(135, 206, 250, .3), 1px 0px 0px 0px rgba(255, 255, 255, 0) inset, 0px 2px 2px rgba(0, 0, 0, .3);
}

.container label:hover {
  background: #fff;
  color: CornflowerBlue;
  border-left: 5px solid LightSalmon;
  text-shadow: 0 0 0 rgba(65, 105, 225, 0.8);
}

.container input:checked + label,
.container input:checked + label:hover {
  background: LightSeaGreen;
  color: FloralWhite;
  text-shadow: 0 0 0 rgba(65, 105, 225, 0.8);
  border-left: 5px solid LightSalmon;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.container article {
  background: rgba(255, 255, 255, 0.5);
  background: WhiteSmoke;
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.container input:checked ~ article {
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
}

.container article p {
  font-style: italic;
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.container input:checked ~ article.ac-menu1 {
  height: 140px;
}

.container input:checked ~ article.ac-menu2 {
  height: 180px;
}

.container input:checked ~ article.ac-menu3 {
  height: 230px;
}

preview: http://codepen.io/maddock/pen/YWqXzV

@maddock

119 Kontribusi 115 Poin

Dipost 8 tahun yang lalu

waduhh saya baru blajar css gan. maaf klo gak nyambung. trimakasih banyak gan solusinya...

@A_Fauzi

15 Kontribusi 2 Poin

Dipost 8 tahun yang lalu

@fauzi1994 sama2 gan, sy juga masih belajar. semoga bermanfaat

@maddock

119 Kontribusi 115 Poin

Dipost 8 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Ask CSS accordion

Kelas Premium!
Belajar bikin website dari nol sekarang