Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Menu Button Marker Animation Tutorial

Published :
Author :
Adam Khoury
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>