â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
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>