<html>
<head>
<title>Dropdown Graficha CSS</title>
<style>
menu ul {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
font: Arial, Helvetica, sans-serif;
border-radius: 5px;
width: auto;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 14px;
color: white;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
background: blue;
}
#menu .active a,
#menu li:hover > a {
background: purple;
color:pink;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: purple;
color: pink;
}
#menu ul ul a:hover {
background: pink !important;
color: purple !important;
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 14px;
}
</style>
</head>
<body>
<div id='menu'>
<ul>
<li class='last'><a href='#'><span>Beranda</span></a></li>
<li class='has-sub'><a href='#'><span>Catatan</span></a>
<ul>
<li><a href='#'><span>Kata Bijak</span></a></li>
<li><a href='#'><span>Karangan</span></a></li>
<li class='last'><a href='#'><span>Tugas</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Galery</span></a>
<ul>
<li><a href='#'><span>Karya Sendiri</span></a></li>
<li><a href='#'><span>Photos</span></a></li>
<li class='last'><a href='#'><span>Wallpaper</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Profil</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a>
<ul>
<li><a href='#'><span>Email</span></a></li>
<li><a href='#'><span>Facebook</span></a></li>
<li class='last'><a href='#'><span>Twitter</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<head>
<title>Dropdown Graficha CSS</title>
<style>
menu ul {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
font: Arial, Helvetica, sans-serif;
border-radius: 5px;
width: auto;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 14px;
color: white;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
background: blue;
}
#menu .active a,
#menu li:hover > a {
background: purple;
color:pink;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: purple;
color: pink;
}
#menu ul ul a:hover {
background: pink !important;
color: purple !important;
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 14px;
}
</style>
</head>
<body>
<div id='menu'>
<ul>
<li class='last'><a href='#'><span>Beranda</span></a></li>
<li class='has-sub'><a href='#'><span>Catatan</span></a>
<ul>
<li><a href='#'><span>Kata Bijak</span></a></li>
<li><a href='#'><span>Karangan</span></a></li>
<li class='last'><a href='#'><span>Tugas</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Galery</span></a>
<ul>
<li><a href='#'><span>Karya Sendiri</span></a></li>
<li><a href='#'><span>Photos</span></a></li>
<li class='last'><a href='#'><span>Wallpaper</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Profil</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a>
<ul>
<li><a href='#'><span>Email</span></a></li>
<li><a href='#'><span>Facebook</span></a></li>
<li class='last'><a href='#'><span>Twitter</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Selanjutnya nih.. Skrip css membuat tabel ZEBRA dengan Efek Mouse HOVER...
<html>
<head><title>Zebra Hover GAK</title>
<style>
.p {
font-weight: bold;
font-size: 25px;
color: blue;
}
#tabel tr:nth-child(even) {
background-color: purple;
color: white;
}
#tabel tr:nth-child(odd) {
background-color: violet;
color: white;
}
#tabel tr:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<p class="p">*/* Jadwal Kuliah Semester 3 */*</p>
<table border="1" id="tabel">
<tr>
<th width="50">Hari</th>
<th width="125">Makul</th>
<th width="40">Kelas</th>
<th width="45">Jam</th>
<th width="60">Ruang</th>
</tr>
<tr>
<td>Senin</td>
<td>T.Kom</td>
<td>B</td>
<td>1-3</td>
<td>J 2 4</td>
</tr>
<tr>
<td></td>
<td>Prak. SO</td>
<td>J</td>
<td>7-8</td>
<td>LJKTIF</td>
</tr>
<tr>
<td></td>
<td>Kemuhamadiyahan</td>
<td>C</td>
<td>9-10</td>
<td>J 2 4</td>
</tr>
<tr>
<td></td>
<td>Prak. JarKom</td>
<td>J</td>
<td>15-16</td>
<td>LJKTIF</td>
</tr>
<tr>
<td>Selasa</td>
<td>PSI</td>
<td>B</td>
<td>1-3</td>
<td>J 4 10</td>
</tr>
<tr>
<td>Rabu</td>
<td>PWD</td>
<td>F</td>
<td>1-3</td>
<td>J 4 7</td>
</tr>
<tr>
<td></td>
<td>SO</td>
<td>C</td>
<td>9-12</td>
<td>Sem 1</td>
</tr>
<tr>
<td>Kamis</td>
<td>JarKom</td>
<td>C</td>
<td>10-12</td>
<td>J 4 7</td>
</tr>
<tr>
<td>Jumat</td>
<td>IAD</td>
<td>C</td>
<td>1-2</td>
<td>J 4 3</td>
</tr>
<tr>
<td></td>
<td>OAK</td>
<td>B</td>
<td>7-8</td>
<td>J 4 8</td>
</tr>
</table>
</body>
</html>
<head><title>Zebra Hover GAK</title>
<style>
.p {
font-weight: bold;
font-size: 25px;
color: blue;
}
#tabel tr:nth-child(even) {
background-color: purple;
color: white;
}
#tabel tr:nth-child(odd) {
background-color: violet;
color: white;
}
#tabel tr:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<p class="p">*/* Jadwal Kuliah Semester 3 */*</p>
<table border="1" id="tabel">
<tr>
<th width="50">Hari</th>
<th width="125">Makul</th>
<th width="40">Kelas</th>
<th width="45">Jam</th>
<th width="60">Ruang</th>
</tr>
<tr>
<td>Senin</td>
<td>T.Kom</td>
<td>B</td>
<td>1-3</td>
<td>J 2 4</td>
</tr>
<tr>
<td></td>
<td>Prak. SO</td>
<td>J</td>
<td>7-8</td>
<td>LJKTIF</td>
</tr>
<tr>
<td></td>
<td>Kemuhamadiyahan</td>
<td>C</td>
<td>9-10</td>
<td>J 2 4</td>
</tr>
<tr>
<td></td>
<td>Prak. JarKom</td>
<td>J</td>
<td>15-16</td>
<td>LJKTIF</td>
</tr>
<tr>
<td>Selasa</td>
<td>PSI</td>
<td>B</td>
<td>1-3</td>
<td>J 4 10</td>
</tr>
<tr>
<td>Rabu</td>
<td>PWD</td>
<td>F</td>
<td>1-3</td>
<td>J 4 7</td>
</tr>
<tr>
<td></td>
<td>SO</td>
<td>C</td>
<td>9-12</td>
<td>Sem 1</td>
</tr>
<tr>
<td>Kamis</td>
<td>JarKom</td>
<td>C</td>
<td>10-12</td>
<td>J 4 7</td>
</tr>
<tr>
<td>Jumat</td>
<td>IAD</td>
<td>C</td>
<td>1-2</td>
<td>J 4 3</td>
</tr>
<tr>
<td></td>
<td>OAK</td>
<td>B</td>
<td>7-8</td>
<td>J 4 8</td>
</tr>
</table>
</body>
</html>
Hee..hee... Gimana? Selamat Mencoba...
0 comments:
Posting Komentar