Membuat menu aktif dengan css

menu,,,!!! ya menu!!!
Biasanya setiap web pasti mempunyai menu lebih dari...!!! yang kadang membuat kita bingung adalah menu yang mana yang aktif, saat kita klik menu, saat halaman terbuka, maka menu kembali seperti semula.
maka kali ini ane mau posting merubah warna menu aktif, sekali pun halaman telah terbuka.
menggunakan CSS dan PHP.

Langsung aja cekidot.

contoh Scren Shoot nya



dan ini Scriptnya
index.php

<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<title>
Membuat Menu Aktif
</title>
</head>
<body id="<?php echo $_GET['aksi'];?>">
<div id="menu">
    <ul class="isi-menu">
        <li> <a href="index.php?aksi=home" class="home"> Home</a></li>
        <li> <a href="index.php?aksi=hubungi" class="hubungi">Hubungi</a></li>
        <li> <a href="index.php?aksi=tentang" class="tentang">Tentang Kami</a></li>
       
    </ul>
</div>
<body>
</body>
</html>

style.css

html,body{width:100%;height:100%;padding:0;background:url(../images/bodybg1.jpg);margin:0;font-family:arial}
a { text-decoration:none }

#menu{
    height: 30px;
    width: 970px;
    margin: 0 auto;
    padding: 0px;
    background: yellow;
    clear: both;
    text-align: center;
    background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
#menu .isi-menu{
    margin: 0 auto;
  
    max-width: 860px;
}
#menu .isi-menu li{
display: inline;
float: center;
margin: 0 auto;

}
#menu .isi-menu li .icon{
float: left;
width: 20px;
height: 20px;

}
#menu .isi-menu li a{
color: white;
  text-align:center;
  height:20px;
  min-width:70px;
  float:left;

 
  cursor: pointer;
 
  padding: 5px;

 
 
  position:relative;
  font-family: Arial, verdana, serif;
 
  text-decoration:none;
}
#menu .isi-menu li a:hover{
background: red;
background: #f6043d; /* Old browsers */
background: -moz-linear-gradient(top, #f6043d 0%, #e30337 44%, #ca002f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6043d), color-stop(44%,#e30337), color-stop(100%,#ca002f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* IE10+ */
background: linear-gradient(to bottom, #f6043d 0%,#e30337 44%,#ca002f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6043d', endColorstr='#ca002f',GradientType=0 ); /* IE6-9 */

}
body#home .home,
body#hubungi .hubungi,
body#tentang .tentang {
    background: #f6043d; /* Old browsers */
background: -moz-linear-gradient(top, #f6043d 0%, #e30337 44%, #ca002f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6043d), color-stop(44%,#e30337), color-stop(100%,#ca002f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* IE10+ */
background: linear-gradient(to bottom, #f6043d 0%,#e30337 44%,#ca002f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6043d', endColorstr='#ca002f',GradientType=0 ); /* IE6-9 */
}

cara kerjanya :


Mengisi "id: pada "body" yang di ambil dari $_GET['aksi'] dari "<a href="index.php?aksi=home" class="home"> Home</a></li>"

<body id="<?php echo $_GET['aksi'];?>">

Selanjutnya merubah warna class pada <a> </a> dimna saat id body terisi.

body#home .home,
body#hubungi .hubungi,
body#tentang .tentang {
    background: #f6043d; /* Old browsers */
background: -moz-linear-gradient(top, #f6043d 0%, #e30337 44%, #ca002f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6043d), color-stop(44%,#e30337), color-stop(100%,#ca002f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6043d 0%,#e30337 44%,#ca002f 100%); /* IE10+ */
background: linear-gradient(to bottom, #f6043d 0%,#e30337 44%,#ca002f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6043d', endColorstr='#ca002f',GradientType=0 ); /* IE6-9 */
}

Sekian Semoga bermanfaat,,,
jika ada yang tidak jelas,,, bisa di tanyakan pada komentaar...!





Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel