CSS ile geçişli menu yapımı

Aşağıdaki gibi yatay menü (horizontal-menu) tasarlamak isteyelim. 



Aşağıdaki gibi bir menu sınıfı(class) oluşturuyoruz. Bu sınıfta genişlik(width) değerini 150px ve yükseklik(height) değerini 30px olarak ayarlıyoruz. 

float: left ile sola hizalama işlemini yapıyoruz.

Yazı rengini color: #FFF ile beyaz renk olarak tanımlıyoruz.

padding: 12px 10px 12px 10px ile üstten 12px, sağdan 10px, alttan 12px ve soldan 10px şeklinde iç boşluk değerini tanımlıyoruz.

line-height: 30px ile satır yüksekliğini 30px olarak tanımlıyoruz, böylece yazılar dikeyde ortalanmış olacak.

text-align: center ile menüdeki yazıların ortalanmasını sağlıyoruz.

font-family: Arial ile yazı tipini Arial yazı tipine ayarlıyoruz.

font-size: 17px ile font büyüklüğünü 17 piksele ayarlıyoruz.

cursor:pointer ile fare imlecini el şekline getiriyoruz.

text-decoration: none ile linklerin altının çizilmesini iptal ediyoruz.

background: linear-gradient(180deg, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 100%);
ile zemin renk geçişini ayarlıyoruz. Renk geçisini ayarlamak için https://cssgradient.io/ web sitesinden yararlanarak renk tonlarını belirleyebilirsiniz.


.menu{
            width: 150px;
            height: 30px;
            float:left;
            color:#FFF;
            padding:12px 10px 12px 10px;
            line-height: 30px;
            text-align: center;
            font-family: Arial;
            font-size:17px;
            cursor:pointer;
            display: block;
            text-decoration: none;
            background: linear-gradient(180deg, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 100%);
        }

menünün üzerine gelince renk değişmesini hover ile yapıyoruz. Burada zemin rengini yine geçişli yaptık. 
 
        .menu:hover{
            background-color: rgb(117, 115, 115);
            background: linear-gradient(180deg,  rgba(0,212,255,1) 43%, rgba(9,9,121,1) 100%);
        }

active ile ilgili menü seçeneği aktif iken olması gerekenleri tanımlıyoruz.
 
        .active{
            background-color:  rgb(117, 115, 115);;
        }

menü linklerindeki (a href) yazı rengini aşağıdaki kodla beyaz renge çeviriyoruz.
        .menu a{
            color:white;
        }

 
HTML ve CSS kodların tamamı aşağıda verilmiştir. Bu kodları notepad gibi bir editöre kaydedip uzantısını html olarak kaydederek çalıştırabilirsiniz.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu{
            width: 150px;
            height: 30px;
            float:left;
            color:#FFF;
            padding:12px 10px 12px 10px;
            line-height: 30px;
            text-align: center;
            font-family: Arial;
            font-size:17px;
            cursor:pointer;
            display: block;
            text-decoration: none;
            background: linear-gradient(180deg, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 100%);
        }
        .menu:hover{
            background-color: rgb(117, 115, 115);
            background: linear-gradient(180deg,  rgba(0,212,255,1) 43%, rgba(9,9,121,1) 100%);
        }
        .active{
            background-color:  rgb(117, 115, 115);;
        }
        .menu a{
            color:white;
        }
    </style>
</head>
<body>
        <a href="index.html" class="menu active">Ana Sayfa</a>
        <a href="hakkimizda.html" class="menu">Hakkımızda</a>
        <a href="urunler.html" class="menu">Ürünler</a>
        <a href="iletisim.html" class="menu">İletişim</a>
</body>
</html>

Mutlu kodlamalar,
Oğuzhan TAŞ
Ekim, 2023
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale