Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :
| <html><head> | |
| <title>Menu Navigasi Sederhana</title> | |
| <style type="text/css"> | |
| <!-- | |
| div { | |
| width: 200px; | |
| } | |
| h2 { | |
| font: 400 40px/1.5 Helvetica, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| font: 200 20px/1.5 Helvetica, Verdana, sans-serif; | |
| border-bottom: 1px solid #ccc; | |
| } | |
| li:last-child { | |
| border: none; | |
| } | |
| li a { | |
| text-decoration: none; | |
| color: #000; | |
| display: block; | |
| width: 200px; | |
| -webkit-transition: font-size 0.3s ease, background-color 0.3s ease; | |
| -moz-transition: font-size 0.3s ease, background-color 0.3s ease; | |
| -o-transition: font-size 0.3s ease, background-color 0.3s ease; | |
| -ms-transition: font-size 0.3s ease, background-color 0.3s ease; | |
| transition: font-size 0.3s ease, background-color 0.3s ease; | |
| } | |
| li a:hover { | |
| font-size: 30px; | |
| background: #f6f6f6; | |
| } | |
| --> | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <h2>Navigasi Vertikal Sederhana</h2> | |
| <ul> | |
| <li><a href="#">Menu 1</a></li> | |
| <li><a href="#">Menu 2</a></li> | |
| <li><a href="#">Menu 3</a></li> | |
| <li><a href="#">Menu 4</a></li> | |
| <li><a href="#">Menu 5</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
kalau sudah dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :
0 comments:
Post a Comment