July 15, 2024

Membuat Menu PopUp dengan CSS

3 min read

Menu PopUp dengan CSS

Halo ketemu lagi dengan saya lagi Pak Rais, dalam tutorial kali ini saya ingin berbagi ilmu dalam pembuatan menu popup dengan css.

Tapi apa seh popup menu itu ? popup menu atau menu popup suatu menu navigasi yang memiliki sub menu atau anak menu didalam nya jika kursor mouse diatas menu link, mengalami efek hover, sebagai contoh pada menu link tutorial dan tips di web portal news palcomtech.

Untuk membuat menu pop up tidaklah begitu sulit, menggunakan tag <ul> <li> saja yang bisa disetting dalam css menjadi lebih menarik, tapi untuk pembuatan menu pop up ini tag <ul> <li> berada didalam tag <li>, seperti konsep berikut :

Perhatikan baik-baik kode yang sebenarnya:

<ul>

<li>menu link

<ul>

<li>menu link</li>

<ul>

</li>

</ul>

Perhatikan untuk sub menu nya diapit oleh tag <li> sub menu </li>.

Sebagai contoh kita buat menu link seperti berikut :

<ul>

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

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

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

<ul>

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

<li><a href=”#”>desain grafis</a></li>

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

</ul>

</li>

</ul>

Contoh diatas kamu ketik didalam jendela code dreamweaver seperti berikut :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>menu pop up</title>

<link rel=”stylesheet” type=”text/css” href=”vertical.css” />

</head>

 

<body>

<ul>

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

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

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

<ul>

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

<li><a href=”#”>desain grafis</a></li>

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

</ul>

</li>

</ul>

 

</body>

</html>

Simpan dengan nama popup.html, ketika dijalankan kedalam browser tekan F12, kita pakai browser modzilla, tampilannya seperti berikut :

Dalam pembuatan menu pop up perintah css yang dipakai hanyalah tag display, yaitu display:block, dan display:none, dimana display:none digunakan dalam sub menu ul nya, sedang kan display:block digunakan dalam link hover untuk ditampilkan.

Buka jendela baru page type pilih css, dalam pembuatan kode css nya kita bentuk menu pop up secara vertikal.

Ketik kode css nya seperti berikut :

ul{list-style:none;}

ul li ul {display : none; }

ul li:hover ul {display:block;}

simpan dengan nama vertical.css, simpan dalam satu folder dengan file htmlnya.

Seperti kode gambar css berikut :

Penjelasan :

Pada baris ke-2, tag ul li ul, ul terakhir tersebut merupakan level sub menu yang dihilangkan dengan display none, sedangkan pada baris ke-3, tag ul li:hover (li:hover jangan dispasi) ul, merupakan level sub menu yang ditampilkan saat pointer mouse diatas link.

Hasilnya setelah dijalankan kedalam browser seperti berikut

Untuk merapikan tampilan nya tambahkan atau ubah tag dalam jendela kode css seperti berikut  :

ul{list-style:none;

width:125px;

margin:0;

padding:0;}

 

ul a{text-decoration:none;

display:block;

width:125px;

padding:5px 5px 5px 10px;

background:#FFFFCC;}

 

ul li{border-bottom:1px solid #66FFFF;

position:relative;

float:left;}

 

ul li ul{list-style:none;

position:absolute;

left:140px;

top: 0;

display:none;

width:125px;

border-right:1px solid #66FFFF;}

 

ul li:hover ul{display:block;}

simpan kembali, dan jalankan jendela kode html nya, pada browser tekan F12, jalan kan di browser modzilla, maka tampilan nya seperti berikut :

Nah untuk membuat menu pop-up secara vertical dalam css sudah selesai, bagaimana kelihatan nya tersusun rapi dan elegan, tampilan ini akibat pengaruh dari property display:block.

Kalau ingin merubah tampilannya menjadi horizontal maka untuk kode css nya buat seperti berikut :

ul{list-style:none;

margin:0;

padding:0;}

 

ul a{text-decoration:none;

display:block;

width:125px;

padding:5px 5px 5px 10px;

background:#FFFFCC;}

 

ul li{border-bottom:1px solid #66FFFF;

position:relative;

float:left;

border-right:1px solid #66FFFF;}

 

ul li ul{list-style:none;

position:absolute;

left:0;

top: 100%;

display:none;

width:125px;

border-right:1px solid #66FFFF;}

 

ul li:hover ul{display:block;

position:absolute;

left:-1px;

top:31px;}

simpan dengan nama horizontal.css, pada jendela kode html kalian ubah saja pada tag href pemanggilan file external css nya menjadi <link rel=”stylesheet” type=”text/css” href=”horizontal.css” />

ketika ditampilkan dalam jendela browser tampilannya seperti berikut :

Sekian dulu ya, terima kasih telah membaca nya, semoga bermanfaat dalam materi pembelajaran css ataupun DW2 distmik, terima kasih jika sudah memberikan like nya, jangan lupa, sampai jumpa lagi ditutorial selanjutnya. See u.

Silahkan didownload materi ini.

[download id=”156″]

0 thoughts on “Membuat Menu PopUp dengan CSS

  1. makasih ya atas saran nya, tapi ngomong ngomong 2 tingkat maksudnya apa neh ??

    mungkin 2 lebvel ya dimana didalam sub menu ada sub menu lagi begitu, oke deh tunggu aja sedang digarap neh..

    tapi kalau udah baca jangan lupa di like ya !?

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.