Takip Edin

CSS

Fatura Siteleri İçin Açılır Menü Yapımı

Öncelikle menü listesini oluşturalım:

Not : EDIT ON CODEPEN yazısına tıklayarak kodlar üzerinde düzenlemeler yapabilirsiniz.

Listeyi menu-bar isimli class’a sahip bir div içerisine alalım ve bir arka plan resmi ekleyelim:

.menu-bar sınıfı aracılığıyla menüye arka plan rengi ekleyip liste stillerini düzenleyelim:

Menüler üzerinde gezindiğimizde menülerin arka plan rengini değiştirelim ve bu arka plan rengi, .active sınıfı üzerinden anasayfa menüsünün varsayılan arka plan rengi olsun:

Font Awesome‘dan menülere ikonlar ekleyelim:

Kurumsal menüsü için .sub-menu-1 sınıfına sahip olan bir div aracılığıyla bir alt menü oluşturalım:

Görüldüğü gibi bütün alt menü, yatay bir şekilde hizalanarak geldi.

Kurumsal menüsünün üzerinde gezindiğimiz anda alt menünün dikey olarak gözükmesini sağlamak için .sub-menu-1 sınıfının stilinde düzenlemeler yapalım:

Bu işlemi, yine sub-menu-1 sınıfı aracılığıyla diğer menüler için de gerçekleştirelim:

Hizmetlerimiz menüsüne ait Fatura Sorgulama ve Ödeme alt menüsüne bir ikon ekleyelim ve bu alt menüye .sub-menu-2 adlı sınıf aracılığıyla bir alt menü ekleyelim:

Fare imlecini Fatura Sorgulama ve Ödeme alt menüsünün üzerinde gezdirdiğimizde alt menülerin gelmesini sağlamak için .hover-me adlı sınıfı kullanalım:

Aynı işlemi(.sub-menu-2 ve .hover-me sınıflarını kullanarak) Bayilik Sistemi menüsüne ait Cihaz Çözümlerimiz adlı alt menü için de gerçekleştirelim:

Açılır menü uygulamasının son hali yukarıdaki gibidir.

Devamını oku

Popüler

error: Content is protected !!