Material Tasarımlı Tablo

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
body{    
    margin: 0;
    padding: 0;    
    background-color: #fafafa;
}

nav{
    background-color: #FFC107;    
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
}

.nav{
    height: auto;    
    padding: 20px 10px 0px 10px;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

p, h1{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

h2{
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #fff;
    margin: 0;
    margin-bottom: 20px;
}

ul{
    width: 300px;
    display: flex;    
    margin: 0;
    padding: 0;
    z-index: -1;
    margin-bottom: -3px;
}

li{
    cursor: pointer;
    width: 50px;
    font-family: 'Roboto', sans-serif;    
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    float: left;
    list-style-type: none;
    padding: 15px 25px 15px 25px;
    text-align: center;
}

.current{
    color: #fff;
    padding-bottom: 5px;
    /*border-bottom: 3px solid #fff;*/
}

#tab_strip{
    background-color: #fff;
    width: 100px;
    height: 3px;
    transition-duration: 0.3s;
}

.container{
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: auto;
}

#tab_1{
    display: block;
    padding: 8px;
}

#tab_2{
    display: none;
    padding: 8px;
}

#tab_3{
    display: none;
    padding: 8px;
}    
</style>
</head>
<body>
<nav>
<div class="nav">
<h2>Material Tasarımlı Tablo</h2>    
<ul>
<li id="1" class="current" onclick="tabsOnClick('1')">TAB 1</li>
<li id="2" onclick="tabsOnClick('2')">TAB 2</li>
<li id="3" onclick="tabsOnClick('3')">TAB 3</li>
</ul>
<div id="tab_strip"></div>
</div>
</nav>
<section class="container">
<div id="tab_1">
<h1>Tab 1</h1>
<p>
Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.
<br><br>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div id="tab_2">
<h1>Tab 2</h1>
<p>
Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.
<br><br>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
<div id="tab_3">
<h1>Tab 3</h1>
<p>
Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.
<br><br>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</p>
</div>
</section>
<script type='text/javascript'>
var l_tab = 1;
var max;

function tabsOnClick(id){
    var li = document.getElementById(id);
    var div = document.getElementById('tab_'+id);
    var tab_strip = document.getElementById('tab_strip');

for(var i=1; i<=3; i++){
document.getElementById(i).className = '';
document.getElementById("tab_"+i).style.display = "none";
    }
    if(l_tab>id){
max = l_tab;
var displacement = (max - id) * 100;
    }
    else{
max = id;
var displacement = (max - l_tab) * 100;
    }

tab_strip.style.transform = "translateX("+displacement+"px)";

li.className += 'current';    
    li.style.className += "ripple";
    div.style.display = "block";    
}
</script>
</body>
</html>

Kodeks Editör

Material Tasarımlı Tablo

"Material Tasarımlı Tablo" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Material Tasarımlı Tablo

"Material Tasarımlı Tablo" 0 Yorum yapıldı.

Yorum Gönder