Skip to content Skip to sidebar Skip to footer
Home / css / PHP

Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery

Post a Comment
Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery - Hallo sahabat Berita Teknologi Paling Update, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel css, Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery
link : Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery

Baca juga


Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery

Cara membuat menu dengan css

Dalam tutorial kali ini saya akan membuat sebuah navigation menu dengan menggunakan CSS HTML dan sedikit JQUERY. Dan juga, saya akan membuat navigation menu yang saya buat ini responsive atau tampilannya bisa menyesuaikan ukuran layar.

Dalam mendesain tampilan agar bisa menyesuaikan sesuai tampilan layar, disini saya menggunakan fitur CSS yang bernama media query. Media query dalam css merupakan sintaks yang berfungsi untuk menampilkan konten berdasarkan lebar atau ukuran layar tanpa harus merubah konten itu sendiri.

Agar tidak terlalu bertele-tele, langsung saja saya akan memulai membuat Responsive Navigation Menu Dengan menggunakan CSS.

Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery

Langkah pertama saya akan membuat HTML nya terlebih dahulu. Beri nama file HTML nya dengan index.html “Untuk nama bebas sesuai keinginan”.

<!DOCTYPE html>
<html>
<head>
 <title>HorizontalNav</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="header">
  <div class="container">
   <div class="navbar">
    <div class="brand">
     <h1><a href="#">HorizontalNav</a></h1>
    </div>

    <div class="menu">
     <nav class="nav">
      <a id="toggle" href="#">Menu</a>
      <ul id="dropdown">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
     </nav>

     <div class="login">
      <a href="#">Login</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Setelah selesai membuat file HTML, saya akan memulai membuat style. Silahkan buat file CSS dan beri nama style.css “Untuk nama bebas sesuai keinginan”.

Baca Juga : Membuat Hello World VB

Pertama saya akan membuat style untuk layar desktop nya terlebih dahulu.

body{
 padding: 0;
 margin: 0;
}

.header{
 position: relative;
 text-align: center;
 background: rgba(0,0,0,0.1);
 font-family: Arial;
 border-bottom: 2px solid rgba(0,0,0,0.7);
}

.container{
 display: inline-block;
 width: 900px;
}

.navbar{
 display: flex;
}

.brand{
 flex: 1;
 margin-top: 6px;
}
.brand h1{
 margin: 0;
}
.brand h1 a{
 text-decoration: none;
 color: rgba(0,0,0,0.7);
}

.menu{
 flex: 3;
 display: flex;
}

.nav{
 flex: 3
}
.nav ul{
 text-align: left;
}
.nav ul li{
 display: inline-block;
 list-style: none;
}
.nav ul li a{
 text-decoration: none;
 color: rgba(0,0,0,0.5);
 padding: 10px;
}
.nav ul li a:hover{
 color: rgba(0,0,0,0.7);
 text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.nav a#toggle{
 display: none;
}

.login{
 flex: 1;
}
.login a{
 display: block;
 text-decoration: none;
 padding-top: 18px;
 padding-bottom: 18px;
 color: #fff;
 background: rgba(0,0,0,0.7); 
 font-weight: bold;
}

Cara membuat menu dengan css

Kedua saya akan membuat style untuk layar jika ukuranya kurang dari 900px, tujuanya untuk merubah ukuran container yang tadinya 900px, menjadi 100% ukuran layar.


/*Jika layar kurang dari sama dengan 900px*/
@media only screen and (max-width: 900px){
 .container{
  width: 100%;
 }
 .brand{
  margin-left: 10px;
 }
 .nav ul{
  display: block;
 }
}
Cara membuat menu dengan css

Terakhir dalam membuat styling css saya akan membuat  untuk tampilan mobile.

Baca Juga : Session Di PHP

/*Jika layar berukuran kurang dari sama dengan 700px*/
@media only screen and (max-width: 700px){
 .header{
  border-bottom: none;
 }

 .navbar{
  display: block;
 }

 .menu{
  margin-top: 10px;
 }

 .nav{
  flex: 1;
 }
 .nav a#toggle{
  display: block;
  text-decoration: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-weight: bold;
  padding-top: 18px;
  padding-bottom: 18px;
 }
 .nav ul{
  display: none;
  margin: 10px 0;
  padding: 0;
 }
 .nav ul li{
  display: block;
 }
 .nav ul li a{
  display: block;
  padding: 7px 20px;
  margin: 0;
 }

 .login{
  flex: 1;
 }
}

Cara membuat menu dengan css

Terakhir tambahakan script JQuery pada file index.html sebelum tag penutup body "</body>" 

<script src="jquery.js"></script> //melink-kan file jquery ke file html
<script>
 $(document).ready(function() {
  $("#toggle").click(function() {
   $("#dropdown").slideToggle("fast");
  });
 });
</script>

Jangan lupa untuk memasukan file jQuery ke folder yang sama dengan file html dan file css. Untuk mendapatkan file JQuery nya bisa di download di website JQuery nya langsung.

Setelah selesai membuat script JQuery, dan jika button menu di klik maka hasilnya seperti ini

Cara membuat menu dengan css

Selesai.

Kurang lebih seperti itulah bagaimana Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery ... Semoga membantu.



Demikianlah Artikel Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery

Sekianlah artikel Dari
www.lulussmk.com
Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery dengan alamat link https://pakarteknologiandroid.blogspot.com/2020/04/cara-membuat-responsive-navigation-menu.html

Post a Comment for "Cara Membuat Responsive Navigation Menu dengan menggunakan HTML, CSS dan JQuery"

Post a Comment