Question

首先让我提前感谢你。

我正在尝试制作一个现代汉堡移动菜单，说实话我觉得我已经圈了，现在想不出怎么做。

我希望设计一个移动导航菜单，一旦媒体是960px及以下，稍后我会为较小的屏幕添加媒体。

如果你可以帮助我创建一个移动导航，那么太棒了，谢谢你。你也可以看看我的代码，看看它是否正确，即浮动在正确的位置，显示：等我是新手机菜单和新的网页设计，我只是很难做出没有任何问题的菜单，我想因为有很多方法。

最终我希望它顶部有一个徽标，下面有一个下拉式移动菜单。标题

<body>

        <div id="Container">

            <header>
                <img id="Logo" src="images/broken3.jpeg">
                <Nav id="Nav">
                    <ul id="NavUl">
                        <li class="NavLi"><a href="#Contact Us">Contact Us</a></li>
                        <li class="NavLi"><a href="#Extra">Extra</a></li>
                        <li class="NavLi"><a href="#Writings">Writings</a></li>
                        <li class="NavLi"><a href="#About">About</a></li>
                        <li class="NavLi"><a href="#Home">Home</a></li>

                    </ul><!--End of Header-->
                </Nav><!--End of Nav-->
            </header><!--End of Header-->
        </div><!--End of Container-->




</body>
</html>



/*Body*/
 body       {
    width:100%;
    height:100%;
    background:url(images/bk1.jpg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    background-color: #ffffff ;
            }


 /*Default setting*/
 *          {
    padding:0px;
    margin:0px;
            }


 /*Container (website)*/
#Container{
    width:100%;
    height:auto;
    margin:0px;
    padding:0px;    
}

/*Page Header*/
Header{
    width:100%;
    height:auto;
    background-color:#000000;
}

 /*Logo div*/
#Logo{
        margin:0px;
        padding:0px;
        height:65px;
        width:auto;
        float:left;
        padding-left:20px;
}

                                            /*Navigation container*/
#Nav{

}

/*Navigation Ul*/
#NavUl{
    list-style-type:none;
    margin:0px;
    padding:0px;
    height:65px;
    border:px solid yellow;
    background-color:#000000;
    overflow:hidden;
    line-height:60px;


}

/*Navigation Li's*/
.NavLi{
    width:140px;
    background-color:#000000;
    border-bottom:px solid yellow; 
    float:right;
    text-align:center;
}

/*Navigation Li's*/
.NavLi:hover{
    background-color:silver;
    border-radius:0px;
    transition: background-color .4s ease-in;
    border-bottom:5px solid purple;
}

/*Navigation LAST Li*/
#Nav li:last-child{
    border-bottom:;
}

/*Navigation a's*/
#Nav a{
    margin:0px;
    display:block;
    color:White;
    font-size:1.2em;
    font-weight:500;
    padding: 0px 25px;
    text-decoration:none;

}


/*Navigation a's hover*/
#Nav a:hover{
    color:purple;
    padding: 0px 25px;
}

                                                        /* On smaller screens, 400px */
@media only screen and (max-width: 960px) { 



}

移动导航菜单

0 个答案: