Bugün Html ve Css kodları yazarak yan menü butonlarını nasıl yapabileceğimizi göstereceğim.
⇒ Tasarımımızda ikonlar için Fontawesome‘ı CDN olarak ekliyoruz.
Fontawesome’ın son sürümünü CDN olarak kullanabilmek için sitesinden kayıt olup sonrasında gerekli CDN kodunu alabiliyoruz.
Siz de kayıt olup sizin için oluşturulan CDN kodunu sayfanıza eklemelisiniz.
|
1 2 3 |
<script src="https://kit.fontawesome.com/sizin-id-niz-gelecek.js" crossorigin="anonymous"></script> |
Örneğimizin son hali aşağıdaki gibi olacak.
Kodlarımızı yazarken Css özelliklerinden transition ve position gibi özellikleri kullanıyoruz. Bu özellikler ile ilgili eksikleriniz varsa aşağıdaki linklerden konu anlatımlarına bakabilirsiniz.
Artık kodlarımızı yazmaya başlayabiliriz.
Html ve Css ile Yan Menü Butonları Yapımı
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Html ve Css ile Yan Menü Butonları Yapımı</title> </head> <body> <div id="my-side-nav"> <a href="#" id="home"><i class="fas fa-home"></i>Anasayfa</a> <a href="#" id="about"><i class="fas fa-user"></i>Hakkımda</a> <a href="#" id="services"><i class="fas fa-th-large"></i>Hizmetler</a> <a href="#" id="blog"><i class="fas fa-pencil-alt"></i>Blog</a> <a href="#" id="contact"><i class="far fa-envelope"></i>İletişim</a> </div> <script src="https://kit.fontawesome.com/sizin-id-niz-gelecek.js" crossorigin="anonymous"></script> </body> </html> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style> #my-side-nav a { position: absolute; left: -130px; transition: 0.3s; padding: 15px; width: 135px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #my-side-nav a:hover { left: 0; } #home { top: 20px; background-color: #79A7A8; } #about { top: 80px; background-color: #F59914; } #services { top: 200px; background-color: #4CAF50; } #blog { top: 140px; background-color: #2196F3; } #contact { top: 260px; background-color: #555; } .fas, .far { margin-right: 5px; } </style> |
Umarım “Html ve Css ile Yan Menü Butonları Yapımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Yeni bir yazımda görüşmek üzere.
Mukemmel bir site.. Yazilim ogrenmeye yeni basladim HTML ve CSS videolari izledim ama bu sitede yazili olarak okuduklarimin cok fazla artisi oldu. Yapanin emegine saglik. Keske udemy gibi yerlerde bunlarin tamamini videolu olarak anlatmis olsaniz. Eger videolu anlatimlar varsa sitede bunlara ulasabilecegimiz link paylasirsaniz sevinirim. Varsa da internette aradim ama bulamadim. Gercekten bu verimli bilgiler icin cok cok tesekkurler..
Yorumunuz için teşekkür ederim. Yazılarımın sizin için faydalı olmasına sevindim. Şuan video çekimi için zaman ayıramıyorum ama ilerleyen zamanlarda düşünüyorum tabiki. Takipte kalmanız dileğiyle 😉