0

我正在为我的网站制作菜单。我一直在为较小的屏幕（大约 800 x 600 的屏幕）测试它，每次我尝试将水平滚动条向右移动以查看整个菜单时，我的网站正文都会发生变化，但菜单不会发生变化。任何人都可以帮忙吗？谢谢！网站：http ://andrewgu12.kodingen.com/

CSS：

div#header-container {
     background-color: #003264; 
     height: 100px !important;
     box-shadow: 0px 5px 10px #666;
     min-width: 100%;
     z-index: 1;
     position: fixed;
     top: 0;
 }
 div#header {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #FFF;
    /*position: relative;*/
    top: 0;
 }
div#header ul{
    height: 100px;
    list-style-type: none;
    float: right;
}
div#header ul li {
    background-color: #003264;  
    text-align: center;
    height: 100px;
    line-height: 100px;
    transition: background-color 1s;
     -webkit-transition: background-color 1s;
    display: inline;
     padding: 0;
    margin: 0;
 }

HTML

<div id="header-container">
        <div id="header" class="row">   
            <nav class="nav-bar">
                <ul class="left">
                    <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>
                </ul>
                <ul class="right">
                    <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>
                    <li data-slide="3" class="about"><a href="">about</a></li>
                    <li data-slide="4" class="contact"><a href="">contact</a></li>
                 </ul>
            </nav>
        </div><!--end header-->
    </div><!--end header-container-->

编辑：有没有一种方法可以在 CSS 中做到这一点，只要随着浏览器宽度的减小，左右菜单项之间的间隙就会减小？

4

3 回答 3

0

如果您想让它水平滚动而不是垂直滚动，您不会遇到纯 CSS 的解决方案。这是一个适合您的 jQuery 解决方案

$(window).scroll(function(){
  $('div#header-container').css('left','-'+$(window).scrollLeft()+'px');
});
于 2013-08-01T01:47:25.847 回答
0

发生这种情况的原因是由于position: fixed;您的菜单的 css 中。这是一个固定位置的预期行为，它基本上忽略了滚动条。如果您想在不使用 css 属性的情况下将菜单保持在顶部，我建议您查看 javascript 解决方案。

也许看看这篇文章：滚动时将菜单栏固定在顶部

或者，有一个很棒的 jquery 插件可以实现这一点，也称为 jquery-scrollspy，可以在这里找到：https ://github.com/sxalexander/jquery-scrollspy

希望这可以帮助。

于 2013-08-01T01:05:50.727 回答
0

问题是在 Foundation.css 中设置了一个 max-width。为了使其更具响应性，我们将使用@meta 缩放。CSS3的如果。

使用此代码：

@media (max-width: 960px) {
  div#header {
    max-width:100%
  }
}

如果它不起作用，请在您的脑海中使用它：

<meta name="viewport" content="width=device-width, initial-scale=1">


在 Skype 上加我：JonasRothmann

检查此源代码：http ://script9.net/basel/

乔纳斯·罗斯曼·哈拉格

于 2013-08-01T01:25:15.313 回答