Cara Membuat Menu Navigasi HTML dengan CSS

Assalamualaikum.. selmat siang sobat blogger. kali ini waophie bakal bagikan listing mengenai Pemograman Menu HTML dengan menggunakan CSS. Follow Me

Sekilas Tentang HTML

Hyper Text Markup Language atau biasa disingkat dengan HTML merupakan sebuah bahasa dalam internet untuk membuat sebuah halaman web, menampilkan berbagai indormasi didalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Sekilas Tentang CSS

Cascading Style Sheets yang biasa disingkat dengan CSS adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup language). Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL bahkan Android.

Kode Listing Untuk Menu Navigasi HTML Menggunakan CSS
Pertama Buatlah file html dengan memasukan listing dibawah ini kemudian simpan dengan nama " struktukturnavigasi.html "

STRUKTUR NAVIGASI

<html>
<head>
<style type="text/css" media="screen"> @import url("menuh.css"); </style>
<title>Navigasi</title>
</head>

<body>

<script type="text/javascript" charset="utf-8">

</script>

<h3>Struktur Navigasi</h1>
<div id="wrapper">
<ul id="level-one">
<li><a href="identitas.html">Beranda</a></li>
<li><a href="artikel.html">Artikel</a></li>
<li><a href="gambar.html">Gambar</a></li>
<li>List
<ul id="level-two">
<li><a href="order list.html">Ordered List</a></li>
<li><a href="unodered list.html">Unordered List</a></li>
</ul>
</li>
<li><a href="tabel.html">Tabel</a></li>
<li><a href="form.html">Form</a></li>
<li>Multimedia
<ul id="level-three">
<li><a href="audios.html">Audio</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

MENUH.CSS
kemudian Buat lagi file css dengan nama " menuh.css" kemudian masukkan listing dibawah ini ke file menuh.css tersebut.

<style type="text/css">

#wrapper{
clear:both;
margin:5px auto;
border:0px solid #000;
font-size:15px;
font-family: verdana;
}

ul#level-one{
width:93%;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url("images/menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
}
ul#level-one li:hover{
background:#FFA500;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
background:#FFA500 url(images/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:70px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(images/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */

}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(images/menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */
}
</style>

Gambar Hasil Tampilan