Web Tutorial
Now Reading
Cara Membuat Menu website Menggunakan HTML, CSS
0

Bier pinter kali ini akan berbagi Cara Membuat Menu website. Menu pada website sangat dibutuhkan disetiap website. Dan biasanya setiap menu website selalu ditampilkan dibagian atas.

Cara Membuat Menu website

Gambar 1.1 – Menu dan konten

Koding Lengkap Di Codepen Cara Membuat Menu Website

Untuk melihat dan menjalankan hasil scriptnya, kamu bisa lakukan menggunakan kodepen. Full script berupa HTML, CSS, Javascript sudah ada di codepen. Kamu tinggal menjalankan hasilnya saja. Kunjungi tautannya dibawah ini:

See the Pen Tutorial Membuat Menu Dan Konten Menggunakan HTML, CSS, Dan Javascript by Bier Pinter (@Bierpinter) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

Berikut kode javascript dibawah ini:

var st = document.getElementsByClassName("step");
var i;

for (i = 0; i < st.length; i++) {
  st[i].onclick = function() {
    this.classList.toggle("active");
    var exp = this.nextElementSibling;
    if (exp.style.maxHeight){
      exp.style.maxHeight = null;
    } else {
      exp.style.maxHeight = exp.scrollHeight + "px";
    } 
  }
}

Penjelasan :

Menghilangkan margin default

Menghilangkan margin default dengan memberi margin nol pada body agar tidak ada batas antara halaman website dengan browser dan lebar menu 80% untuk container serta margin nol dan auto. Margin nol auto yang membuat menu menjadi berada ditengah. Yang membuat menu berubah menjadi warna merah muda karena diheader diberi background color.

Baca juga: Materi Pemrograman

body {
   margin: 0;
   font-family: 'Work Sans', sans-serif;
}

.container {
	width: 80%;
	margin: 0 auto;
    
}

header {
  background: #fc6f7c;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

Membuat Logo Berada Disebelah Kiri

Membuat logo berada disebelah kiri dengan memberi float left dan navigasi disebelah kanan atau float right.

.logo {
  float: left;
  padding: 5px 0;
  color: #fff;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 30px;
  padding-top: 20px;
  position: relative;
}

nav a {
  color: #eee;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #fff;
}

Membuat Garis Bawah Pada Menu

Membuat garis bawah pada menu setiap kali kita mengarahkan kursor. Misalnya, kamu mengarahkan kursor ke menu home maka akan muncul garis bawah dimenu tersebut. Menu lainnya pun demikian. – Cara Membuat Menu website

nav a::before {
  content: '';
  display: block;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: -5px;
  width: 0%;

}

nav a:hover::before {
  width: 100%;
}

Membuat Jarak Pada Menu Dan Konten

Membuat jarak pada menu dan konten dengan memberi margin top dan mendesain button agar lebih menarik.

.container-content{
	margin-top: 20px;

}  
button.step {
    background-color: #f44253;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 30%;
	margin-top: 10px;
	margin-left: 5px;
	border-radius: 3px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.20), 0 2px 5px 0 rgba(0,0,0,0.15);
    transition: 0.5s;
}

button.step.active, button.step:hover {
    background-color: #fc6f7c;
}

Membuat Tombol Icon Pada Menu

Membuat tombol ” + ” dengan menambahkan content \002B dan \2212 untuk tanda ” – ”

button.step:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.step.active:after {
    content: "\2212";
}

Mengatur Teks Konten Pada Menu

Kamu bisa mengatur jarak, spasi, margin pada konten menu dengan mengikuti css dibawah ini.

div.explain {
    padding: 0 5px;
    background-color: white;
    max-height: 0;
    width: 28%;
    text-align: justify;
    overflow: hidden;
    transition: 0.2s ease-out;
}

Membuat Konten Menjadi Interaktif

Membuat konten menjadi interaktif. Misalnya saat menekan tombol header maka akan muncul teks atau kalimat lorem ipsum.

var st = document.getElementsByClassName("step");
var i;

for (i = 0; i 

Demikian tutorial Cara Membuat Menu website kali ini. Semoga Bermanfaat!

What's your reaction?
Luar Biasa
0%
Suka Sekali
0%
Keren
0%
Kagum
0%
Jelek
0%
Tidak Suka
100%
About The Author
Isak Mandala

Leave a Response