Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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>
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:)
sip semoga sukses dan bisa ngembangin yang lebih dari penjelasan saya :D, nanti kalo uda berhasil bisa kasih liat hasilnya ya :D
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...
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
kalo uda solve bisa dikasih tandayg lain tau kalo uda solved
iya project kecil aja.
nandai yg udah solved, gmna mksdnya? hihi kurang paham sya :(
itu web statis ? apa nanti ada back endnya?
pilih jawaban yg terbaik(kalo dirasa uda terjawab) kalo belum ya biar aja terbuka dulu :D