Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

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