nav 요소가 페이지 끝으로 확장되었지만 끝나지 않았습니다.

HTML5 및 CSS3을 사용하여 세로 탐색 모음을 만들려고합니다. 메뉴 왼쪽에 메뉴를 표시하고 오른쪽에 나머지 페이지가 있도록하는 것이 좋습니다. 사용자가 아래로 스크롤하면 사용자와 함께 메뉴를 아래로 이동합니다. 지금까지 수직 메뉴를보고 싶지만 나머지는 끝내지 못했습니다. 지금까지 시도한 각 솔루션은 페이지를 이상한 방식으로 구성하거나 자바 스크립트를 사용하는 것을 의미합니다. HTML5와 CSS3만으로 가능합니까? 당신은 래퍼에서 페이지의 나머지 부분을 포장 할 수없는 경우nav 요소가 페이지 끝으로 확장되었지만 끝나지 않았습니다.

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

위치를 시도한 적이 있습니까? nav 요소에서 고정 되었습니까? – thefrontender

나는 가지고있다. 그러나 그것은 그것을 페이지에서 끌어 낸다. 페이지가 더 이상 흐르지 않고 뒤에서 흐르기 때문에 더 나쁜 것입니다. – JadziaMD

그래서 스크롤 할 때 내용이 둘러 쌓인 메뉴가 창의 상단에 '떠 다니기'를 원하십니까? – thefrontender

, 당신은

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

nav 요소가 페이지 끝으로 확장되었지만 끝나지 않았습니다.

답변

관련 문제