Question

我正在构建一个Wordpress站点，左侧有固定的侧边栏菜单，容器内右侧的主要内容。我不确定编码菜单的最佳做法是什么，因为我目前已将菜单编码为位于主容器div之外。我也注意到由于某种原因如果桌面屏幕尺寸不够宽，我的内容溢出到左边的菜单中，而且我的一些菜单在底部被切断（一些链接不可见）我是不确定这是否与屏幕高度有关？

菜单的HTML如下所示：

<div id="menuBar">
    <img class="logo" src="wp-content/themes/starkers-master/images/lulu-logoi-01.png" width="180" height="250" alt="Lulu Plews Logo"/>         
     <ul>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
     </ul>  
</div>

css是：

.menu-menu-1-container {
  position: fixed;
  left: 8.8%;
  top: 300px;
  border-right: 1px solid #D1D2D4;
  height: 10000px;
}

#menuBar {
    position: fixed;
    left: 8.15%;
    top:0;
    padding: 0 30px 0 0;
    border-right: 1px solid #D1D2D4;
    margin: 0 auto 0 auto;
}

我只是想知道如何编写代码以及我的代码是否有问题？我认为它缺少明显的东西，但我不知道它可能是什么？

Answer 1

我找到了解决问题的方法;我当时没有意识到在一个元素上使用position: fixed;会使它脱离流程。

首先，我在不知不觉中将position:fixed;添加到父元素＆gt; .menu-menu-1-container这不是必需的，反正也无济于事。我也从这个div中删除了所有其他样式，因为它们是多余的。

其次我纠正了#menuBar上的风格;我为它添加了100％的高度并移除了margin:0 auto;（由于我没有声明宽度，所以没有做任何事情，也不需要居中，所以这是多余的）。然后我将宽度添加到#menuBar并删除了左侧样式属性。

第三，我发现将固定侧边栏放在主容器div之外并用左边距和填充样式设置主容器div是正确的。

这是指向fiddle的链接，其中包含我的所有代码，以及我的CSS片段如下：

#menuBar {
    position: fixed;
    width: 150px;
    background-color: #DDD; 
    font-size: 18px;
    top: 0;
    bottom: 0;
    border-right: 1px solid #D1D2D4;   
}

#menuBar a {
  display:block;
  padding:15px;
  color: #000;
  text-decoration: none;
}
.content {
  position: relative;            
  margin-left: 200px;
}

希望它可以帮助其他人在固定位置边栏这么简单的事情上挣扎。

如何为Wordpress项目创建固定位置侧边栏

1 个答案: