Live Code Editor Version 2.0

Hướng dẫn tạo Icon Bar với HTML, CSS và Javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css">
        <style type="text/css">
            .container {
                width: 50%;
                margin: auto;
            }
            .icon-bar {
                width: 100%;
                background-color: #555;
                overflow: auto;
            }

.icon-bar a {
                float: left;
                width: 20%;
                text-align: center;
                padding: 12px 0;
                transition: all 0.3s ease;
                color: white;
                font-size: 36px;
            }

.icon-bar a:hover {
                background-color: #000;
            }

.active {
                background-color: #4CAF50 !important;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Freetuts.net hướng dẫn tạo Icon Bar</h1>
            <div class="icon-bar">
                <a class="active" href="#"><i class="fa fa-home"></i></a> 
                <a href="#"><i class="fa fa-search"></i></a> 
                <a href="#"><i class="fa fa-envelope"></i></a> 
                <a href="#"><i class="fa fa-globe"></i></a>
                <a href="#"><i class="fa fa-trash"></i></a> 
            </div>
        </div>
    </body>
    <script>
        //lấy tất cả các button menu
        var menus = document.getElementsByTagName('a');
        //lặp qua tất cả các menu và gán sự kiện
        for (var i = 0; i < menus.length; i++) {
            menus[i].addEventListener("click", function(){
                //bỏ active tất cả các menu
                for (var i = 0; i < menus.length; i++) {
                    menus[i].classList.remove("active");
                }
                //active menu được click
                this.classList.toggle("active");
            });
        }
    </script>
</html>