<!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 ?