Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Membuat navbar
bagaimana cara membbuat navbar dalam SPA di react js?
3 Jawaban:
sama seperti membuat navbar pada umumnya + pakai react router
Jawaban Terpilih
sama aja cuman untuk tag <a> ganti dengan <Link> atau <Navlink> jangan lupa import terlebih dahulu <pre> import {NavLink, BrowserRouter} from 'react-router-dom' </pre>
mungkin seperti ini : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #333; }
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }
.active { background-color: #4CAF50; color: white; }
.topnav .icon { display: none; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { font-size: 17px;
border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit;
margin: 0; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9;
min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; }
.dropdown:hover .dropdown-content { display: block; }
@media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn {
display: none; } .topnav a.icon { float: right; display: block; } }
@media screen and (max-width: 600px) { .topnav.responsive {position: relative;}
.topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head>
<body>
<div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div>
<div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div>
<script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>
</body> </html>