Slide to Navigation

Developer
Jakob-e
Size
3,063 Kb
Views
38,456
  1. Slide to Navigation Previews
  2. Slide to Navigation HTML Codes
  3. Slide to Navigation CSS Codes
  4. Slide to Navigation JS Codes

How do I make an slide to navigation?

Slide up/down based on DOM order. What is a slide to navigation? How do you make a slide to navigation? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Slide to Navigation Previews
IQ Test

Slide to Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide to Navigation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<article> <section id="a"> <h2>A</h2> <a href="#a">Go to A</a> <a href="#b">Go to B</a> <a href="#c">Go to C</a> <a href="#d">Go to D</a> </section> <section id="b"> <h2>B</h2> <a href="#a">Go to A</a> <a href="#b">Go to B</a> <a href="#c">Go to C</a> <a href="#d">Go to D</a> </section> <section id="c"> <h2>C</h2> <a href="#a">Go to A</a> <a href="#b">Go to B</a> <a href="#c">Go to C</a> <a href="#d">Go to D</a> </section> <section id="d"> <h2>D</h2> <a href="#a">Go to A</a> <a href="#b">Go to B</a> <a href="#c">Go to C</a> <a href="#d">Go to D</a> </section>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide to Navigation - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,italic300);
*, :before, :after { box-sizing: border-box; margin: 0; padding: 0;
}
html, body { height: 100%;
}
article { position: relative; display: block; width: 100%; height: 400px; overflow: hidden;
}
section { position: absolute; display: block; width: 100%; top: 400px; height: 400px; text-align: center;
}
#a { background: gold;
}
#b { background: magenta;
}
#c { background: olive;
}
#d { background: dodgerblue;
}
h2 { font: 300 4em/2 'Lato', sans-serif; color: #fff;
}
a { font: 300 1em/2 'Lato', sans-serif; color: #fff; display: inline-block; padding: 1em; text-decoration: none; border-radius: 4px; margin: .5em;
}
#a a { background: #e6c200;
}
#a a:hover { background: #f5ce00;
}
#b a { background: #e600e6;
}
#b a:hover { background: #f500f5;
}
#c a { background: #676700;
}
#c a:hover { background: #767600;
}
#d a { background: #0583ff;
}
#d a:hover { background: #148bff;
}

Slide to Navigation - Script Codes JS Codes

var zTop = 1;
$('a').on('click',function(e){ e.preventDefault(); // Animate up or down based on DOM index var index = $($(this).attr('href')).index(); var wh = $(window).height(); $('section').each(function(){ var $tgt = $(this); var idx = $tgt.index(); $tgt.removeClass(); if(index == idx){ $tgt.stop(true,true).animate({top:0},'linear').addClass('active').css({'z-index':zTop}); } if(index < idx) { $tgt.stop(true,true).animate({top:wh},'linear').addClass('below'); } if(index > idx ){ $tgt.stop(true,true).animate({top:-wh},'linear').addClass('above'); } }); zTop++;
})
// Trigger first section animation
$('a[href="#a"]').trigger('click');
// Set height
$(window).on('resize',function(){ var wh = $(window).height(); $('article, section').height(wh); $('.active').css({top:0}); $('.above').css({top:-wh}); $('.below').css({top:wh});
}).trigger('resize');
Slide to Navigation - Script Codes
Slide to Navigation - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 3,063 Kb
Views 38,456
Do you need developer help for Slide to Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
Profile Top
Snap to base-line
CSS Shapes
SVG Encoding
SVG Path Circle
Baseline, Scale and Element Queries
Encode SVG SCSS
Angular Range Filter
SCSS z-index
Navigation highlighting using waypoints.js
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!