Bootstrap / Bootstrap 4 Navbar Menü Örnekleri

Bootstrap 4 Navbar Menü Örnekleri

Normal bootstrap 4 navabarı ile fare üzerine gelince açılan, yatayda tüm ekranı kaplayan ve zemininde siyah gölgesi olan menü örnek kodları.

Bootstrap 5.3.x

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mecit Çağan</title>
    <link rel="stylesheet" href="bootstrap-5.3.8-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome-free-7.2.0-web/css/all.min.css">
    <style>
        .altMenu{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: blue;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-block: 0.5rem;
            
            .altMenuEleman{
                width: 50px;
                height: 50px;
                background-color: yellow;
                border-radius: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                .altMenuElemanIcon{
                    font-size: 1.5rem;
                }
            }
        }

        .arkaPlanBulanik{
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://images2.alphacoders.com/925/925436.jpg");
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="bg-light pb-5">

    <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileOffcanvas">
        <div class="offcanvas-header bg-warning">
            <h5 class="offcanvas-title fw-bold">Mecit Çağan</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body p-3">

            <div class="input-group mb-4">
                <input type="text" class="form-control" placeholder="Ara...">
                <button class="btn btn-success">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>

            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2 border-bottom">
                <span class="fw-medium">Anasayfa</span>
            </a>
            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2 border-bottom">
                <span class="fw-medium">Hakkımda</span>
            </a>
            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2 border-bottom">
                <span class="fw-medium">Galeri</span>
            </a>
            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2 border-bottom">
                <span class="fw-medium">Videolar</span>
            </a>
            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2 border-bottom">
                <span class="fw-medium">Haberler</span>
            </a>
            <a href="#" class="d-flex align-items-center gap-3 text-decoration-none text-dark py-2">
                <span class="fw-medium">İletişim</span>
            </a>

        </div>
    </div>

    <div class="position-relative overflow-hidden" style="height:340px;">
            <div class="arkaPlanBulanik w-100 h-100 object-fit-cover">
            </div>
        <div class="position-absolute bottom-0 start-0 p-4 text-white">
            <h1 class="fw-bold mb-1 fs-2">Mecit Çağan</h1>
            <p class="mb-0 small opacity-75">Yazılımcı</p>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg bg-white shadow-sm sticky-top">
        <div class="container-fluid px-3">

            <a href="#" class="btn btn-warning fw-bold text-dark me-3 py-1 px-3 text-decoration-none">
                MECİT ÇAĞAN
            </a>

            <button
                class="navbar-toggler border-0 ms-auto d-lg-none"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#mobileOffcanvas">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse d-none d-lg-flex align-items-center">
                <ul class="navbar-nav me-auto mb-0">
                    <li class="nav-item">
                        <a class="nav-link active fw-medium" href="#">Anasayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-medium" href="#">Hakkımda</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle fw-medium" href="#" data-bs-toggle="dropdown">
                            Keşfet
                        </a>
                        <ul class="dropdown-menu border-0 shadow">
                            <li>
                                <a class="dropdown-item" href="#">
                                    Galeri
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">
                                    Videolar
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">
                                    Haberler
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="#">
                                   İletişim
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <div class="input-group" style="width:260px;">
                    <input type="search" class="form-control form-control-sm" placeholder="Ara...">
                    <button class="btn btn-success btn-sm">Ara</button>
                </div>
            </div>

        </div>
    </nav>

    <section class="py-5">
        <div class="container text-center">
            <h2 class="fw-bold mb-3">Mecit Çağan'ın Yazılımcılık Hikayesi</h2>
            <p class="text-muted mx-auto" style="max-width:620px;line-height:1.75;">
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                Küçük yaşlarda başlayan teknoloji merakı, zamanla yazılım geliştirmeye duyulan güçlü bir tutkuya dönüştü.
                İlk projelerini basit web sayfalarıyla oluşturan Mecit Çağan, zaman içerisinde frontend ve backend
                teknolojilerinde kendini geliştirerek modern web uygulamaları üretmeye odaklandı. Sürekli öğrenmeyi,
                üretmeyi ve yeni teknolojileri keşfetmeyi benimseyen bu yolculuk; bugün kullanıcı deneyimini merkeze alan,
                performanslı ve estetik projeler geliştirme hedefiyle devam ediyor.
                                                                         
            </p>

        </div>
    </section>

    <div class="altMenu">
        <a href="#" class="altMenuEleman" style="width:46px;height:46px;" title="Anasayfa">
            <i class="fa-solid fa-house altMenuElemanIcon"></i>
        </a>
        <a href="#" class="altMenuEleman" style="width:46px;height:46px;" title="Galeri">
            <i class="fa-regular fa-image altMenuElemanIcon"></i>
        </a>
        <a href="#" class="altMenuEleman" style="width:46px;height:46px;" title="Videolar">
            <i class="fa-solid fa-circle-play altMenuElemanIcon"></i>
        </a>
        <a href="#" class="altMenuEleman" title="Kaydedilenler">
            <i class="fa-solid fa-bookmark altMenuElemanIcon"></i>
        </a>
    </div>

    <script src="bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Normal Bootstrap4 Menülü NavBar

Bootstrap 4 Navbar Menü Örnekleri

Bootstrap4 NavBar Fare Üzerine Gelince Açılan Menü için yukardaki kodlara şunları eklemelisiniz.

Bootstrap 4 Navbar Menü Örnekleri Jquery:

$(document).ready(function() {
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
});

$( ".navbar .dropdown-menu" ).mouseleave(function() {
$(this).removeClass("show");
});
});

CSS:

/*iç boşluğu nav-itemden çıkarın ve havada asılı durması için biraz boşluk bırakın */
.navbar .nav-item {
padding:.5rem .5rem;
margin:0 .25rem;
}

.navbar .dropdown-menu {
/* nav-item yüksekliği */
top:45px;

}

/* fareyle üzerine gelindiğinde açılır menüyü gösterir */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
display:block;
visibility: visible;
opacity: 1;
}

Bootstrap4 Geniş Menülü NavBar

Bootstrap 4 Navbar Menü Örnekleri

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
< /.col-md-4 >
<div class="col-md-4">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>
< /.col-md-4 >
<div class="col-md-4">
<a href="">
<img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
</a>
<p class="text-white">Short image call to action</p>

</div>

</div>
</li>
</ul>
</div>
</nav>

CSS Kodları

/*iç boşluğu nav-itemden çıkarın ve havada asılı durması için biraz boşluk bırakın */
.navbar .nav-item {
padding: 0.5rem 0.5rem;
margin: 0 0.25rem;
}

.navbar .dropdown-menu {
/* nav-item yüksekliği */
top: 55px;

/*tam ekran menu*/
width: 100%;
left: 0;
right: 0;
}

/* fareyle üzerine gelindiğinde açılır menüyü gösterir */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown .dropdown-menu:hover {
display: block;
visibility: visible;
opacity: 1;
}

/* açılır menünün yatay olarak tüm ekranı kaplamasını sağlar */
.navbar .dropdown {
position: static;
}

Siyah Gölgeli Büyük Menü Örneği

Bootstrap 4 Navbar Menü Örnekleri

Yukardaki kodlara sadece en altta SiyahMenu divini ekliyoruz.

CSS Kodları:

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
padding: 0.5rem 0.5rem;
margin: 0 0.25rem;
}

.navbar .dropdown-menu {
/* height of nav-item */
top: 55px;

/*tam ekran menu*/
width: 100%;
left: 0;
right: 0;

}

/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown .dropdown-menu:hover {
display: block;
visibility: visible;
opacity: 1;
}

/* makes the dropdown full width */
.navbar .dropdown {
position: static;
}

.SiyahZemin {
width:100%;
height:100%;
background-color:rgba(0,0,0, 0.5);
z-index:1;
position:absolute;
left:0;
}

Jquery Kodları:

$(document).ready(function () {
// executes when HTML-Document is loaded and DOM is ready

// breakpoint and up
//$(window).resize(function(){
//if ($(window).width() >= 980){

// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
$(".SiyahZemin").toggleClass("d-none");
});

// hide the menu when the mouse leaves the dropdown
$(".navbar .dropdown-menu").mouseleave(function () {
$(this).removeClass("show");
$(".SiyahZemin").removeClass("d-none");
});

// do something here
//}
//});

// document ready
});

Herhangi bir CSS ve Javascript Eklentisi Olmadan Yapılabilen MegaMenü

Bootstrap 4 Navbar Menü Örnekleri

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul></div>
</nav>

Kaynaklar

https://www.codeply.com/go/0QHWWNsMyI

10,276 Okunma 07/05/2026.10:34:07 07/05/2026.13:34:27

/ Yorumunuzu Ekleyin

İsminiz

Email Adresiniz

Avatar

jpg, gif, png türündeki resimleri seçmelisiniz

Yorumuzu Yazınız

Bootstrap Takvim Seçtiricisi (Datetime Picker)

30,807 okuma, 30.11.2014 02:43

Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

26,402 okuma, 20.10.2024 23:15

Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

25,314 okuma, 07.03.2025 15:22

Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

23,723 okuma, 12.03.2026 11:29

Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

17,955 okuma, 17.04.2019 02:52

Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

15,039 okuma, 20.02.2017 23:06

Bootstrap 4 Class Referansı

8,163 okuma, 01.03.2019 04:40

Bootstrap 4 Yardımcı Kısa Kodlar

6,889 okuma, 04.06.2020 15:14

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Örnekteki uygulama ile Ekranı 4 eşit parçaya bölebilirsiniz.

6,611 okuma, 26.01.2020 17:43

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Bootstrap Kart (Card) Kullanımı

5,982 okuma, 02.04.2026 16:43

Bootstrap Tablo Örnekleri

5,234 okuma, 26.03.2026 13:23

Button Kullanımı

5,201 okuma, 02.04.2026 09:43

Kenarlık Sınıfı

4,835 okuma, 26.03.2026 16:02

Örnek Sayfa Tasarımları

4,491 okuma,

Uyarı (Alert) Mesajı Sınıf

Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renkle<br />rine sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşa<br />ğıdaki örnek kodlarda görülmektedir.

4,484 okuma, 28.02.2025 12:34