Membuat list dropdown diblog - Ternyata list dropdown tidak hanya bisa dibuat dengan combobox, akan tetapi bisa juga dibuat dalam blog dengan tampilan yang lebih bagus nan keren, fungsi list dropdown yaitu menampilkan tulisan dengan model dropdown. Sebelumnya saya telah membuat list dropdown pada combobox excel, lihat disini menggunakan combobox.


Membuat list dropdown diblog

Masuk keblog kamu

Lalu pilih Thema, Edit HTML masukan kode CSS dibawah ini sebelum kode ]]></b:skin>  atau sebelum kode </style>

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

// colors
$shadow: hsla(0, 0%, 0%, .2);
$item-background: white;
$bgcolor: hsl(0, 79%, 60%);

// settings
$width: 300px;
$height: 50px;

body {
background-color: $bgcolor;
font-family: 'Source Sans Pro', Arial, sans-serif;
}

.dropdown {
width: $width+30px;
height: $height;
margin: 40px auto;
perspective: 1000px;
box-shadow: 0 5px 10px $shadow;
}

.dropped {
height: $height * 4;
}

.item {
width: $width;
height: $height;
line-height: $height;
box-shadow: 0 2px 5px $shadow;
margin: 0 0;
padding: 0 20px;
background-color: $item-background;
transition: transform .15s linear;
cursor: pointer;
user-select: none;

&:last-child {
transform: translate3d(0, -($height * 3), 0)
}
&:not(:last-child) {
transform: translate3d(0, $height, 0);
}
&:hover {
&:not(:last-child) {
background-color: darken(white, 2%);
}
}
}

.collapse {
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
transform: translate3d(0, -(($height+6px) * ($i - 1)), 0)
scale(1 + ($i/40))
}
&:nth-of-type(1) {
transform: translate3d(0, 0, 0);
}
}

&:hover {
&:last-child {
transform-origin: 50% 100%;
transform: translate3d(0, -(($height+8px) * 3), 0)
rotateX(30deg)
scale(1.10);
}
}
}


Langkah selanjutnya letakan kode dibawah ini sebelum kode </body>

var dropdown = $('.dropdown');
var item = $('.item');

item.on('click', function() {
  item.toggleClass('collapse');

  if (dropdown.hasClass('dropped')) {
    dropdown.toggleClass('dropped');
  } else {
    setTimeout(function() {
      dropdown.toggleClass('dropped');
    }, 150);
  }
})


Simpan thema, untuk membuat list dropdown pada postingan, silahkan buat artikel atau postingan baru dalam mode HTML, lalu masukan kode dibawah ini kemudian publish
.dropdown
  .item.collapse Item 1
  .item.collapse Item 2
  .item.collapse Item 3
  .item.collapse.selected Select Item

Demikianlah cara Membuat list dropdown diblog, semoga bermanfaat
No comments