Bootstrap Ders-16 ScrollSpy
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-16 ScrollSpy

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1764)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/2erf23sd20v.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol