Merhabalar,
Bu başlık altında siteye sabit yapışkan alan ekleme ve o alanı nasıl özelleştireceğimizi işleyeceğiz. Çoğu sitede ihtiyaç duyulan bir durum haline geliyor. Çalışmamız teklif al, arama yapma ve whatsapp’a yönlendiren butonlardan oluşan masaüstünde dikey mobilde yatay bir bar oluşturmak olacak.
HTML Kodumuzu oluşturalım;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Sabit Konumlandırma</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sag-icon-bar">
<ul>
<li class="s1"><a href="https://wa.me/1XXXXXXXXXX" target="_blank"><i class="fa fa-whatsapp"></i></a></li>
<li class="s2"><a href="tel:1XXXXXXXXXX"><i class="fa fa-phone"></i></a></li>
<li class="s3"><a href="/iletisim.html"><i class="fa fa-compass"></i> Teklif Al</a></li>
</ul>
</div>
</body>
</html> Kodumuza <head> etiketi arasında FontAwesome v4.7.0 ve kendi style.css dosyamızı çağırıyoruz. <li> etiketleri içerisinde Whatsapp ve arama için 1xxxx ile başlayan alanlara istediğiniz telefon numarasını yazıp son teklif al butonu href=” ” içine yönlendirmek istediğiniz sayfayı yazabilirsiniz.
HTML kısmı bu kadar şimdi sıra işe görsellik katmakta. CSS dosyamızı oluşturup içini şu şekilde dolduruyoruz;
style.css
@import "https://fonts.googleapis.com/css?family=Roboto:500";
.sag-icon-bar{position:fixed;top:30%;right:0;width:50px;font-family: 'Roboto', 'sans-serif';z-index:99;}
.sag-icon-bar ul {list-style-type: none;margin: 0;padding: 0;display:flex;flex-direction:column}
.sag-icon-bar ul li{padding:10px}
.sag-icon-bar ul li.s1{background:#2db842;border-radius:10px 0 0 0}
.sag-icon-bar ul li.s2{background:#232323}
.sag-icon-bar ul li.s3{width:200px;line-height:35px;background:#fe9301;border-radius:10px 0 0 0;letter-spacing:1px;
font-size:22px;font-weight:500;transform:rotate(-90deg) translateX(-100%);transform-origin:0 0;}
.sag-icon-bar ul li.s1:hover{background:#25c73d}
.sag-icon-bar ul li.s2:hover{background:#383838}
.sag-icon-bar ul li.s3:hover{background:#e08100}
.sag-icon-bar ul li a{color:#fff;display: flex;align-items: center;justify-content: center;text-decoration:none}
.sag-icon-bar ul li a i{font-size:24px;color:#fff}
.sag-icon-bar ul li.s3 a i{margin-right:5px}
@media only screen and (max-width: 560px) {
.sag-icon-bar{top:auto;bottom:0;width:100%}
.sag-icon-bar ul {flex-direction:row}
.sag-icon-bar ul li.s1{width:25%;border-radius:0}
.sag-icon-bar ul li.s2{width:25%}
.sag-icon-bar ul li.s3{font-size:18px;border-radius:0;line-height:23px;width:50%;transform:unset}
}- Öncelikle Roboto fontunu çağırıyoruz ve tanıtıyoruz bar içine.
- Sabitlik için kapsayıcı div’e verilen position değerini gördük. Fixed seçtiğimiz elemente sabitlik özelliği verir.
- top, bottom, right, left değerleriyle yukarıdan aşağıdan, sağdan soldan px veya % gibi değerler verip belirttiğimiz değer kadar boşluk verebiliriz. Sağdan 0 boşluk verip sağa yaslama yukarıdan yüzde 30 kadar boşluk verilmiştir.
- Teklif Al metnini döndürmek için .rotate_text class’ına verilen transform özelliklerine de göz atabilirsiniz.
- @media niteliği sonrası mobilde yatay hale konumlandırma ve döndürülmüş metni normal hale çeviriyiyoruz
- Son olarak display:flex özellikleri ile masaüstünde alt alta flex-direction:column mobilde ise yan yana flex-direction:row sayesinde kolaylıkla yapılmıştır.
Bilmeniz gereken önemli detayları olabildiğince paylaştım. HTML ve CSS kodlarını kendi sitenize entegre ederek kolaylıkla kullanabilirsiniz. Genellikle diğer işlemler font boyutu, arkaplan renkleri ve hover işlemleridir. Kafanıza takılan bir şey varsa yorum yapmayı unutmayınız.
Projenin tam hali codepen hesabımda bulunmaktadır aşağıdan da ön izlemesini inceleyebilirsiniz.
See the Pen
Get Offer Icon Bar Responsive by Furkan Giray (@furkangiray)
on CodePen.
Mutlu Kodlamalar 🙂
