Header Ads

Link Banner

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">
     &copy; 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);   
  }

Tidak ada komentar