Menüye Harika Bir Özellik Ekleme / Nav Marker To Show Where You Are On Page - HTML5 - CSS3 - jQuery - Ders26
Menüye Harika Bir Özellik Ekleme / Nav Marker To Show Where You Are On Page - HTML5 - CSS3 - jQuery - Ders26
Evet arkadaşlar video uygulamalarımıza devam ediyoruz. Bu küçük uygulamamız ile html, css ve jQuery kullandık. Bir üst menü yaptık ve sayfalar arasında dolaşırken üst menümüzdeki işaret de bizim olduğumuz sayfayı gösterebilir hale geldi. Bu uygulamada farklı olarak jQuery kullandık ama bunun da çözümü burada aşağıdaki linkten direk kopyalayarak çalıştırabilirsiniz sitenizde. Videolarımızı beğendiyseniz kanalımıza abone olmayı unutmayın.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Sekmeler</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<body>
<nav>
<ul>
<li><a href='#' class="home-marker active">Home</a></li>
<li><a href='#' class="about-marker">About</a></li>
<li><a href='#' class="team-marker">Team</a></li>
<li><a href='#' class="contact-marker">Contact</a></li>
</ul>
</nav>
<section class="home">
<h1>HOME</h1>
<p>Şu an Home Sayfasındasınız</p>
</section>
<section class="about">
<h1>ABOUT</h1>
<p>Şu an About Sayfasındasınız</p>
</section>
<section class="team">
<h1>TEAM</h1>
<p>Şu an Team Sayfasındasınız</p>
</section>
<section class="contact">
<h1>CONTACT</h1>
<p>Şu an Contact Sayfasındasınız</p>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var navLinks = $('nav ul li a'),
navH = $('nav').height(),
section = $('section'),
documentEl = $(document);
documentEl.on('scroll', function() {
var currentScrollPos = documentEl.scrollTop();
section.each(function() {
var self = $(this);
if ( self.offset().top < (currentScrollPos + navH) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight()) ) {
var targetClass = '.' + self.attr('class') + '-marker';
navLinks.removeClass('active');
$(targetClass).addClass('active');
}
});
});
})();
</script>
</body>
</head>
</html>
CSS İÇERİĞİ:
*{
margin: 0;
padding: 0;
}
body{
font-family: Open Sans, sans-serif;
}
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: black;
}
nav ul li{
list-style: none;
display: inline-block;
}
nav ul li a{
display: block;
padding: 20px 40px;
text-decoration: none;
color: white;
transition: background-color 0.4s ease;
}
nav ul li a.active{
background-color: #666;
}
section{
padding: 30% 0;
text-align: center;
}
section.home{background-color: #aaa;}
section.about{background-color: #bbb;}
section.team{background-color: #ccc;}
section.contact{background-color: #ddd;}
Yorumlar
Yorum Gönder