Bu tabloyu nasıl yapabilirim? |
9 Mesajlar | 1.552 Okunma | ||
- Üyelik 12.01.2016
- Yaş/Cinsiyet 34 / E
- Meslek webmaster
- Konum İstanbul Avrupa
- Ad Soyad M** Y**
- Mesajlar 82
- Beğeniler 6 / 3
- Ticaret 0, (%0)
Merhaba arkadaşlar https://www.cockettgroup.com/Tools bu sitede bulunan aşağıdaki "Marine Lubricants Equivalent Table" başlığının altında bulunan tabloyu wordpresste veya htmlde nasıl yapabilirim? Soldaki mavi başlıklara tıklayınca belirli kolonlardaki yazılar değişecek şekilde olacak.
- Üyelik 04.10.2014
- Yaş/Cinsiyet 32 / E
- Meslek Tasarımcı
- Konum Ankara
- Ad Soyad M** A**
- Mesajlar 791
- Beğeniler 96 / 374
- Ticaret 1, (%100)
- Üyelik 07.11.2013
- Yaş/Cinsiyet 37 / E
- Meslek bilgi işlem - yazılım destek
- Konum İstanbul Avrupa
- Ad Soyad H** K**
- Mesajlar 196
- Beğeniler 139 / 34
- Ticaret 0, (%0)
2 tane yan yana vertical tab kullanabilirsiniz.
- Üyelik 14.08.2019
- Yaş/Cinsiyet 26 / E
- Meslek Full-Stack Developer
- Konum İstanbul Avrupa
- Ad Soyad S** Ç**
- Mesajlar 518
- Beğeniler 1 / 188
- Ticaret 5, (%100)
Öbür tarafı içinde tam tersi olarak değiştirip css kodlarını bootstrap grid yapısı ile left right ayarlarsınız responsive olarak yapmış olursunuz
- Üyelik 04.10.2014
- Yaş/Cinsiyet 32 / E
- Meslek Tasarımcı
- Konum Ankara
- Ad Soyad M** A**
- Mesajlar 791
- Beğeniler 96 / 374
- Ticaret 1, (%100)
TEHET Hocam çok sağolun. Peki bunu wordpresste bir sayfaya ekleyebilirmiyim?
Kodları gerekli yerlere eklerseniz olur tabii ki.
- Üyelik 04.10.2014
- Yaş/Cinsiyet 32 / E
- Meslek Tasarımcı
- Konum Ankara
- Ad Soyad M** A**
- Mesajlar 791
- Beğeniler 96 / 374
- Ticaret 1, (%100)
TEHET şimdi html css ve javascript ayrı ayrı olduğu için wordpresste tek sayfaya nasıl ekleyebilirim?
SCSS kodunu CSS'e dönüştürmen lazım. Dönüştürülmüş halini ekledim aşağıya.
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.table {
display: flex;
justify-content: center;
}
.table li {
padding: 0.8em 1.5em;
width: 200px;
background: #ebf0f6;
}
.table ul {
list-style: none;
}
.table__menu {
margin-right: 1em;
}
.table__menu li {
cursor: pointer;
outline: 0;
font-weight: 700;
background: #364e68;
color: #fff;
}
.table__menu li[aria-selected='true'] {
background: #132238;
color: #fff;
}
.table__menu li[aria-selected='true']:hover {
color: #fff;
}
.table__menu li:hover {
color: #132238;
}
.table__panel div[aria-hidden='true']:not(:nth-child(1)) {
display: none;
}
.table__panel div li {
width: 300px;
}
.table__panel div li[aria-selected='true'] {
color: red;
}
.table__panel div li:nth-child(odd) {
background: #98ccd3;
}
Bu css kodlarını, kullandığın bir css dosyası varsa onun en altına ekleyebilirsin. Tabii gerekli ve fazladan kısımları kendine göre düzenlersin.
JS kodunun çalışması için jquery kütüphanesini kullanman gerekli. Zaten kullanıyorsan eğer; jquery kütüphanesinin altında olacak şekilde <script></script> tagları içine kodu eklersin. Genelde footer'a eklenir.
Jquery kütüphanesi kullanmıyorum diyorsan eğer;
Footer'a aşağıdaki şekilde ekleyebilirsin kodları.
<script></script>
<script>
$(function() {
$("li[role='tab']").on("click", function(){
$("li[role='tab']").attr("aria-selected","false");
$(this).attr("aria-selected","true");
var tabpanid= $(this).attr("aria-controls");
var tabpan = $("#"+tabpanid);
$("div[role='tabpanel']").attr("aria-hidden","true").hide();
tabpan.attr("aria-hidden","false").show();
});
});
</script>HTML kodunu da hangi sayfada göstermek istiyorsan oraya ekleyip gerekli kısımları düzeltip ekleme-çıkarma yaparsın.
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)