Question

感谢所有帮助我完成第一个项目的人。

我设法制作了这个响应式导航栏

1.但是，当移动菜单处于活动状态时，＆＃34;汉堡＆＃34;按钮左侧和小型。

我尝试制作子菜单但没有成功。

3.我想要一个与导航菜单在同一条线上的徽标但是当媒体在移动设备上时（480px）我试图在顶部和中心以及导航上设置徽标在下面这一行。

任何帮助都会很棒。提前谢谢。

这是我的jsfiddle的链接 https://jsfiddle.net/jkfb4Lus/

<body>

<div id="container">

    <header id="header">
        <ul class="topnav" id="myTopnav">
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Writings">Writings</a></li>
            <li><a href="#Extra">Extra</a></li>
            <li><a href="#Contact Us">Contact Us</a></li>
            <li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
        </ul>
    </header>

<script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
</script>


</div>
</body>


body{
    margin:0;
    padding:0;
}

    *{
    margin:0;
    padding:0;
    }

#header{
    width:100%;
    height:65px;
    background-color:white;
}

/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
    width:100%;
    height:65px;
    float:right;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#333;
    text-align:right;
}

/*float the LIST (li) items side by side*/
ul.topnav li{
    display:inline;

}

/*float the LIST (li) items side by side HOVER*/
ul.topnav li:hover{
    border-bottom:;
}


/*style the (a)links inside the LI items*/
ul.topnav li a{
    position:relative;
    display:inline-block; /* so it accepts top/bottom padding */
    text-decoration:none;
    padding:px;
    color:#FFF;
    font-weight:500;
    width:75px;
    text-align:center;
    line-height:65px;
    width:100px;
}


/*change backround color of the LINKS (a) on hover*/
ul.topnav li a:hover{
    background-color:#F1CBFF;
    color:purple;
    transition:background-color 1.0s ease;
}


/*hide the list (li) items that contains the link that 
should open and close-quotethe topnav on small screens*/
ul.topnav li.icon{
    display:none;
}


/*when the screen is less than 680px hide,hide all list (li)items,
except the first one("Home"). Show the list(li) item that contains
the link (a) open and close the topnav (li.icon)*/


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

#header{
    height:auto;
}

/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
    height:auto;
}

ul.topnav li:not(:first-child){
        display:none;
        }

ul.topnav li.icon{
        float:right;
        display:inline-block;
}

/*float the LIST (li) items side by side*/
ul.topnav li{
    float:left;
}
    }

/*the "responsive" class is added to the topnav with Javascript when the uses
clicks on the (icon).  This class makes the topnav look good on small screens*/
@media screen and (max-width:680px){
    ul.topnav.responsive {
        position:relative;
    }

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

}

ul.topnav.responsive li {
    float:none;
    display:inline;

}

ul.topnav.responsive li a{
    width:100%;
    display:block;
    text-align:center;
    padding:10px;
}

ul.topnav li a:hover{
border-bottom:1px purple solid;
    transition:all 1.0s ease;   
}

}

Answer 1

您是否尝试过使用flexbox？

ul.topnav.responsive li.icon{
    display: flex;
    align-items: center;
}

移动NavBar问题

1 个答案: