CSS RESPONSIVE MENU (JQUERY KULLANMADAN)
20 Şubat 2021 01:52, Cumartesi 3021 0
Merhaba.
Bu derste JQUERY kullanmadan, sadece HTML ve CSS ile cihaz duyarlı (responsive) menü nasıl yapılır ondan bahsedeceğim. Hemen altta uygulamanın mobil görünümünü (bu uygulamada -768px) deneyebilirsiniz. Menünün diğer genişliklerdeki durumunu görmek için tarayıcıda aç butonuna tıklayabilir, yapım aşamalarını izlemek için video içerik bölümüne bakabilirsiniz.
Öncelikle logo ve menüyü içerecek olan bir div yaratıp .menu sınıfıyla biçimlendirdik. Logomuz için span etiketi kullandık. Menüyü klasik "ul li a" css biçimlendirmesiyle hazırladık. Menüyü 768px altında gizleyerek yerine bir ikon görünmesini sağladk. İkon için fontawesome 4 ikon kütüphanesindeki fa-bars ikonunu kullandık. Siz fontawesome son sürümü 5 versiyonunuda kullanabilirsiniz.
768px altında menüyü gizlemek için display:none yerine right:-100% özellik:değer biçimlendirmesiyle , menüyü ekranın sağından itibaren gizledik. İkona tıklayınca menünün right özelliğini 0 yaparak menünün ekranda görünmesini sağladık. Tabi menünün ekrana yayılması için 768px altında genişliğini 100% yaptık . Ayrıca menünün bir anda değilde animasyonlu bir şekilde ekranda görünebilmesi için menüye transition değeri uyguladık.
İkona tıklama kontrolü için , bir checkbox ekledik ve ikonun bu checkbox için label olmasını sağladık. Tıklama olayı için ise JQUERY yerine CSS check kontrolünü kullandık. Böylece sadece HTML-CSS ikilisiyle daha sade bir menü hazırlamış olduk.
Sizlerde benzer mantıkla farklı özelliklerde yada farklı biçimlerde responsive menüler hazırlayabilirsiniz.
HTML KODLARI
<!DOCTYPE html>
<html>
<head>
<title>CSS REPSONSIVE MENU </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ikonlar için bağlantı -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu">
<!-- MENÜ TIKLAMASI İÇİN KULLANACAĞIZ-->
<input type="checkbox" id="check" class="check">
<label for="check" class="menubuton"> <i class='fa fa-bars'></i> </label>
<!-- MENÜ TIKLAMASI İÇİN KULLANACAĞIZ-->
<span class="logo">WEB TASARIM</span>
<ul>
<li><a href="" class="active">ANASAYFA</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JAVASCRIPT</a></li>
</ul>
</div>
<div class="icerik">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zaman
</div>
</body>
</html>
CSS KODLARI
<style type="text/css">
body {
margin:0px;
padding: 0px;
color:#fff;
font-family:calibri;
}
.icerik {padding: 40px;margin:0px;color:#000;}
.menu {
font-size:30px;
background-color: #68acce;
padding: 10px;
margin:0px;
box-sizing: border-box;
width:100%;
}
.logo {
font-weight: bold;
margin-left:50px;
}
.menu ul {
list-style-type: none;
margin:0px;
padding: 0px;
float:right;
margin-right:50px;
transition: 500ms;
}
.menu ul li {display: inline}
.menu ul li a {
color:#fff;
font-size: 20px;
font-weight: bold;
padding: 5px 8px;
margin-right: 20px;
text-decoration:none;
}
.menu ul li a:hover,.menu ul li a.active {
color: #000;
}
.check {display: none;}
.menubuton {
float:right;
margin-right:20px;
display: none;
cursor:pointer;
}
@media (max-width: 768px) {
.menubuton{display: block; }
.menu ul {
width: 100%;
height: 100%;
position: fixed;
margin-right: 0px;
text-align:center;
background-color: #4682b4;
margin-top:7px;
right:-100%;
padding-top: 50px;
}
.menu ul li {display: block;padding: 5px 10px;}
.logo {margin-left:20px;}
/* input checked olduğunda..*/
#check:checked ~ ul {
right:0px;
}
#check:checked ~ .menubuton {
color:#000;
}
}
</style>
CODEOPEN
CSS RESPONSIVE MENU (JQUERY KULLANMADAN)
CSS İLE İSTİSNA TANıMLAMAK (:NOT())
CSS NEDİR ?
.jpg)