Pulse Of The Blogosphere » CSS Reponsive Menu

HOME / Other / CSS / CSS Reponsive Menu

CSS Reponsive Menu

Author: admin - Posted: 16/12/20 - Update: 16/12/20

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0;
        }

        h2 {
            text-align: center;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: #5C5C5C;
        }

        .topnav .icon {
            display: none;
        }

        @media screen and (max-width: 768px) {
            .topnav a:not(:first-child) {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }

            .topnav.responsive {
                position: relative;
            }

            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</head>

<body>
    <h2>Hướng dẫn tạo responsive navbar</h2>
    <div class="topnav" id="myTopnav">
        <a href="#home">Trang chủ</a>
        <a href="#news">Học lập trình online</a>
        <a href="#contact">Thủ thuật</a>
        <a href="#about">Liên hệ</a>
        <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

    <div style="padding-left:16px">
        <p>Thay đổi kích cỡ màn hình để xem hiệu ứng!</p>
    </div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

body {

margin: 0;

}

h2 {

text-align: center;

}

.topnav {

overflow: hidden;

background-color: #333;

}

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #5C5C5C;

}

.topnav .icon {

display: none;

}

@media screen and (max-width: 768px) {

.topnav a:not(:first-child) {

display: none;

}

.topnav a.icon {

float: right;

display: block;

}

.topnav.responsive {

position: relative;

}

.topnav.responsive .icon {

position: absolute;

right: 0;

top: 0;

}

.topnav.responsive a {

float: none;

display: block;

text-align: left;

}

</style>

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

</script>

</head>

<body>

<h2>Hướng dẫn tạo responsive navbar</h2>

<a href="#home">Trang chủ</a>

<a href="#news">Học lập trình online</a>

<a href="#contact">Thủ thuật</a>

</div>

</div>

</body>

</html>

CSS

CSS cơ bản