Kursus Web Design Jakarta | cara membuat menu dropdown

Menu dropdown pasti kawan kawan kursus web design jakarta sering mendengarnya dan ini sudah tidak asing ya, apalagi di setiap website biasanya menu dropdown pasti ada. Menu dropdwon ini di gunakan untuk sebuah sub menu, jadi cocok sekali digunakan untuk menu yang mempunyai anak menu yang banyak seperti products misalnya, kenapa saya mengakat artike cara berbeda membuat menu dropdown ini, karena ada suatu menarik jadi tidak hanya untuk menu saja tapi bisa kita gunakan untuk menampilkan yang lain.

cara berbeda membuat menu dropdown yang membuat berbeda adalah bisanya ketika kita menggunkan menu dropdown, kita gunakan sebuah ul li, tapi disini kita tidak akan menggunakan itu, dan cara ini saya temukan di sebuah bootstrap vue, oke untuk membuat menu ini saya teman-teman bisa gunakan.

<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
      <b-dropdown-item>Anak dropdown 1</b-dropdown-item>
      <b-dropdown-item>Anak dropdown 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item active>Anak dropdown di berikan batas</b-dropdown-item>
    </b-dropdown>

jadi pertama kita buat parentya yaitu dropdown dan untuk anak dropdownya teman-teman kursus web design juga bisa gunakan dropdown-item kita juga bisa gunakan <b-dropdown-divider> untuk membuat sebuah garis.

<b-dropdown>
      <template v-slot:button-content>
        Custom <strong>Strong</strong> with <em>em</em> via Slot
      </template>
      <b-dropdown-item>Anak dropdown 1</b-dropdown-item>
      <b-dropdown-item>Anak dropdown 2</b-dropdown-item>
    </b-dropdown>

kita juga bisa membuat template di dalam sebuah dropdown ini, disini juga saya akan membahas

menampilkan tampilan dropdwon di sebelah kanan dari garis kanan

<b-dropdown right>

menampiklan munculnya dropdown ke atas, kanan, kiri

<b-dropdown dropup dropright dropleft >

dengan offset kita bisa menampilkan keluarnya dropdwon sesuka kita defaul 0 / kiri

<b-dropdown offset="125">

menampilkan garis untuk pemisah antara teks dan icon button dropdown

<b-dropdown split>

kita juga bisa membuat sebuah router link dengan fungsinya jika parent buttonya di klik maka akan ke routernya jika split maka akan muncul menu dropdownnya

<b-dropdown split split-href="home.html">

membuat size , membuat warna

<b-dropdown size="lg" variant="primary">

<b-dropdown>
      <b-dropdown-text style="width: 240px;">
      Bisa menampilkan teks layaknya paragraf yang panjang
      </b-dropdown-text>
    </b-dropdown>

Disini kita juga bisa membuat sebuah form

<b-dropdown id="dropdown-form" text="Dropdown with form" ref="dropdown" class="m-2">
  <b-dropdown-form>
    <b-form-group label="Email" label-for="dropdown-form-email" @submit.stop.prevent>
      <b-form-input
        id="dropdown-form-email"
        size="sm"
        placeholder="email@example.com"
      ></b-form-input>
    </b-form-group>

    <b-form-group label="Password" label-for="dropdown-form-password">
      <b-form-input
        id="dropdown-form-password"
        type="password"
        size="sm"
        placeholder="Password"
      ></b-form-input>
    </b-form-group>

    <b-form-checkbox class="mb-3">Remember me</b-form-checkbox>
    <b-button variant="primary" size="sm" @click="onClick">Sign In</b-button>
  </b-dropdown-form>
  <b-dropdown-divider></b-dropdown-divider>
  <b-dropdown-item-button>New around here? Sign up</b-dropdown-item-button>
  <b-dropdown-item-button>Forgot Password?</b-dropdown-item-button>
</b-dropdown>

keren bukan kita bisa menyisipkan sebuah form di dalam dropdown, hasilnya akan seperti ini

jadi dropdown tidak lagi digunakan untuk membuat menampilkan menu dropdown saja, kita bisa sisipkan yang lain, saya rasa cukup sampai disini saja belajar kita tentang cara berbeda membuat menu dropdown semoga bermanfaat dan sampai jumpa pada artikel dari kami kursus web design jakarta berikutnya terimakasih.

Cara Berbeda Membuat Menu dropdown

Kategori