Membuat Menu Navigasi Vertikal Sederhana

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, kali ini kita akan bahas sedikit mengenai dasar dalam CSS. Disini kita akan membuat menu navigasi sederhana.

Sebuah web tentunya pasti punya menu navigasi, yang memiliki kesan akan konten apa saja yang dimuat dalam sebuah web. Biasanya masing-masing konten tersebut bisa memberikan pesan informasi juga kepada pengunjung web, hingga mudah untuk dimengerti oleh pengunjung web.

Pada kesempatan kali ini, kita akan membuat menu navigasi vertikal. Yang mana navigasi ini berisi menu pilihan yang berada di samping dalam sebuah halaman website.

Oke, langsung aja kita persiapan untuk memulai.

  1. Pertama-tama, silahkan buat dulu file dengan format html. Kemudian ketikkan kode html berikut.

<nav class=”vertikal”>

<ul>

<li><a href=”#”>Islam</a></li>

<li><a href=”#”>Ekonomi</a></li>

<li><a href=”#”>Kesehatan</a></li>

<li><a href=”#”>Motivasi</a></li>

<li><a href=”#”>Travelling</a></li>

</ul>

</nav>

Kemudian jalankan di browsernya, maka akan tampil sebagai berikut.

2. Kemudian buat file cssnya, dan berikan script kodenya seperti berikut.

.vertikal ul

{

list-style-type: none;

border: 1px solid black;

width: 200px;

margin: 0;

padding: 0;

font-family: arial;

font-size: 16px;

font-weight: bold;

background-color: crimson;

}

.vertikal ul li a

{

display: block;

color: white;

margin: 5px 7px;

text-decoration: none;

border-bottom: 1px solid black;

padding: 5px;

}

 

.vertikal ul li a:hover

{

background-color: orange;

}

3. Kemudian masukkan kode berikut, pada file html yang telah kita buat. Supaya file html dan css 

<link rel=”stylesheet” type=”text/css” href=”nama_file_css“>

 

Sehingga, seperti inilah kode secara keseluruhan pada html.

 

<link rel=”stylesheet” type=”text/css” href=”nama_file_css“>

<nav class=”vertikal”>

<ul>

<li><a href=”#”>Islam</a></li>

<li><a href=”#”>Ekonomi</a></li>

<li><a href=”#”>Kesehatan</a></li>

<li><a href=”#”>Motivasi</a></li>

<li><a href=”#”>Travelling</a></li>

</ul>

</nav>

Dan seperti inilah hasilnya saat dijalankan di browser.

Kemudian saat navigasinya disentuh oleh mouse, maka akan menjadi seperti ini.

 

Jadi seperti itulah tata cara pembuatan menu navigasi vertikal secara sederhana. Pada beberapa script kode tersebut, ada beberapa fungsi yang mencakup lebar, margin, font, hingga warna dan lain-lain sudah diurai disini.

Jadi, Alhamdulillah demikianlah tutorial kita pada kali ini. Akhir kata semoga bermanfaat ya. Amin.

 

Created by : Danny Julian Pratama