Question

我需要为我的网站发布课程设计一个响应式模板。我已经知道了一些jquery，所以我决定将桌面版的水平导航菜单转换为移动版的垂直菜单。基本上，我不希望显示所有以一定宽度打破的导航列表项，而是希望在单击＆＃34;导航＆＃34;文本。我已经将菜单隐藏在移动设备上，直到您点击导航文本，并且当它被告知时显示列表。我的问题是，当实际菜单出现时，它会扩展nav元素的高度，该元素是ul的父元素。如何修复我的代码，以便导航元素的高度不变，列表显示在导航文本正下方的nav元素之外？

这是我的意思截图： http://i.imgur.com/lNQEMKk.jpg

css：

#navTrigger {
    display: none;
}
nav {
    margin-bottom: 10px;
    margin-left: 0px;
    background: url(../images/wood_dark.png);
    -webkit-box-shadow: 10px 2px 10px;
    box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 1), inset 0px 5px 10px 0px rgba(255, 255, 255, .3);
    border: 1px solid #555;
    border-bottom-color: #888;
    position: absolute;
    z-index: 0;
    width: 960px;
}
nav ul {
    list-style-type: none;
    margin-top: 0;
    margin-right: 35px;
    margin-left: 73px;
    margin-bottom: 0;
}
nav ul li {
    float: left;
    display: inline;
    border-right: 1px solid #888888;
    border-left: 1px solid #444444;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.25em;
    padding: 10px 15px;
    display: block; 
}
@media only screen and (max-width:790px){
    #navTrigger {
        display: block;
        color: #fff;
        margin-left: 124px;
        padding: 10px 15px;
        font-size: 1.25em;
    }
    nav ul {
        display: none;
    }
    nav ul li {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, .2);
        float: none;
    }
}

HTML：

<nav>
      <span id="navTrigger">Navigation</span>
      <ul>
        <li><a href="index.html" title="Home Page">Home</a></li>
        <li><a href="products.html" title="Our Products">Products</a></li>
        <li><a href="services.html" title="Our Services">Services</a></li>
        <li><a href="about.html" title="About Us">About</a></li>
        <li><a href="support.html" title="Help and Support">Support</a></li>
        <li><a href="contact.html" title="Contact Us">Contact</a></li>
      </ul>
    </nav>

Answer 1

＆＃34; @media only screen and...＆＃34;并不总是有效......

尝试，@media(max-width: 790px)

如何使用CSS将水平菜单更改为移动设备上的垂直菜单

1 个答案: