<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .navbar { border-radius: 0; } .navbar-inverse { background-color: #33587c; border-color: #33587c; } .navbar-inverse .navbar-nav>li>a { color: #ffffff; font-size:13px; font-family: 'Candara', sans-serif; transition: background-color 0.5s ease; } .navbar-nav > li > .dropdown-menu { font-size:13px; font-family: 'Candara', sans-serif; } .navbar-inverse .navbar-nav>li>a:hover { color: #33587c; background: #fff; } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover { color: #33587c; background-color: #ffffff; } .navbar-inverse .navbar-brand , .navbar-inverse .navbar-brand:hover{ color: #33587c; background:#ffffff; font-family: 'Candara', sans-serif; } @media (max-width: 767px){ .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #ffffff; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover { color: #33587c; background: #fff; } } .navbar-inverse .navbar-toggle { border-color: transparent; } .navbar-toggle { position: relative; float: right; padding: 6px 6px; margin-right: 5px; margin-top: 8px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 0px solid transparent; border-radius: 0; } .navbar-toggle .icon-bar { display: block; width: 27px; height: 4px; border-radius: 1px; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: #222; color:#33587c; } </style> <div class="container" style="margin-top:15px;"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"><span class="glyphicon glyphicon-book"></span> S9 BLOG</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-home"></span> ANASAYFA</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span> KATEGORİLER <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Asp Scriptler</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Css Dersleri</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Demolar</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Dosyalar</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Grafik Eğitimi</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Html Temalar</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Javascript Dersleri</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Php Scriptler</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Ücretsiz Scriptler</a></li> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> HAKKIMDA</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> İLETİŞİM</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle bg-primary" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> YÖNETİM <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Makale Yönetimi</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Yeni Makale Ekle</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Kategori Yönetimi</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Yeni Kategori Ekle</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Sayfa Yönetimi</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Yeni Sayfa Ekle</a></li> <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span> Site Ayarları</a></li> <li class="divider"></li> <li><a href="#"><span class="glyphicon glyphicon-off"></span> Çıkış yap</a></li> </ul> </li> </ul> </div> </div> </nav> </div> <script> /* Hover Dropdown Menü */ $(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); }); </script>