Hosting Solutions
mobile_logo Table of Contents

Menu Button Marker Animation Tutorial

Learn to create animated button marker systems for menus using JavaScript, CSS and HTML. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div#mycontent{ font-size:18px; border:#000 1px solid; width:450px; height:250px; padding:20px; background:#DFEFFF; } div#mymenu > button{ padding: 10px 30px; } div#btn_marker{ position:absolute; border:#000 1px solid; border-bottom:none; width:0px; height:10px; top:67px; display:none; -webkit-transition:left .5s ease 0s, width .5s linear 0s; transition:left .5s ease 0s, width .5s linear 0s; } </style> <script> function _(x){ return document.getElementById(x); } function initMenu(){ _("btn_marker").style.left = _("btn1").offsetLeft+"px"; _("btn_marker").style.width = _("btn1").offsetWidth-2+"px"; _("btn_marker").style.display = "block"; } function loadContent(btn){ _("btn_marker").style.left = btn.offsetLeft+"px"; _("btn_marker").style.width = btn.offsetWidth-2+"px"; _("mycontent").innerHTML = "Content for "+btn.innerHTML+" loaded"; } window.addEventListener('load', function(event) { initMenu(); }); </script> </head> <body> <h1>Animated Button Marker System</h1> <div id="mymenu"> <div id="btn_marker"></div> <button id="btn1" onclick="loadContent(this)">HTML5</button> <button id="btn2" onclick="loadContent(this)">CSS</button> <button id="btn3" onclick="loadContent(this)">JavaScript Program</button> <button id="btn4" onclick="loadContent(this)">PHP</button> </div> <div id="mycontent">Content for HTML5</div> </body> </html>

JavaScript Videos

Animation Programming

Trigger CSS Transitions to Control AnimationsStart Stop CSS keyframes animation with JavaScriptMenu Button Marker Animation TutorialTransform Rotate Image Spin Smooth Animation TutorialBubbles Content Slideshow Application JavaScript CSS HTML