如何爲我的Wordpress項目創建一個固定位置側邊欄

我正在構建一個Wordpress站點，其左側的固定側欄菜單和容器右側的主要內容。我不確定編碼菜單的最佳做法是什麼，因爲我目前已將菜單編碼爲位於主容器div之外。我也注意到，由於某種原因，如果桌面屏幕尺寸不夠寬，我的內容會溢出到左側的菜單中，而且我的一些菜單在底部被切斷（某些鏈接不可見）不知道這是否與屏幕的高度有關？如何爲我的Wordpress項目創建一個固定位置側邊欄

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; 
}

我只是想一些建議，以我應該怎麼編寫這一點，是否有一些錯誤我的代碼？我認爲它缺少明顯的東西，但我不知道它會是什麼？

來源

2013-09-27 Neelam Khan

你爲什麼對這些元素使用'position：fixed'？這似乎是一種奇怪的方式來建立一個佈局。我會將其與'left'和'top'一起移除 – Pattle

我正在使用position：fixed，因爲當用戶向下滾動頁面時，需要菜單看起來像它的移動。有沒有另一種方法來實現這一目標？ –

我想出解決方案，我的問題;當時我並沒有意識到在一個元素上使用position: fixed;會使其流出。

首先在不知不覺中，我將position:fixed;添加到父元素>.menu-menu-1-container，這不是必需的，並且無論如何都沒有幫助。我也從這個div中刪除了所有其他樣式，因爲它們是多餘的。

其次我整理了#menuBar;我加了一個100％的高度，並刪除了margin:0 auto;（它沒有做任何事情，因爲我沒有宣佈寬度，也不需要居中，所以這是多餘的）。然後我添加了一個寬度到#menuBar並刪除了左側的樣式屬性。

第三，我發現在主容器div外面有固定側邊欄並用左邊距和底邊填充主容器div的樣式是正確的。

這是與我的代碼和我的CSS的一個片段一個fiddle鏈接如下：

#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; 
}

希望它可以幫助別人與作爲一個固定的位置欄中簡單的東西掙扎。

來源

2017-01-03 11:56:24

如何爲我的Wordpress項目創建一個固定位置側邊欄

回答

相關問題