Tanya cara buat navbar responsive tanpa framework

Jujur membuat navbar itu banyak tekniknya, yang saya tau bisa pake tag ul li, table, atau flexbox...

Yang mau saya tanyain, gimana cara membuat navbar yang mobile friendly (responsive) tanpa menggunakan framework, saya masih belum mahir membuat navbar responsive ini, apa ada yang bisa bantuin?

berikut adalah markup html yang saya buat:


      <nav id="navbar">
        <div class="navbar-container">
          <div class="logo"><a class="brand-logo" href="">Zudith</a></div>
          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown"><a href="#">Events</a>
              <ul class="menu-dropdown">
                <li><a href="#">Reception</a></li>
                <li><a href="#">Ceremony</a></li>
                <li><a href="#">Party</a></li>
              </ul>
            </li>
            <li><a href="#">BLog</a></li>
            <li><a href="#">RSPV</a></li>
            <li><a href="#">Pages</a></li>
          </ul>
        </div>
      </nav>

avatar andriyfm
@andriyfm

23 Kontribusi 8 Poin

Diperbarui 6 tahun yang lalu

9 Jawaban:

Jawaban Terpilih

kalo saya saya sih biasanya untuk parentnya


div#navbar
widthnya 100%
display block


div.logo dan ul.menu
dikasih property float ,yg logo left, yg ul right (left juga gpp sih)

terus lebarnya pake persen dan kira2 aja logo butuhnya paling 30%, nah baru navbarnya 70%.

kira2 itu uda responsive dia ngikutin lebar viewportnya nah abis itu tinggal dirapiin aja pake media screen query, pas mobile bisa dihide terus kasih burger menu kali.

itu sih trik biasanya yang saya pake kalo bikin navbar, semoga membantu:)

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

makasih om.. mau sy praktekin

avatar andriyfm
@andriyfm

23 Kontribusi 8 Poin

Dipost 6 tahun yang lalu

sip semoga sukses dan bisa ngembangin yang lebih dari penjelasan saya :D, nanti kalo uda berhasil bisa kasih liat hasilnya ya :D

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

seharian nih pelajarin navbar responsive. alhamdulillah udah ngerti hampir 80% an.. berikut saya lampirin code2nya sama previewnya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="andriyfm">
    <meta name="description" content="mempelajari cara membuat navbar responsive tanpa framework">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.min.css">
  </head>
  <body>

    <nav id="navbar">
      <div class="navbar-container">
        <input class="nav-check" type="checkbox" id="nav-check">

        <!-- Logo dan Toggle Button -->
        <header class="logo">
          <a class="brand-logo" href="#">Zudith</a>
          <label class="toggle-button" for="nav-check">
            <div class="hamburger"></div>
          </label>
        </header>

        <!-- Main Menu -->
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li class="dropdown"><a href="#">Events</a>
            <!-- Submenu -->
            <ul class="menu-dropdown">
              <li><a href="#">Reception</a></li>
              <li><a href="#">Ceremony</a></li>
              <li><a href="#">Party</a></li>
            </ul>
          </li>
          <li><a href="#">BLog</a></li>
          <li><a href="#">RSPV</a></li>
          <li><a href="#">Pages</a></li>
        </ul>
      </div>
    </nav>

  </body>
</html>

code css nya saya pake sass, soalnya buat saya lebh mudah dalm penulisan saja

