Membuat Accordion dengan CSS + HTML - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Accordion dengan CSS + HTML, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Accordion dengan CSS + HTML
link : Membuat Accordion dengan CSS + HTML

Membuat Accordion dengan CSS + HTML

Membuat Accordion dengan CSS + HTML - Masih berkaitan dengan merapihkan konten, dipost sebelumnya tentang tab, namun accordion bisa digunakan sebagai menu vertikal, kece kan?? buat menu kategori memang cocok banget tuh gengs.

oke deh ga perlu banyak bicara, mending langsung ke kode CSS dan HTML nya, tapi sebelumnya Juragan mau ngasih liat demonya nih, disini :

dan  kode HTML adalah ...

<h1>Accordion with CSS + HTML only </h1>
<ul>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>Belajar HTML</h2>
    <p>Konten HTML Accordion</p>
  </li>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>Belajar CSS</h2>
    <p>Konten CSS Accordion</p>
  </li>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>Membuat Accordion</h2>
    <p>Konten Membuat Accordion</p>
  </li>
</ul>

cek CSS nya

.transition, p, ul li i:before, ul li i:after {
  transition: all 0.25s ease-in-out;
}

.flipIn, h1, ul li {
  animation: flipdown 0.5s ease both;
}

.no-select, h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  perspective: 900;
  overflow-y: scroll;
  background-color: #f04a2f;
  font-family: "Titillium Web", sans-serif;
  color: rgba(48, 69, 92, 0.8);
}

body {
  min-height: 0;
  display: inline-block;
  position: relative;
  left: 50%;
  margin: 90px 0;
  transform: translate(-50%, 0);
  box-shadow: 0 10px 0 0 #41e520 inset;
  background-color: #fefffa;
  max-width: 450px;
  padding: 30px;
}
@media (max-width: 550px) {
  body {
    box-sizing: border-box;
    transform: translate(0, 0);
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    left: 0;
  }
}

h1, h2 {
  color: #41e520;
}

h1 {
  text-transform: uppercase;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 3px;
  font-weight: 100;
}

h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  background-color: #fefffa;
  margin: 0;
  cursor: pointer;
}

p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
}

ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
  animation-delay: 1s;
}
ul li:last-of-type {
  padding-bottom: 0;
}
ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #41e520;
  width: 3px;
  height: 9px;
}
ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

Semoga membantu kamu yang lagi belajar bikin website kece ya gengs.. see you

Demikianlah Artikel Membuat Accordion dengan CSS + HTML

Sekianlah artikel Membuat Accordion dengan CSS + HTML kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Accordion dengan CSS + HTML dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-accordion-dengan-css-html.html

Tweet