Pada kali ini akan membahas bagaimana mempercantik sebuah web atau website dalam segi menu, contoh nya seperti dibawah ini
Cara Membuat menu CSS website
Yang perlu kamu siapkan adalah aplikasi yang dapat mengolah html, php, ataupun CSS atau software yang dapat meng-create sebuah website, seperti dreamweaver, notepad++ dan lain-lain sebagainya. Buka Notepad++ lalu copy code CSS dibawah ini :
ul#css3menu1{
margin:0;list-style:none;padding:10px 10px 10px 0;background-color:;border-width:0;border-style:solid;border-color:;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 10px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Arial,sans-serif;color:#8285A0;cursor:default;padding:3px;background-color:#FFFFFF;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#ff0000;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1>li>a{
padding:3px 10px;}
ul#css3menu1 li.topmenu>a{
border-width:0 0 3px 0;border-style:none;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
border-style:none;}
margin:0;list-style:none;padding:10px 10px 10px 0;background-color:;border-width:0;border-style:solid;border-color:;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 10px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Arial,sans-serif;color:#8285A0;cursor:default;padding:3px;background-color:#FFFFFF;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#ff0000;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1>li>a{
padding:3px 10px;}
ul#css3menu1 li.topmenu>a{
border-width:0 0 3px 0;border-style:none;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
border-style:none;}
lalu simpan dengan extensi.CSS. Setelah di simpan copikan code html nya
<!-- Start css menu HEAD section -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Start css menu HEAD section -->
<link rel="stylesheet" href="image/menu/style.css" type="text/css" />
<div align="center">
<style>
._css3m{display:none}
</style>
<!-- End css menu HEAD section -->
<body style="background-color:#EBEBEB">
<!-- Start css menu BODY section -->
</div>
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="?" style="height:16px;line-height:16px;">HOME</a></li>
<li class="topmenu"><a href="?data=input_pegawai&act=" style="height:16px;line-height:16px;">INPUT PEGAWAI</a></li>
<li class="topmenu"><a href="?data=input_gaji&act=" style="height:16px;line-height:16px;">INPUT GAJI</a></li>
<li class="topmenu"><a href="?data=laporan_pegawai" style="height:16px;line-height:16px;">LAP. PEGAWAI</a></li>
<li class="topmenu"><a href="?data=laporan_gaji" style="height:16px;line-height:16px;">LAP. GAJI</a></li>
<li class="topmenu"><a href="?data=laporan_keseluruahan" style="height:16px;line-height:16px;">LAP. KESELURUHAN</a></li>
</ul>
<div align="center">
<p>
<!-- End css menu BODY section -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Start css menu HEAD section -->
<link rel="stylesheet" href="image/menu/style.css" type="text/css" />
<div align="center">
<style>
._css3m{display:none}
</style>
<!-- End css menu HEAD section -->
<body style="background-color:#EBEBEB">
<!-- Start css menu BODY section -->
</div>
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="?" style="height:16px;line-height:16px;">HOME</a></li>
<li class="topmenu"><a href="?data=input_pegawai&act=" style="height:16px;line-height:16px;">INPUT PEGAWAI</a></li>
<li class="topmenu"><a href="?data=input_gaji&act=" style="height:16px;line-height:16px;">INPUT GAJI</a></li>
<li class="topmenu"><a href="?data=laporan_pegawai" style="height:16px;line-height:16px;">LAP. PEGAWAI</a></li>
<li class="topmenu"><a href="?data=laporan_gaji" style="height:16px;line-height:16px;">LAP. GAJI</a></li>
<li class="topmenu"><a href="?data=laporan_keseluruahan" style="height:16px;line-height:16px;">LAP. KESELURUHAN</a></li>
</ul>
<div align="center">
<p>
<!-- End css menu BODY section -->
Perhatikan code yg di bold berwarna merah, itu adalah href lokasi CSS tadi disimpan. jika salah memberikan alamat penyimpanan css, maka menu nya tidak berbentuk seperti contoh di atas.
Sekian artikel tentang Cara Membuat menu CSS website semoga bermanfaat dan membantu kamu.
Baca juga :
Cara membuat video berisi tulisan
Penyebab Printer sering Not Responding
0 komentar:
Posting Komentar
Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel.
Gunakan tombol balas dibawah komentar terkait jika ingin membalas komentar agar komunikasi lebih terstruktur.
Klik untuk melihat kode :) :( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @-@ :-a :W *fck* :ngakak |o| :goodluck :smile