Bootstrap eğitim serimize devam ediyoruz.Bu dersimiz de
ScrollSpy özelliğini işleyeceğiz.Html de bir linkin
hrefine sayfa içindeki her hangi bir objenin
idsini yazarsak,linke tıklandığın da direkmen o id ye sahip alana giderek gösterir.Bootstrap ile
navbar ekleyip
http://ustaderslik.com/konu/Bootstrap_Ders-5_Navbar body ScrollSpy verip,navbar ile ilişkilendirirsek scrollu elle oynattığımızda o id ye geldiğin navbar otomatikman renklenir.ScrollSpy temel mantığı bu şekil de.
İndir : http://ustaderslik.com/dosya/bootstrap-ScrollSpy.rar
İncele : http://ustaderslik.com/ornek/bootstrap-ScrollSpy/
Navbar ekleyip menüdeki butonları sayfa içi objelerin idsini yazıyoruz.Daha sonra body tagına
data-spy="scroll" data-target="#menu" veriyoruz.data-target a navbarın idsini yazıyoruz.Artık scroll ile o idye gelince menü de o buton aktifleşecek.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{max-width:960px;margin:auto;margin-top:50px;}
.font{color:#fff;text-align:center;font-size:70px !important;}
#alan1{background:#15d4f5;}
#alan2{background:#e9213f;}
#alan3{background:#68db27;}
</style>
</head>
<body data-spy="scroll" data-target="#menu">
<div id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="#">Menü</a></li>
<li class="active"><a href="#alan1">Alan-1</a></li>
<li><a href="#alan2">Alan-2</a></li>
<li><a href="#alan3">Alan-3</a></li>
</ul>
</div>
</div>
<div id="alan1" class="font">
<span><br />Alan-1</span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="alan2" class="font">
<span><br />Alan-2</span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="alan3" class="font">
<span><br />Alan-3</span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
