yanyana kutu yardım

15.06.2018 18:08

halilturhan WM Aracı Kullanıcı

Üyelik 23.02.2016
Yaş/Cinsiyet 34 / E
Meslek askeri personel
Konum İstanbul Anadolu

Ad Soyad H** T**
Mesajlar 280
Beğeniler 106 / 105
Ticaret 0, (%0)

iyi bayramlar arkadaşlar ben html de resimde gördüğünüz gibi bişey yapmak istiyorum birtürlü yapamadım kafam almadı. 3 tane buton olacak ve içerikleri farklı olup aynı yerde açılacak

bebektos.com - Bebek Ürünleri Pazaryeri

15.06.2018 18:37

#2

WPZON Wordpress Temaları Kullanıcı

Üyelik 27.02.2016
Yaş/Cinsiyet 29 / E
Meslek Wordpress Tema Tasarım
Konum İstanbul Anadolu

Ad Soyad M** K**
Mesajlar 1446
Beğeniler 203 / 261
Ticaret 37, (%100)

Boostrap ile kolayca yapabilirsiniz,
https://getbootstrap.com/docs/4.1/components/list-group/
Buradan javascript behavior başlığı altında dediğinize benzer ama yan tarafta açılan tarzında var bunu üste uyarlayabilirsiniz mantık aynı

1 kişi bu mesajı beğendi.

15.06.2018 18:48

#3

halilturhan WM Aracı Kullanıcı

Üyelik 23.02.2016
Yaş/Cinsiyet 34 / E
Meslek askeri personel
Konum İstanbul Anadolu

Ad Soyad H** T**
Mesajlar 280
Beğeniler 106 / 105
Ticaret 0, (%0)

MuratKa teşekkür ederim söylediğinizi buraya yazmadan önce denedim ama kafa durdu resmen olmuyor heralde dedim attım ama siz böyle deyince tekrar deneyecem.demekki oluyomuş söylediğinize göre

bebektos.com - Bebek Ürünleri Pazaryeri

15.06.2018 19:02

#4

carasar All ızz well... Kullanıcı

Üyelik 29.10.2016
Yaş/Cinsiyet 32 / E
Meslek Öğretmen
Konum Konya

Ad Soyad O** K**
Mesajlar 1116
Beğeniler 499 / 498
Ticaret 16, (%100)

halilturhan hocam;

Html Kodu




  
  
    About

    Team

    Privacy

    Advertise

    Contact

  

  
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ex optio molestiae deleniti accusantium nobis hic, quia, quaerat ipsa numquam, eius expedita odit earum. Dolores dolore iusto est earum praesentium?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sit, velit mollitia pariatur laudantium officia, fugit neque eligendi saepe sint ea! Debitis aperiam nulla voluptatem libero fuga a, veniam amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi magnam porro iure fugiat repellendus iusto aperiam ducimus laudantium alias omnis maiores beatae veniam debitis voluptatibus asperiores, voluptates nostrum nihil quae?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur excepturi, amet voluptatibus quibusdam assumenda adipisci, quidem ipsa necessitatibus, fugit repellat nam sequi ducimus recusandae id illo? Unde necessitatibus repellat, modi?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cupiditate dignissimos quae aspernatur, ex hic, voluptatibus excepturi officia velit dolorum fugiat nam nostrum earum maiores praesentium nemo nobis eaque officiis.

CSS Kodu


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
$base-font: 'Open Sans', sans-serif;

$bgc:#4c607c;
$tabc:#b2bbc0;
$fontc:#596165;
$tabfontc:white;

$tabwidth:650px;


body{
  background-color: $bgc;
  height:100%;
  font-family: $base-font;
  font-size: 16px;
  line-height:1.5;
}

.tab-block{
  width:$tabwidth;
  height:290px;
  margin:50px auto;
  .tab-mnu{
    display:block;
    list-style:none;
    &:after{
      content:'';
      display:table;
      clear:both;
    }
    li{
      box-sizing:border-box;
      float:left;
      background-color: $tabc;
      color:$tabfontc;
      width:$tabwidth/5;
      text-align:center;
      padding-top:13px;
      padding-bottom:13px;
      cursor:pointer;
      &:not(:last-child){
        border-right:1px solid $bgc;
      }
      &:hover:not(.active){
        background-color: lighten($tabc,5%);
      }
    }
    .active{
        background-color: #fff;
        color:$fontc;
        border-bottom:1px solid lighten($fontc,55%);
      cursor:default;
      }
  }
  
  .tab-cont{
    box-sizing:border-box;
    border-top:1px solid white;
    background-color:$tabfontc;
    color:darken($fontc,20%);
    .tab-pane{
      padding:20px 25px;
    }
  }
    
}

JS Kodu


$(document).ready(function(){
  
  var tabWrapper = $('#tab-block'),
      tabMnu = tabWrapper.find('.tab-mnu  li'),
      tabContent = tabWrapper.find('.tab-cont > .tab-pane');
  
  tabContent.not(':first-child').hide();
  
  tabMnu.each(function(i){
    $(this).attr('data-tab','tab'+i);
  });
  tabContent.each(function(i){
    $(this).attr('data-tab','tab'+i);
  });
  
  tabMnu.click(function(){
    var tabData = $(this).data('tab');
    tabWrapper.find(tabContent).hide();
    tabWrapper.find(tabContent).filter('[data-tab='+tabData+']').show(); 
  });
  
  $('.tab-mnu > li').click(function(){
    var before = $('.tab-mnu li.active');
    before.removeClass('active');
    $(this).addClass('active');
   });
  
});

Kaynak:

https://codepen.io/VoloshchenkoAl/pen/dMWxoL

1 kişi bu mesajı beğendi.

15.06.2018 19:05

#5

halilturhan WM Aracı Kullanıcı

Üyelik 23.02.2016
Yaş/Cinsiyet 34 / E
Meslek askeri personel
Konum İstanbul Anadolu

Ad Soyad H** T**
Mesajlar 280
Beğeniler 106 / 105
Ticaret 0, (%0)

carasar Çok teşekkür ederim

bebektos.com - Bebek Ürünleri Pazaryeri

16.06.2018 18:00

#6

BugraGulay <?php echo"It's Life"; ?> Kullanıcı

Üyelik 11.10.2015
Yaş/Cinsiyet 28 / E
Meslek Web Developer/Bilgisayar Müh.
Konum Ankara

Ad Soyad B** G**
Mesajlar 477
Beğeniler 34 / 135
Ticaret 7, (%100)

Genel olarak bu tarz işlemlerde takıldığın noktalarda yada kendini geliştirmek istiyorsan bunun için bu linki detaylıca inceleyebilirsiniz size faydası olacağına eminim :)

İyi çalışmalar

1 kişi bu mesajı beğendi.

16.06.2018 19:52

#7

halilturhan WM Aracı Kullanıcı

Üyelik 23.02.2016
Yaş/Cinsiyet 34 / E
Meslek askeri personel
Konum İstanbul Anadolu

Ad Soyad H** T**
Mesajlar 280
Beğeniler 106 / 105
Ticaret 0, (%0)

BugraGulay bazen bende burdan yardım alıyorum ama istediğim şeyi bulamıyorum herşey olmasına rağmen mesela ismini bilmiyorum yapacağım şeyin.

bebektos.com - Bebek Ürünleri Pazaryeri

yanyana kutu yardım

Üye Girişi Yap