Navigation Slider

Developer
Satnam Singh
Size
2,107 Kb
Views
58,696
  1. Navigation Slider Previews
  2. Navigation Slider HTML Codes
  3. Navigation Slider CSS Codes
  4. Navigation Slider JS Codes

How do I make an navigation slider?

Testing my Javascript Skills by doing some sliding effects and animation with Pure JS. What is a navigation slider? How do you make a navigation slider? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.

Navigation Slider Previews
IQ Test

Navigation Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table width="150" id="myMenu" border="1" onMouseOver="showMenu()" onMouseOut="hideMenu()">
<tr>
<td class="menu">HOME</td>
<td rowspan="5" align="center">M<br />E<br />N<br />U</td>
</tr>
<tr>
<td class="menu">ASP</td>
</tr>
<tr>
<td class="menu">JavaScript</td>
</tr>
<tr>
<td class="menu">DHTML</td>
</tr>
<tr>
<td class="menu">VBScript</td>
</tr>
</table> <script src="js/index.js"></script>
</body>
</html>

Navigation Slider - Script Codes CSS Codes

table#myMenu{	color:white;	border-collapse:collapse;	background-color:black;	margin-left:-122px;
}
td{	padding:5px;	border:1px solid black;
}
td.menu{	background-color:#0CF;	text-align:center;
}

Navigation Slider - Script Codes JS Codes

var table;
var i=-122;
var speed=10;
var intShow;
var intHide;
var intFade;
var colorCode=111111;
var colorChange=true;
function showMenu(){	clearInterval(intHide);	intShow=setInterval(show,10);
}
function show(){	if(i<-8){	table.style.marginLeft=i+"px";	i+=speed;	}
}
function hideMenu(){	clearInterval(intShow);	intHide=setInterval(hide,10);
}
function hide(){	if(i>-123){	table.style.marginLeft=i+"px";	i-=speed;	}
}
function animateBG(){	if(colorChange==true){	colorCode+=111111;	if(colorCode==999999){	colorChange=false;	}	}	else{	colorCode-=111111;	if(colorCode==111111){	colorChange=true;	}	}	table.style.backgroundColor="#"+colorCode;
}
window.onload=function(){	table=document.getElementById('myMenu');	table.style.backgroundColor="#"+colorCode;	intFade=setInterval(animateBG,50);
};
Navigation Slider - Script Codes
Navigation Slider - Script Codes
Home Page Home
Developer Satnam Singh
Username rssatnam
Uploaded October 07, 2022
Rating 3
Size 2,107 Kb
Views 58,696
Do you need developer help for Navigation Slider?

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!

Satnam Singh (rssatnam) Script Codes
Name
SVG Cone Scribble
Menu Hover Animation
CSS3 Form Page Design
Name Hover Bubble Animation
A Pen by Satnam Singh
Giving Strike, Del or S elements a Color
Navigation Icon 3 lines to X
Pure CSS3 Drop-down Navigation with Effects
CSS Image Parallax Effect
JavaScript Reference Type
Create amazing marketing copy 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!