使菜单栏响应答案

【问题标题】：Make Menubar Responsive使菜单栏响应
【发布时间】：2014-06-18 02:16:04
【问题描述】：

我正在将我的网站转换为响应式布局。我已经使用媒体查询为大多数内容实现了这一点，但无法让菜单（仅使用 CSS 和 HTML）工作；它仍然位于 920 像素。

代码如下：

<div class="navigation_bar">

    <div id="main_menu">
        <div class="menu-main-menu-container">
            <ul class="homedropdown" id="menu-main-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://localhost/safesteps/fire/">Fire</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://localhost/safesteps/flood/">Flood</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://localhost/safesteps/typhoons/">Typhoons</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45" id="menu-item-45"><a href="http://localhost/safesteps/earthquake/">Earthquake</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46" id="menu-item-46"><a href="http://localhost/safesteps/emergency-kit/">Emergency Kit</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47" id="menu-item-47"><a href="http://localhost/safesteps/pandemics/">Pandemics</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48" id="menu-item-48"><a href="http://localhost/safesteps/droughts/">Droughts</a></li>
            </ul></div>               </div>

    <div class="clear"></div>
</div>

CSS

   .navigation_bar {
        background: none repeat scroll 0 0 #E1E1E1;
        height: 46px;
        margin: 0;
        width: 100%;
    }

ul.homedropdown a {
    background-image: none;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 0;
    padding: 0 18px;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    vertical-align: baseline;
}
ul, li {
    list-style: none outside none;
}

这是当前布局的屏幕截图：

我该如何解决这个问题？

【问题讨论】：

当页面变得太窄时，您希望菜单栏发生什么？这是一个非常漂亮的仅 html 和 css 解决方案：coderwall.com/p/sujd_w

标签： html css responsive-design media-queries

【解决方案1】：

如果您希望网站在浏览器窗口宽度低于 920 像素时保持固定宽度，请尝试使用 min-width css-property，如下所示：

body {min-width: 960px;} //这是你的主要容器类，将应用最小宽度 960px 到整个站点。导航栏 { 背景：无重复滚动 0 0 #E1E1E1; 高度：46px；边距：0；宽度：100%；最小宽度：920px； //这可能需要增加一点 }

这不是最好的方法（也不是真正的响应式），并且对许多人来说有点太硬编码，但通常效果很好。菜单将消失，但滚动条会出现在浏览器窗口的底部。您还可以尝试使用百分比或动态属性来调整响应速度。

【讨论】：