请模仿MC官网并扮演一个顶级程序员兼ui设计师帮我写一个带有在页面顶部导航栏并会随着屏幕的变小变成一个按钮点击按钮后展示导航栏点击返回回到页面

当然可以！作为一名顶级程序员兼UI设计师，我将为您设计一个带有顶部导航栏的页面，并确保在屏幕变小时能够变成一个按钮，并且点击按钮后能够展示导航栏并点击返回回到页面。下面是我为您准备的代码示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

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

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) {
                display: none;
            }
            .navbar a.icon {
                float: right;
                display: block;
            }
        }

        .navbar.responsive {
            position: relative;
        }

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

        .navbar.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="navbar" id="myNavbar">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    
    <h1>Welcome to My Website</h1>
    <p>This is a demo page with a responsive navigation bar.</p>

    <script>
        function myFunction() {
            var x = document.getElementById("myNavbar");
            if (x.className === "navbar") {
                x.className += " responsive";
            } else {
                x.className = "navbar";
            }
        }
    </script>
</body>
</html>

这段代码会创建一个顶部导航栏，在屏幕宽度小于600px时，导航栏中的链接会被隐藏，代之以一个按钮。当点击按钮时，导航栏会展开，并且可以点击返回按钮返回页面。

希望这段代码能符合您的需求！如有其他问题，请随时提问

请模仿MC官网并扮演一个顶级程序员兼ui设计师帮我写一个带有在页面顶部导航栏并会随着屏幕的变小变成一个按钮点击按钮后展示导航栏点击返回回到页面