3
(function($){
$(function(){
// Slider functionality
// slide knob to position function
(function( $ ){
$.fn.slideToPos = function() {
var left = $(this).position().left + ($(this).width() / 2) - ($(".menu a.knob").width() / 2) - 2;
$(".menu a.knob").css("left", left);
var before = $(this).parent().parent().parent().children(".bar").first().children(".before").first();
before.css("width", left + 20).css("backgroundColor", $($(this).attr("href")).css("backgroundColor"));
return this;
};
})( jQuery );
$(".menu ul li.active a").slideToPos();
$(".menu ul li a").click(function(e) {
e.preventDefault();
$(this).slideToPos();
$('html, body').animate({ scrollTop: $(this.hash).offset().top }, 400);
});
// Scroll Spy
$(window).scroll(function() {
var top = $(window).scrollTop() + 100; // Take into account height of fixed menu
$(".container").each(function() {
var c_top = $(this).offset().top;
var c_bot = c_top + $(this).height();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((top > c_top) && (top < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
}
else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a").slideToPos();
}
}
});
});
}); // end of document ready
})(jQuery); // end of jQuery name space
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS RESET DONE */
html,body { height: 100%; }
body {
color: #fff;
margin: 0 auto;
font: 1em/1.3em Helvetica, sans-serif;
background-color: #333;
}
.header {
margin-bottom: 40px;
}
.clearfix {
clear: both;
}
.container {
z-index: 1;
position: relative;
background-color: #f4d432;
padding-top: 120px;
text-align: center;
height: 100%;
}
.container.blue {
background-color: #0099cc;
}
.container.green {
background-color: #9ed846;
}
.container.red {
background-color: #ff6766;
}
h1 {
margin: 40px 0;
font-size: 40px;
line-height: 40px;
font-weight: bold;
text-shadow: 0px 1px 1px #888;
}
a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}
.btn {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
position: relative;
display: inline-block;
padding: 10px 20px;
height: 50px;
background-color: #666;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
text-shadow: 0px 1px 1px #888;
}
a.btn span.btn {
position: absolute;
top: 4px;
left: 0;
z-index: -1;
width: 100%;
background-color: #444;
}
.btn:active,
.btn:active > span.btn{
top: 2px;
}
.btn.active,
.btn.active > span.btn {
top: 2px;
}
.btn-small {
height: 30px;
font-size: 12px;
line-height: 10px;
}
a.btn-small span.btn {
height: 30px;
}
/* Menu Styles */
.menu {
width: 100%;
position: fixed;
height: 100px;
background-color: #fff;
top: 0;
left: 0;
z-index: 2;
}
.menu .slider {
position: relative;
left: 10%;
width: 80%;
text-align: center;
}
.menu .slider .bar, .menu .slider .bar .before {
height: 20px;
transition: .5s;
-webkit-transition: .5s;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.menu .slider .bar {
position: relative;
left: 3px;
width: 100%;
background-color: #777;
}
.menu .slider .bar .before {
width: 100px;
float: left;
position: relative;
left: -3px;
}
.menu .slider .bar a.knob {
position: absolute;
top: -5px;
left: 0;
margin: 0;
display: block;
width: 30px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
transition: .5s;
-webkit-transition: .5s;
}
.menu ul {
height: 100%;
display: inline-block;
margin: 20px 0 15px 0;
}
.menu ul li {
margin: 0 40px;
font-size: 12px;
font-weight: bold;
float: left;
}
.menu ul li a { color: #444; margin: 0; }
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slider Timeline Menu</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="menu">
<div class="slider">
<ul>
<li class="category active"><a href="#home">HOME</a></li>
<li class="category"><a href="#search">SEARCH</a></li>
<li class="category"><a href="#about">ABOUT US</a></li>
<li class="category"><a href="#contact">CONTACT US</a></li>
</ul>
<div class="bar">
<div class="before"></div>
<a class="knob"></a>
<div class="after"></div>
</div>
</div>
</div>
<div id="home" class="container">
<div class="header">
<a href="http://webdesigncrowd.com" class="btn">WebDesignCrowd <span class="btn"></span></a>
<a href="http://www.webdesigncrowd.com/css3-slider-timeline-menu/" class="btn">Back to Article <span class="btn"></span></a>
<h1>Slider Timeline Menu</h1>
</div>
</div>
<div id="search" class="container blue">
<h1>Search</h1>
</div>
<div id="about" class="container green">
<h1>About Us</h1>
</div>
<div id="contact" class="container red">
<h1>Contact Us</h1>
</div>
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
I would like a help to make a Timeline while scrolling down the page.
http://global.penguinrandomhouse.com/company-history/
same but the scroll was vertical same, normal, as if it were filling while the user goes down the page...
what have you tried?
– user8545
Look what I’ve done.
– Yuri Rodrigues
the code seems to be all right, just need to change the Javascript and CSS, to make the animation vertically instead of horizontally, in the function "$.fn.slideToPos()"
– Kup
Yuri, that last issue was with problem solving or you still need help solving?
– Sergio