Tugas CSS 2 | Dropdown Menu dengan CSS dan Tabel zebra
Live Demo >> or
Berikut Scriptnya :
1. Dropdown => (Menu Navigasi atas) arahkan kursor ke arah menu navigasi diatas dan submenu akan muncul
2. Tabel zebra => (Tabel Riwayat Sekolah) Tabel yang tiap barisnya berbeda background seperti kulit zebra, dan ketika di dekati oleh mouse maka akan berubah lagi backgroundnya.
HTML Script :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>L200130172 | Dropdown dengan CSS</title>
<script src="IE9.js"></script> <!-- script tambahan untuk IE -->
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">Nama & NIM</a>
<ul>
<li><a href="#">Albert Septiawan</a></li>
<li><a href="#">L200130172</a></li>
</ul>
</li>
<li><a href="#">Kelas</a>
<ul>
<li><a href="#">Kelas E</a></li>
<li><a href="#">Semester 1</a></li>
</ul>
</li>
<li><a href="#">Jurusan</a>
<ul>
<li><a href="#">Teknik Informatika</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Daftar Web</a>
<ul>
<li><a href="#">albertseptiawan.blogspot.com</a></li>
<li><a href="#">albertseptiawan.netne.net</a></li>
<li><a href="#">albertseptiawan.pusku.com</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">WhatApps</a></li>
<li><a href="#">BBM</a></li>
</ul>
</li>
</ul>
</nav>
<div id="isi">
<div class="left">
<h3>Identitas</h3>
<hr>
<h3>Nama</h3>
Albert Septiawan
<h3>NIM</h3>
L200130172
<h3>Kelas</h3>
E / 1
<h3>Tugas</h3>
<strong>Pemrograman Web Dasar </strong>
<ul type="square">
<li>Membuat Dropdown menu dengan CSS</li>
<li>Membuat Zebra Tabel</li>
</ul>
</div>
<div class="right">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<thead>
<th colspan="3"><h3>Riwayat Sekolah</h3></th>
</thead>
<thead>
<th align="left">No</th>
<th align="left">Tahun</th>
<th align="left">Nama Sekolah</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2013</td>
<td>Muhammadiyah University of Surakarta</td>
</tr>
<tr>
<td>2</td>
<td>2010</td>
<td>SMK Negeri 2 Terbanggi Besar</td>
</tr>
<tr>
<td>3</td>
<td>2007</td>
<td>SMP N 1 Terbanggi Besar</td>
</tr>
<tr>
<td>4</td>
<td>2001</td>
<td>SD Negeri 2 Yukum Jaya</td>
</tr>
<tr>
<td>5</td>
<td>2000</td>
<td>TK Istiqlal Yukum Jaya</td>
</tr>
</tbody>
</table>
<hr>
</div>
</div>
<div id="footer">
© 2013 | AxQuired24
</div>
</body>
</html>
CSS Script :
*{
margin:0;padding:0;
}
body{
background:url("bg.jpg");
font: 14px 'verdana';
}
nav{
margin-top:0;
}
nav ul {
list-style:none;
background-image:-webkit-linear-gradient(top,#ebebeb,#D7D7D7);
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
nav ul:after{
content:" ";
display:block;
clear:both;
}
nav ul li{
float:left;
position:relative;
}
nav ul li a{
color:#555;
display:block;
padding:10px 25px;
text-decoration:none;
-moz-transition: all 0.26s ease-out;
-webkit-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
}
nav ul ul{
position:absolute;
display:none;
top:100%;
background: #EEEEEE;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
nav ul ul li{
float:none;
}
nav ul li:hover > a, nav ul ul li:hover > a {
color :white;
background-image:-moz-linear-gradient(top, #506def,#2041DE);
background-color:#506def;
}
nav ul ul li:hover > a {
font-weight:bold;
}
nav ul li:hover > ul{
display:block;
}
nav ul ul ul{
position:absolute;
left:100%;
top:0;
}
div#isi{
position:absolute;
left:40px;
top:70px;
z-index:-24;
}
div#isi .left{
float:left;
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
color:#555;
padding:20px;
}
h3{
color:#333;
display:block;
padding-top:10px;
}
div#isi .left ul{
padding-left:15px;
}
/* Style Tabel */
div#isi .right{
float:right;
margin-left:20px;
}
div.right table{
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
color:#555;
}
th, td{
padding:10px;
}
tbody tr:nth-child(odd) {
background:#999;
}
tbody tr:hover{
background:#555;
border:#333 1px solid;
color:#FFF;
-moz-transition: all 0.26s ease-out;
-webkit-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
}
#footer{
color:#555;
background:#CCC;
text-align:center;
padding:10px;
width:100%;
position:fixed;
bottom:0px;
font-size:10px;
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
Post a Comment