javascript - 与 Logo 图像位于同一顶部导航栏上的汉堡包菜单

Question

因此，经过几天的研究和干预，我似乎无法完全理解这个概念。

我想要完成的是在页面顶部有一个导航栏，包含三个组件:

• 顶部导航栏左侧的图像 (Logo1)。
• 导航栏中央的图片 (Logo2)。
• ..最后，最右边的汉堡包菜单，它以不透明的方式向下滑动整个页面，并且 链接元素以浏览网站。

这是我试图展示所有这些的方式

function openNav() {
document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

li{
                text-decoration: none;
            }
            .overlay {
                        height: 0%;
                        width: 100%;
                        position: fixed;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        background-color: rgb(0,0,0);
                        background-color: rgba(0,0,0, 0.9);
                        overflow-y: hidden;
                        transition: 0.5s;
                    }

                    .overlay-content {
                    position: relative;
                    top: 25%;
                    width: 100%;
                    text-align: center;
                    margin-top: 0px;
                }

                .overlay a {
                    padding: 8px;
                    text-decoration: none;
                    font-size: 36px;
                    color: #818181;
                    display: block;
                    transition: 0.3s;
                }

                .overlay a:hover, .overlay a:focus {
                    color: #f1f1f1;
                }

                .overlay .closebtn {
                    position: absolute;
                    top: 20px;
                    right: 45px;
                    font-size: 60px;
                }

                header{
                width:100%; 
                background:#1d1f20; 
                height:60px; 
                line-height:60px;
                }

                @media screen and (max-height: 450px) {
                    .overlay {overflow-y: auto;}
                    .overlay a {font-size: 20px}
                    .overlay .closebtn {
                    font-size: 80%;
                    top: 15px;
                    right: 35px;
                    }
                }

<header>
            <div>
                <img src="" width="50px" height="30px"/>
                <img style="margin-left: 620px;" src="" width="50px" height="30px" />
                <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span>
                <div id="myNav" class="overlay">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <div class="overlay-content">
                        <ul>    
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Page1</a></li>
                            <li><a href="#">Page2</a>
                             <ul>
                                    <li><a href="#">Page3</a></li>
                                    <li><a href="#">Page4</a></li>
                                    <li><a href="#">Page5</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page6</a>
                             <ul>
                                    <li><a href="#">Page7</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page8</a>
                             <ul>
                                <li><a href="#">Page9</a></li>
                                <li><a href="#">Page10</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Page11</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

任何帮助或指导将不胜感激。我还在学习! :) 谢谢!

Answer 1

您的汉堡包图标 float 到左侧。只需将其更改为 float:right;

function openNav() {
document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

 

span{
   float: right !important;
   color: white;
 }
li{
                text-decoration: none;
            }
            .overlay {
                        height: 0%;
                        width: 100%;
                        position: fixed;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        background-color: rgb(0,0,0);
                        background-color: rgba(0,0,0, 0.9);
                        overflow-y: hidden;
                        transition: 0.5s;
                    }

                    .overlay-content {
                    position: relative;
                    top: 25%;
                    width: 100%;
                    text-align: center;
                    margin-top: 0px;
                }

                .overlay a {
                    padding: 8px;
                    text-decoration: none;
                    font-size: 36px;
                    color: #818181;
                    display: block;
                    transition: 0.3s;
                }

                .overlay a:hover, .overlay a:focus {
                    color: #f1f1f1;
                }

                .overlay .closebtn {
                    position: absolute;
                    top: 20px;
                    right: 45px;
                    font-size: 60px;
                }

                header{
                width:100%; 
                background:#1d1f20; 
                height:60px; 
                line-height:60px;
                }

                @media screen and (max-height: 450px) {
                    .overlay {overflow-y: auto;}
                    .overlay a {font-size: 20px}
                    .overlay .closebtn {
                    font-size: 80%;
                    top: 15px;
                    right: 35px;
                    }
                }

<header>
            <div>
                <img src="" width="50px" height="30px"/>
                <img style="margin-left: 620px;" src="" width="50px" height="30px" />
                <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span>
                <div id="myNav" class="overlay">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <div class="overlay-content">
                        <ul>    
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Page1</a></li>
                            <li><a href="#">Page2</a>
                             <ul>
                                    <li><a href="#">Page3</a></li>
                                    <li><a href="#">Page4</a></li>
                                    <li><a href="#">Page5</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page6</a>
                             <ul>
                                    <li><a href="#">Page7</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page8</a>
                             <ul>
                                <li><a href="#">Page9</a></li>
                                <li><a href="#">Page10</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Page11</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>