Membuat Dropdown List Di Blog

Cara Membuat Dropdown List Di Blog - Tutorial kali ini membahas tentang pemasangan dropdown yang lumayan keren dengan sebuah tambahan sedikit bumbu akan menjadi bagus. Dropdown ini berbentuk 3D seperti sebuah lempitan kertas.

Bagi sobat yang ingin memasangnya didalam blog silahkan ikuti langkah dibawah ini.

Langkah Membuat Dropdown List Di Blog

1. Masuk ke Blogger > Klik Template > Klik Edit HTML

2. Masukkan kode dibawah ini tepat diatas kode  ]]></b:skin> atau </style>

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

.dropped {
  height: $height * ($items+1);
}

.item {
  width: $width;
  height: $height;
  line-height: $height;
  box-shadow: 0 2px 5px $shadow;
  border-bottom: 1px solid rgba(black,.2);
  margin: 0 0;
  padding: 0 20px;
  background-color: $item-background;
  transition: transform .15s linear, color 1s;
  cursor: pointer;
  user-select: none;

  &:last-child {
    color: gray;
    transform: translate3d(0, -($height * $items), 0) ;
    &.active{
      color: black;
      font-weight: bold;
    }
  }
  &:nth-child(1){
    transform: translate3d(0, $height, 0) skewX($skew);
  }
  &:nth-child(2){
    transform: translate3d(0, $height, 0) skewX(-$skew);
  }
  &:nth-child(3){
    transform: translate3d(0, $height, 0) skewX($skew);
  }
  &:hover {
    &:not(:last-child) {
      background-color: darken(white, 5%);
    }
  }
}

.collapse {
  @for $i from 1 through 10 {
    &: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) * $items), 0) 
        rotateX(30deg)
        scale(1.10);
    }
  }
}

3. Masukkan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Dropdown List
var dropdown = $('.dropdown'),
  item = $('.item'),
  selectedItem = item.filter(".selected");

$(window).on('click', function(event) {
  if (!item.hasClass('collapse')) {
    toggleList();
  }
});

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

item.on('click', function(event) {
  event.stopPropagation();

  selectedItem.text($(this).text());
  if (selectedItem.text() !== 'Select Item')
    selectedItem.addClass('active');

  toggleList();
});
//]]>
</script>

4. Jika ingin menampilkan Dropdown List ini di tempat dropdown sobat dengan id dibawah

// Index is messed up so put your top selection last
// then use normal order

.dropdown
  .item.collapse Item 1
  .item.collapse Item 2
  .item.collapse Item 3
  .item.collapse.selected Select Item
  

5. SAVE dan lihat hasilnya.

RESULT

Silahkan sobat kreasikan kembali diblog sobat masing-masing. Sekian Tutorial Membuat Dropdown List Di Blog. Terimakasih