Responsive Menü Oluşturma Kodu: Modern ve Kullanıcı Dostu Tasarım
Responsive menü oluşturma kodu ile mobil uyumlu, modern ve kullanıcı dostu tasarımlar yapın. Kod örnekleri ve detaylı rehber burada!
2025-01-03 20:39:32 - Poyraz Şahin
Responsive Menü Nedir ve Neden Önemlidir?
Responsive menü, farklı ekran boyutlarına uyum sağlayarak kullanıcı deneyimini geliştiren bir navigasyon tasarımıdır. Masaüstü, tablet ve mobil cihazlarda kusursuz bir şekilde çalışan menüler, modern web tasarımının olmazsa olmaz bir parçasıdır.
Dijital çağda, kullanıcıların büyük bir kısmı mobil cihazlar üzerinden internete erişiyor. Bu nedenle, menülerin her cihazda kolayca kullanılabilir olması büyük önem taşır. Responsive menüler, kullanıcıların içeriğe erişimini kolaylaştırırken, tasarımın estetik ve işlevselliğini korumasını sağlar.
SEO açısından da responsive tasarım büyük bir avantaj sunar. Google, mobil uyumlu siteleri sıralamalarda önceliklendirir. Bu nedenle, responsive menü kodları, hem kullanıcı deneyimini hem de arama motoru sıralamalarınızı iyileştirebilir.
Responsive Menü Tasarımının Avantajları
Responsive menüler, sadece estetik açıdan değil, işlevsellik açısından da birçok fayda sunar. İşte en önemli avantajları:
1. Mobil Uyumluluk:
Responsive menüler, her ekran boyutuna uyum sağlar. Mobil cihazlarda kullanılabilirliği artırarak kullanıcıların siteyi daha verimli bir şekilde gezmesine olanak tanır.
2. Kullanıcı Deneyimini İyileştirir:
Karmaşık ve kullanımı zor menüler, kullanıcıların siteyi terk etmesine yol açabilir. Responsive menüler, basit ve sezgisel bir yapı sunarak kullanıcı memnuniyetini artırır.
3. SEO Performansını Artırır:
Mobil uyumlu bir site, Google'ın sıralama kriterlerinden biridir. Responsive menüler, sitenizin mobil uyumluluğunu artırarak SEO performansına doğrudan katkı sağlar.
4. Esneklik ve Tasarım Uyumu:
CSS ve JavaScript kullanarak menülerinizi tamamen özelleştirebilir, markanızın kimliğine uygun hale getirebilirsiniz.
Responsive Menü Oluşturma Kodu: Temel Yapı
Responsive menüler için HTML, CSS ve JavaScript kullanılarak basit ama etkili bir tasarım oluşturulabilir. İşte temel bir örnek:
HTML Kodu:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Menü</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="navbar"> <div class="logo">Logo</div> <ul class="menu"> <li><a href="#home">Anasayfa</a></li> <li><a href="#about">Hakkında</a></li> <li><a href="#services">Hizmetler</a></li> <li><a href="#contact">İletişim</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </nav> <script src="script.js"></script> </body> </html>
CSS Kodu:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin: 0 15px;
}
.menu a {
text-decoration: none;
color: white;
transition: color 0.3s;
}
.menu a:hover {
color: #00bcd4;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
background-color: white;
height: 3px;
width: 25px;
margin: 3px 0;
}
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
background-color: #333;
position: absolute;
top: 50px;
right: 20px;
width: 200px;
padding: 10px;
border-radius: 5px;
}
.menu.active {
display: flex;
}
.hamburger {
display: flex;
}
}
JavaScript Kodu:
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".menu").classList.toggle("active");
});
Bu kodlar, masaüstü ve mobil cihazlarda sorunsuz çalışan bir responsive menü oluşturmanıza yardımcı olur.
Yukarıdaki kodlar basit bir tasarım için geçerlidir, aşağıda daha profesyonel olarak hazırlanmış bir menü ve menüye ait kodların hazır dosyalarını test edip indirebilirsiniz.
index.html dosyasının içerisine aşağıda yer alan kodları ekleyiniz. Bu kodlar üst kısımda gördüğünüz görsele aittir.
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Sidebar Menu | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus icon'></i>
<div class="logo_name">CodingLab</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat' ></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder' ></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt' ></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</div>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
</body>
</html>
Aşağıda yer alan kodları ise style.css dosyasının içerisine ekleyiniz.
/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #11101D;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #11101d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
@media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
Bu kodların demosunu incelemek için buraya tıklayınız, kodları indirmek için buraya tıklayınız.
Responsive Menü Tasarımında Dikkat Edilmesi Gerekenler
Responsive menü tasarlarken şu noktalara dikkat edilmelidir:
1. Basitlik:
Menünün tasarımı kullanıcıyı yönlendirecek şekilde olmalıdır. Karmaşık yapı, kullanıcıların kafa karışıklığı yaşamasına neden olabilir.
2. Erişilebilirlik:
Menüdeki tüm öğeler, ekran okuyucular ve diğer erişilebilirlik araçları tarafından okunabilir olmalıdır.
3. Hız:
Menü animasyonları ve etkileşimleri hızlı olmalı, kullanıcıların bekleme süresini minimuma indirmelidir.
4. Test Edilebilirlik:
Farklı cihazlarda menü tasarımının test edilmesi, uyumluluk sorunlarını önler.
Sıkça Sorulan Sorular (SSS)
Responsive menü nedir?
Responsive menü, farklı ekran boyutlarına uyum sağlayan ve kullanıcı deneyimini geliştiren bir navigasyon tasarımıdır.
Responsive menü için hangi teknolojiler kullanılır?
HTML, CSS ve JavaScript gibi temel web teknolojileri kullanılarak responsive menüler tasarlanabilir.
Responsive menü SEO’ya nasıl katkı sağlar?
Mobil uyumlu menüler, kullanıcı deneyimini iyileştirerek SEO sıralamalarını olumlu etkiler.
Responsive menü tasarımı için en iyi pratikler nelerdir?
Basitlik, erişilebilirlik ve cihaz uyumluluğu, başarılı bir responsive menü tasarımı için kritik unsurlardır.
Menü tasarımında JavaScript şart mı?
Basit tasarımlar için şart değildir, ancak dinamik özellikler eklemek için JavaScript kullanabilirsiniz.
Responsive menü oluşturma, modern web tasarımının temel taşlarından biridir. Mobil uyumluluğun önem kazandığı bu dönemde, basit ve kullanıcı dostu menüler oluşturmak, hem kullanıcı deneyimini iyileştirir hem de SEO performansınıza katkı sağlar. Yukarıda verilen kod örnekleri ve ipuçlarıyla, işletmenizin veya projenizin ihtiyaçlarına uygun profesyonel bir menü tasarlayabilirsiniz.
Hemen bu tasarımı hayata geçirin ve kullanıcılarınıza etkileyici bir deneyim sunun!