Sadece HTML ve CSS ile sekmeli içerik yapımı

Berkay Davas · 8 Nisan 2021

Geçenlerde JS ile yaptığım örneğin bir de Pure CSS ile yapılmış örneğini paylaşıyorum.

Demo:

JSFiddle:

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

300319 · 8 Nisan 2021

Berkay Davas dedi:
Geçenlerde JS ile yaptığım örneğin bir de Pure CSS ile yapılmış örneğini paylaşıyorum.

Demo:

Pure CSS Tabs

JSFiddle:

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

Gayet stabil çalışıyor. Elinize sağlık.

Tek gereken şey tıklanan sayfanın Tab Pages sekmesine user-select:none değeri vermek lazım. 2 defa tıklayınca seçiyor yazıyı.

Berkay Davas · 8 Nisan 2021

300319 dedi:
Tek gereken şey tıklanan sayfanın Tab Pages sekmesine user-select:none değeri vermek lazım. 2 defa tıklayınca seçiyor yazıyı.

Seçmesinde bir sakınca yok ki. Neden seçmesin?

300319 · 8 Nisan 2021

Berkay Davas dedi:
Seçmesinde bir sakınca yok ki. Neden seçmesin?

Hocam demek istediğim şey şu;

Berkay Davas · 8 Nisan 2021

300319 dedi:
Hocam demek istediğim şey şu;

Eki Görüntüle 963337

Tamam, bir sakınca yok. Belki başlığı kopyalayarak insanlar

Bu bir sıkıntı değil. Sen açık bulmak için hızlıca 2 kere tıkladığından dolayı öyle olmuş. Normal kullanımda kullanıcıyı rahatsız edecek bir şey değil bu.

300319 · 8 Nisan 2021

Berkay Davas dedi:
Tamam, bir sakınca yok. Belki başlığı kopyalayarak insanlar

Bu bir sıkıntı değil. Sen açık bulmak için hızlıca 2 kere tıkladığından dolayı öyle olmuş. Normal kullanımda kullanıcıyı rahatsız edecek bir şey değil bu.

Hızlıca baktım evet .

Ama temiz duruyor tekrar elinize sağlık .

Arch or Not · 8 Nisan 2021

Berkay Davas dedi:
Geçenlerde JS ile yaptığım örneğin bir de Pure CSS ile yapılmış örneğini paylaşıyorum.

Demo:

Pure CSS Tabs

JSFiddle:

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

Elinize sağlık hocam güzel bir örnek olmuş.

FsneSuyu · 8 Nisan 2021

Güzel olmuş.

muratsal · 8 Nisan 2021

Güzel olmuş.
Tab geçişinde height değişirken transition olsa daha da iyi olur.

LastPlayer · 8 Nisan 2021

Elinize sağlık hocam çok güzel olmuş.

Hocam konumumu ne yapacaksınız

Sadece HTML ve CSS ile sekmeli içerik yapımı

Berkay Davas

Gigapat

Edit fiddle - JSFiddle - Code Playground

300319

Zettapat

Edit fiddle - JSFiddle - Code Playground

Berkay Davas

Gigapat

300319

Zettapat

Berkay Davas

Gigapat

300319

Zettapat

Arch or Not

Hectopat

Edit fiddle - JSFiddle - Code Playground

FsneSuyu

Hectopat

muratsal

Centipat

LastPlayer

Kilopat