<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.navbar-dark .nav-item .nav-link {
color: #fff;
text-decoration: none; /* Link altı çizgisini kaldırma */
}
.navbar-dark .nav-item .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
border-radius: 0.25rem;
color: #fff;
}
.fa-li {
position: relative;
left: 0;
}
.navbar-brand {
margin-right: auto;
}
.custom-container {
padding-left: 15px; /* Tarayıcı sınırından 5 piksel sağa kaydırma */
padding-right: 15px; /* Tarayıcı sınırından 5 piksel sola kaydırma */
}
/* Mega menü stilleri */
.mega-menu {
position: absolute;
left: 0;
top: 100%;
width: 100%;
padding: 20px;
background-color: #343a40;
display: none;
transition: all 0.3s ease;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.mega-menu .row {
margin-bottom: 20px;
}
.mega-menu .col {
padding: 0 10px;
}
.menu-container {
border: 1px solid #555; /* Koyu renkli çerçeve */
border-radius: 5px; /* Kenar yuvarlaklığı */
padding: 10px; /* İçerik boşluğu */
transition: all 0.3s ease; /* Geçiş efekti */
}
.menu-container:hover {
border-color: #868686; /* Hover durumunda çerçeve rengi */
box-shadow: 0 8px 16px rgba(16, 15, 15, 0.375), inset 0 0 10px rgba(3, 3, 3, 0.375); /* Dış ve iç gölgelendirme */
}
.mega-menu .menu-title {
color: #fff;
font-weight: bold;
margin-bottom: 10px;
}
.mega-menu .menu-description {
color: #ccc;
margin-bottom: 5px; /* Boşluk azaltıldı */
font-size: 14px; /* Açıklama metni font boyutu küçültüldü */
}
.mega-menu .menu-item {
color: #ccc;
margin-bottom: 5px;
font-size: 15px; /* Alt menü font boyutu */
}
.mega-menu .menu-item a {
display: block; /* Itemleri blok element yaparak alt alta yerleştirme */
text-decoration: none; /* Link altı çizgisini kaldırma */
color: #ccc; /* Link rengi */
}
.mega-menu .menu-item a:hover {
color: #fff; /* Hover durumunda link rengi */
}
/* FontAwesome icon styling */
.fa-custom {
margin-right: 5px; /* İkon ve metin arası boşluk */
}
/* Hover effect for menu items */
.menu-item {
transition: all 0.3s ease;
}
.menu-item:hover {
background-color: rgba(245, 241, 241, 0.1);
border-radius: 0.25rem;
}
</style>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Container wrapper -->
<div class="container-fluid custom-container"> <!-- custom-container sınıfı ekledik -->
<!-- Navbar brand -->
<a class="navbar-brand me-0" href="#"><img id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" alt="MDB Logo"
draggable="false" height="30" /></a>
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left links -->
<ul class="navbar-nav me-3">
<li class="nav-item">
<a class="nav-link active d-flex align-items-center" aria-current="page" href="#"><i
class="fas fa-bars pe-2"></i>Menu</a>
<div class="mega-menu">
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Category 1 -->
<div class="menu-container">
<div class="menu-title">Category 1</div>
<div class="menu-description">Description 1</div>
<div class="menu-item"><a href="#"><i class="fas fa-star fa-custom"></i> Item 1</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-star fa-custom"></i> Item 2</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-star fa-custom"></i> Item 3</a></div>
</div>
</div>
<div class="col-md-3">
<!-- Category 2 -->
<div class="menu-container">
<div class="menu-title">Category 2</div>
<div class="menu-description">Description 2</div>
<div class="menu-item"><a href="#"><i class="fas fa-heart fa-custom"></i> Item 1</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-heart fa-custom"></i> Item 2</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-heart fa-custom"></i> Item 3</a></div>
</div>
</div>
<div class="col-md-3">
<!-- Category 3 -->
<div class="menu-container">
<div class="menu-title">Category 3</div>
<div class="menu-description">Description 3</div>
<div class="menu-item"><a href="#"><i class="fas fa-thumbs-up fa-custom"></i> Item 1</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-thumbs-up fa-custom"></i> Item 2</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-thumbs-up fa-custom"></i> Item 3</a></div>
</div>
</div>
<div class="col-md-3">
<!-- Category 4 -->
<div class="menu-container">
<div class="menu-title">Category 4</div>
<div class="menu-description">Description 4</div>
<div class="menu-item"><a href="#"><i class="fas fa-comment fa-custom"></i> Item 1</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-comment fa-custom"></i> Item 2</a></div>
<div class="menu-item"><a href="#"><i class="fas fa-comment fa-custom"></i> Item 3</a></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
<form class="d-flex align-items-center w-100 form-search">
<div class="input-group">
<button class="btn btn-light dropdown-toggle shadow-0" type="button" data-bs-toggle="dropdown"
aria-expanded="false" style="padding-bottom: 0.4rem;">
All
</button>
<ul class="dropdown-menu dropdown-menu-dark fa-ul">
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-search"></i></span>All</a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-film"></i></span>Titles</a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-tv"></i></span>TV
Episodes</a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-user-friends"></i></span>Celebs</a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-building"></i></span>Companies</a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-key"></i></span>Keywords</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#"><span class="fa-li pe-2"><i
class="fas fa-search-plus"></i></span>Advanced
search<i class="fas fa-chevron-right ps-2"></i></a>
</li>
</ul>
<input type="search" class="form-control" placeholder="Search" aria-label="Search" />
</div>
<a href="#!" class="text-white"><i class="fas fa-search ps-3"></i></a>
</form>
<ul class="navbar-nav ms-3">
<li class="nav-item me-3">
<a class="nav-link d-flex align-items-center" href="#!">IMDbPro</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#!">
<i class="fas fa-bookmark pe-2"></i> Watchlist
</a>
</li>
<li class="nav-item" style="width: 65px;">
<a class="nav-link d-flex align-items-center" href="#!">Sign In</a>
</li>
</ul>
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const megaMenu = document.querySelector(".mega-menu");
const menuToggle = document.querySelector(".nav-link.active");
let isMegaMenuOpen = false;
menuToggle.addEventListener("click", function(event) {
event.preventDefault();
if (!isMegaMenuOpen) {
megaMenu.style.display = "block";
isMegaMenuOpen = true;
} else {
megaMenu.style.display = "none";
isMegaMenuOpen = false;
}
});
document.addEventListener("click", function(event) {
const targetElement = event.target;
if (!targetElement.matches(".nav-link.active") && !targetElement.closest(".mega-menu")) {
megaMenu.style.display = "none";
isMegaMenuOpen = false;
}
});
});
</script>
</body>
</html>Merhaba, burada searchbox'ı bir türlü düzenleyemedim. mobile versiyona geçtiğinde imdb'nin sitesindeki gibi bir search ikonu oluşup bütün headeri nasıl searchbar ile kaplatabilirim ?
responsive searchbar sorusu
2
●76
- 21-02-2024, 02:21:43
- 22-02-2024, 19:29:20Bootstrap kullandığınız için ufak sıkıntıları var. Arama kutusu ve menü öğelerini ayrı ayrı nav içine alırsanız belki olabilir. Bu şekilde Bootstrap değerlerini alarak hareket ediyor. Arama kutusu formunu nav içinden çıkartırsanız logoyu da çıkartmak zorunda kalacaksınız, bu da başka bir sorun tabi. Eğer logo, arama kutusu ve menüyü 3 ayrı parçaya bölüp kullanmak isterseniz, bu sefer de mobil cihazlarda arama formunun kaybolması için display none olarak ayarlamanız gerekecek.
Arama ikonuna tıklandığında formun görünmesi için de böyle bir javascript kodu kullanmalısınız:
Bu javascript kodu çalıştırıldığında id="searchImdb" olan formu bulup içine style="display: block;" ekler. Sizin formda id="searchImdb" yok bu arada, eklemeniz gerekecek.
function openSearchImdb() { var loginModal = document.getElementById('searchImdb'); loginModal.style.display = 'block'; } function closeSearchImdb() { var loginModal = document.getElementById('searchImdb'); loginModal.style.display = 'none'; }Mobil cihazlarda display none olduğu için görünmeyen formu tekrar display block yapmak için de onclick="openSearchImdb()" kullanmanız gerekiyor html örneğindeki gibi. Yani html kodundaki spana basıldığında javascript kodu devreye girmiş oluyor. Kapatmak için de bu kodu X butonuna eklemeniz gerekiyor onclick="closeSearchImdb() "
<span class="searchbtn" onclick="openSearchImdb()"> <svg xmlns="http://www.w3.org/2000/svg" class="svgh fll br1" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path> </svg> </span>Bootstraptan pek anlamadığım için bootstrap dışında bir çözüm anlattım. Bootstrap ile de yapılabilir mutlaka, modal örnekleri var sonuçta.