#navbar
  background: $primary-color
  min-width: 100%

  // DESKTOP
  // ================
  padding: 10px 15px

  // MOBILE
  // ================
  // padding: 0

  // input[type="checkbox"]
    display: none

  .navbar-container
    background: transparent
    position: relative

    // DESKTOP
    // ================
    display: flex

    // MOBILE
    // ================
    // display: block

  .nav-check
    display: none

  .logo
    padding: 0 15px
    display: flex
    flex-direction: row
    align-items: center

    // MOBILE
    // ================
    position: relative

    .brand-logo
      display: inline-block
      font-family: $dawning
      font-size: px($h4-font-size)
      line-height: 1.00
      color: white
      text-decoration: none
      transition: $transition-default
      &:hover
        color: shade($primary-color, 10%)

    .toggle-button
      cursor: pointer
      text-align: center
      position: absolute
      right: 0
      background: transparent
      width: auto
      height: auto
      padding: 20px 10px

      // DESKTOP
      // ================
      visibility: hidden

      // MOBILE
      // ================
      // visibility: visible

      .hamburger
        $hamburger-width: 35px
        $hamburger-height: 5px
        $hamburger-color: white
        $hamburger-color-hover: shade($primary-color, 10%)

        width: $hamburger-width
        height: $hamburger-height
        background: $hamburger-color
        position: relative
        &:before
          content: ""
          background: $hamburger-color
          width: $hamburger-width
          height: $hamburger-height
          position: absolute
          top: $hamburger-height + 4px
          left: 0
        &:after
          content: ""
          background: #eee
          width: $hamburger-width
          height: $hamburger-height
          position: absolute
          bottom: $hamburger-height + 4px
          left: 0

  .menu
    list-style-type: none
    padding: 0
    margin: 0
    width: 100%
    display: flex
    transition: $transition-default

    // DESKTOP
    // ================
    flex-direction: row
    justify-content: flex-end
    position: static
    top: 100%
    background: transparent

    // MOBILE
    // ================
    // display: none
    // flex-direction: column
    // position: absolute
    // background: shade($primary-color, 90%)

    li
      display: block

      // DESKTOP
      // ================
      text-align: center

      // MOBILE
      // ================
      // text-align: left
      // &:last-child a
        border-bottom: 0
      a
        display: block
        text-decoration: none
        padding: 12px 20px
        font-weight: 700
        text-transform: uppercase
        transition: $transition-default

        // DESKTOP
        // ================
        color: white
        border-radius: $border-radius-md
        &:hover
          background: shade($primary-color, 20%)
        &:focus
          background: shade($primary-color, 40%)

        // MOBILE
        // ================
        // color: $primary-color
        // border-radius: 0
        // border-bottom: 1px solid transparentize($primary-color, 0.8)
        // &:hover, &:focus
          background: $primary-color
          color: white
        // &:focus
          color: shade($primary-color, 30%)

  .dropdown
    position: relative
    &:hover > .menu-dropdown
      visibility: visible
      display: block
    &:hover > a
      background: shade($primary-color, 30%)
    li a
      border-radius: 0

  .menu-dropdown
    // DESKTOP
    // ================
    background: shade($primary-color, 90%)
    visibility: hidden
    display: block
    position: absolute
    left: -10px
    top: calc(100% + 9px)
    border-bottom-left-radius: $border-radius-sm
    border-bottom-right-radius: $border-radius-sm
    li
      border-bottom: 1px solid transparentize($primary-color, 0.8)
      &:last-child a
        border-bottom-left-radius: $border-radius-sm
        border-bottom-right-radius: $border-radius-sm

    // MOBILE
    // ================
    // background: shade($primary-color, 50%)
    // visibility: visible
    // display: none
    // position: static
    // margin-left: 30px
    // border-radius: 0
    // li
    //   border-bottom: 0
    //   &:last-child a
    //     border-radius: 0

@media (max-width: 1000px)
  #navbar
    padding: 0
    .navbar-container
      display: block

    .nav-check
      &:checked ~ ul.menu
        display: block

    .logo
      background: $primary-color
      padding: 10px 15px

      .toggle-button
        visibility: visible
        right: 15px

    .menu
      display: none
      flex-direction: column
      position: absolute
      background: shade($primary-color, 90%)
      li
        text-align: left
        &:last-child a
          border-bottom: 0
        a
          color: $primary-color
          border-radius: 0
          border-bottom: 1px solid transparentize($primary-color, 0.8)
          &:hover, &:focus
            background: $primary-color
            color: white
          &:focus
            color: shade($primary-color, 30%)

    .menu-dropdown
      background: shade($primary-color,80%)
      visibility: hidden
      display: none
      position: static
      margin-left: 30px
      border-radius: 0
      transition: $transition-default
      li
        border: 0
        &:last-child a
          border-radius: 0

previewnya bisa cek di link berikut https://andriyfm.github.io/responsive-navbar/

--- buat mas naufal, makasih sudah ngasih pencerahan buat saya...

avatar andriyfm
@andriyfm

23 Kontribusi 8 Poin

Dipost 6 tahun yang lalu

naah iya pake flexbox juga efektif tuh,

keren bang tinggal nambahin effect2 lain

wiih pake sass, saya belum belajar tuh :D btw itu lagi ada project buat orang ya? :D

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

kalo uda solve bisa dikasih tandayg lain tau kalo uda solved

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

iya project kecil aja.

nandai yg udah solved, gmna mksdnya? hihi kurang paham sya :(

avatar andriyfm
@andriyfm

23 Kontribusi 8 Poin

Dipost 6 tahun yang lalu

itu web statis ? apa nanti ada back endnya?

pilih jawaban yg terbaik(kalo dirasa uda terjawab) kalo belum ya biar aja terbuka dulu :D

avatar naufalhfzhn
@naufalhfzhn

172 Kontribusi 59 Poin

Dipost 6 tahun yang lalu

oh gtu ya... oke dah. web statis mas..

avatar andriyfm
@andriyfm

23 Kontribusi 8 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban