Css Ve Javascript İle Kolay Mobil Uyumlu Menü (Responsive Menu)

Ana Sayfa
>
Html-Css, Javascript
>
Css Ve Javascript İle Kolay...

Hepinize Merhaba Arkadaşlar bugün her zaman olduğu gibi yeni bir makale ile sizlerle yine birlikte olmaktan mutluluk duyuyoruz. bugün css ve javascript kodlarını kullanarak basit animasyonsuz mobil uyumlu menü yapıyoruz javascript demişken endişeye mahal yok çünkü kullanacağımız kodlar oldukça basittir.

İşte Kodlarımız;

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.mobiluyumlumenu {
overflow: hidden;
background-color: #333;
}

.mobiluyumlumenu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.mobiluyumlumenu a:hover {
background-color: #ddd;
color: black;
}

.aktif {
background-color: #4CAF50;
color: white;
}

.mobiluyumlumenu .simge {
display: none;
}

@media screen and (max-width: 600px) {
.mobiluyumlumenu a:not(:first-child) {display: none;}
.mobiluyumlumenu a.simge {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.mobiluyumlumenu.responsive {position: relative;}
.mobiluyumlumenu.responsive .simge {
position: absolute;
right: 0;
top: 0;
}
.mobiluyumlumenu.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>

<div class=”mobiluyumlumenu” id=”benimmenum”>
<a href=”#” class=”aktif”>Ana Sayfa</a>
<a href=”#”>Hakkımızda</a>
<a href=”#”>İletişim</a>
<a href=”#”>Fiyatlar</a>
<a href=”javascript:void(0);” class=”simge” onclick=”menuacmafonksiyonu()”>
<i class=”fa fa-bars”></i>
</a>
</div>

</body>
</html>

Demo: https://www.w3schools.com/code/tryit.asp?filename=FX0EK6U6TH0K