導航元素擴展到頁面的結尾，但沒有結束

我試圖使用HTML5和CSS3的垂直導航欄。期望的是讓菜單出現在左側，並將頁面的其餘部分放在右側。隨着用戶向下滾動，我希望菜單與用戶一起向下移動。到目前爲止，我已經找到了我想要的垂直菜單，但是我還沒有完成剩下的工作。到目前爲止，我嘗試過的每種解決方案都意味着以奇怪的方式構建頁面或使用Javascript。這可能只使用HTML5和CSS3？導航元素擴展到頁面的結尾，但沒有結束

CSS

/* Menu Navigation Properties */ 
nav 
{ 
    text-align: center; 
    padding-right: 1.0em; 
} 

/* Menu container */ 
nav ul 
{ 
    float: left; 
    list-style-type: none; 
    padding-top: 0; 
    padding-left: 0; 
    padding-right: 0.75em; 
} 

/* Menu item container */ 
nav ul li 
{ 
    margin-top: 0em; 
    margin-left: 0.15em; 
    margin-right: 0.15em; 
} 

/* Menu item Appearance */ 
nav ul li a 
{ 
    background-color: black; 
    color: #D0E2F1; /* Light Blue */ 
    height: 2em; 
    line-height: 2em; 
    width: 9em; 
    display: block; 
    border-width: 0.1em; 
    border-style: solid; 
    border-color: #dcdce9; 
    text-decoration: none; 
    text-align: center; 
} 

/* Menu item hovered over by user */ 
nav ul li a:hover 
{ 
    background-color: #D0E2F1; /* Light Blue */ 
    color: black; 
} 

/* Current Page on the Menu */ 
nav ul li a.current 
{ 
    font-weight: bold; 
}

HTML文件

<html> 
    <body> 
     <nav> 
     <!-- Menu Item List --> 
     </nav> 
     <h1>Page Title</h1> 
     <!-- rest of page --> 
    </body> 
</html>

來源

2013-04-08 JadziaMD

你試過位置：固定在導航元素上？ – thefrontender 2013-04-08 01:55:47

我有，但是把它拉出頁面。這種情況更糟糕，因爲頁面不再流向頁面，而是在頁面後面。 – JadziaMD 2013-04-08 02:05:12

所以你想讓菜單在窗口頂部「浮動」，並且在你滾動時將內容包裹在它的周圍？ – thefrontender 2013-04-08 02:09:09

如果你不能完成的頁面的其餘部分中的包裝，你可以使空間的菜單與

body { 
    padding-left: 10em; 
}

然後修復菜單的位置並將其拉回到主體上的填充所留下的空間

nav { 
    position: fixed; 
    width: 9em; // Probably a good idea to fix the width of the menu 
    margin-left: -10em; 
    ... 
}

如果您可以將包裝頁的其餘部分封裝在包裝中，只需給它足夠的左邊距即可避免菜單出現。

來源

2013-04-08 02:20:55 thefrontender

導航元素擴展到頁面的結尾，但沒有結束

回答

相關問題