Home » » Cara Membuat TabIndex Menggunakan CSS3

Cara Membuat TabIndex Menggunakan CSS3

Written By Nurul Watoni on Rabu, 26 Maret 2014 | 18.50

css,css3,tabinde,tutorial,tips,pemrograman,html

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