<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container myContent" style="font-family: 'Strait', sans-serif;"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="landing_page.html">Company name</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- <a class="btn btn-primary navbar-btn pull-right" href="#" role="button">Sign up</a> --> </div> <div class="btn-group pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Customer area <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div id="nav-menu" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href="#about">About</a></li> <li><a href="#features">Features</a></li> <li><a id="pricing" href="#pricing">Pricing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </nav> <!-- içerik bitiş --> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-g soltaraf"><!-- sol taraf başlangıç --> <div class="featured-article"> <a href="#" id="manset_url"> <img style="border-radius:5px;margin:1px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjownIXRmM6dJ7Icr-XYwqVVXN0buvuvsqrDWF5msZmJYYK8xSF8BuhZ-RPcn8Nf07em1Q5VZd6mUzJ4E63I7kZs9OA3RUo3f926a2uQMa3plHTPbAfEE7wXOX6KD8balgpzMhknYOLP7SsocU93CMdvFY5_zFlrt1Qyc-gGfvu1eclLsnLX2W9TpnPnWOZ/s1600/obphaber.jpg" width="100%"/> <div class="block-title"> <h2 id="manset_h2" style="color:#910910">.</h2> </div> </a> </div> <h3 style="color:#000" id="description">Text</h3> <div class="row"> <div class="col-xs-6 col-md-6 col-sm-6" style="border-right-style:solid;border-width: 1px;"> <strong><input style="border-color:#00575A;" id="alan1" name="alan1" class="form-control input-lg" placeholder="value 1" required=""></strong> </div> <div class="col-xs-6 col-md-6 col-sm-6"> <strong><input style="border-color:#80008A;" id="alan2" name="alan2" class="form-control input-lg" placeholder="value 2"></strong> </div> </div> <br><br> <button id="togle" class="btn btn-lg btn-primary">Tıkla</button> </div><!-- sol taraf bitiş --> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-g sagtaraf"><!-- sağ taraf başlanıç --> <h1>Mehmet</h1> </div><!-- sağ taraf bitiş --> </div> </div>

/* Sizin CSS'iniz */ nav .btn-group { margin: 0.8rem 2rem 0 0; } @media(max-width: 48em){ nav .btn-group { position: absolute; top: 0; right: 4em; } } #nav-menu { margin-right: 1rem; } .myContent { margin-top: 60px; } .hidden-element { display: none; } .navbar-default { background-color: #FFBE52 !important; } a.navbar-brand { color: #000 !important; } #nav-menu ul li a { color: #000 !important; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle { background-color: #337AB7; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #214E75; } .navbar-default .navbar-toggle { border-color: #214E75; } /* Yeni eklenen CSS kodu */ /* Menü açıldığında scrollbar'ı kaldırmak için */ .navbar-collapse.in { overflow-y: visible; max-height: none !important; }

$(document).ready(function() { //-- navbar click $('#nav-menu a').on('click', function() { if ($('.navbar-toggle').is(':visible')) { $('.navbar-collapse').collapse('hide'); } }); //--- click bitiş // Herhangi bir yere tıklandığında menüyü kapatma $(document).on('click', function (event) { const navMenu = $('#nav-menu'); const navToggle = $('.navbar-toggle'); // Tıklanan eleman menünün veya toggle butonunun içinde değilse menüyü kapat if (!navMenu.is(event.target) && navMenu.has(event.target).length === 0 && !navToggle.is(event.target) && navToggle.has(event.target).length === 0) { if (navMenu.hasClass('in')) { navMenu.collapse('hide'); } } }); function bolum1(text) { $("#description").text(text).css("color","red"); } function bolum2(text) { $("#description").text(text).css("color","green"); } var sonuc = true; $("#togle").click(function(){ (sonuc=!sonuc) ? bolum1("evet") : bolum2("hayır"); }); $("#pricing").click(function(){ $("#togle").trigger("click"); $("#alan1").trigger("select"); }); $("#alan1").select(function(){ // input 1 in içi seçildiğinde devreye giriyor $("#description").after(" Text marked!"); }); });