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
style.css
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.
Sekian Semoga bermanfaat,,,
jika ada yang tidak jelas,,, bisa di tanyakan pada komentaar...!
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>
<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 */
}
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 */
}
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...!
