Setelah saya menelusuri satu-persatu selector yang ada di w3schools.com dengan teliti, saya menemukan satu selector yang cukup simple tetapi sangat powerful yaitu :target . Dengan selector tersebut kita dapat memanipulasi object HTML melalui url browser.
Trik yang digunakan pada menu ini cukup simple. Hanya menggabungkan selector :target dengan visibility dan opacity.
Ok, berikut kode lengkapnya.
index.html
<!DOCTYPE HTML> <html> <head> <title>Tabindex Menggunakan CSS3</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <center> <header> <h1>TabIndex Menggunakan CSS3</h1> </header> <div id="content"> <div id="menu"> <li><a href="#view">View</a></li> <li><a href="#like">Like</a></li> <li><a href="#comment">Comment</a></li> </div> <div id="link"> <div id="view" class="tab"> <li><a href="#">Kemenangan jokowi atas Bakrie</a></li> <li><a href="#">Ternyata iran merupakan sekutu dekat AS</a></li> <li><a href="#">Apple berencana membeli Facebook</a></li> <li><a href="#">Asap kembali mencemari udara di Riau</a></li> <li><a href="#">Indonesia akan menjadi negara maju pada tahun 2030</a></li> </div> <div id="like" class="tab"> <li><a href="#">Indonesia akan menjadi negara maju pada tahun 2030</a></li> <li><a href="#">Kemenangan jokowi atas Bakrie</a></li> <li><a href="#">Ternyata iran merupakan sekutu dekat AS</a></li> <li><a href="#">Asap kembali mencemari udara di Riau</a></li> <li><a href="#">Apple berencana membeli Facebook</a></li> </div> <div id="comment" class="tab"> <li><a href="#">Ternyata iran merupakan sekutu dekat AS</a></li> <li><a href="#">Kemenangan jokowi atas Bakrie</a></li> <li><a href="#">Indonesia akan menjadi negara maju pada tahun 2030</a></li> <li><a href="#">Asap kembali mencemari udara di Riau</a></li> <li><a href="#">Apple berencana membeli Facebook</a></li> </div> </div> </div> <a href="#"> <div id="kembali"> <div id="icon"><</div> </div> </a> </center> </body> </html>
style.css
* {
margin:0;
padding:0;
}
header {
height: 60px;
background: #2f4f4f;
color: white;
}
header h1 {
text-align: center;
padding-top: 5px;
}
#content {
margin-top:50px;
}
#menu {
width:350px;
height:30px;
background:orangered;
border:1px solid orangered;
border-radius:10px 10px 0 0;
}
#menu li {
height:100%;
list-style:none;
float:left;
background:orangered;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#menu li a:visited {
background:white;
}
#menu li:first-child {
border-radius:10px 0 0 0;
}
#menu li a {
display:block;
text-decoration:none;
padding:5px 5px;
color:lawngreen;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#menu li:hover {
background:white;
}
#menu li a:hover {
color:black;
}
#link {
width:350px;
height:100px;
border:1px solid orangered;
border-radius:0 0 10px 10px;
overflow:hidden;
}
#link div {
margin-left:5px;
visibility:hidden;
opacity:0;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#link div li {
list-style:none;
text-align:left;
}
#link div li a {
text-decoration:none;
color:orangered;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
#link div li a:hover {
color:lawngreen;
}
#view:target,#like:target,#comment:target {
visibility:visible;
opacity:1;
}
#kembali {
width: 60px;
height: 60px;
position: fixed;
right: 10px;
bottom: 10px;
border-radius: 30px;
background: #2f4f4f;
}
#kembali:hover {
background: #7cfc00;
}
#kembali:hover #icon {
color: #4b0082;
}
#icon {
color: #7cfc00;
font-size: 50px;
margin-left: 10px;
}
0 komentar:
Posting Komentar