테스트로 뭔가를 시도했지만 올바른 방법으로 프로그램하는 방법을 잘 모릅니다. 누군가가 나를 도와 줄 수 있기를 바랬습니다.메뉴의 크기로 내용을 조정하십시오.
제가 달성하고자하는 것에 대해 좀 더 분명하도록 스케치했습니다. 왼쪽의 메뉴는 정확한 위치에 있어야합니다.
원하는 결과를 얻는 것이 올바른 방법이라고 생각하십니까? 또는 이것을 달성하기 위해 더 나은/청결한 방법을 제안 할 수 있습니까? (jsfiddle의 예가 좋을 것입니다.)
미리 감사드립니다!
편집 : 메뉴의 높이가 동적이어야 함을 알려 드리고 싶습니다. 예를 들어, 추가 메뉴 항목을 추가하면 어떻게됩니까?
이런 뜻입니까?
그냥 오히려 수레를 이용하여
*{
\t box-sizing:border-box;
\t margin:0px;
\t padding:0px;
}
#head{
\t background-color:#000;
\t border-bottom:#333 solid 1px;
\t display:block;
\t padding:10px 0px 0px 10px;
}
#head ul{
\t background-color:#f00;
\t display:block;
\t width:150px;
\t position:relative;
\t list-style:none;
\t margin:0px;
\t text-align:center;
}
#head li{
\t display:none;
}
#head input{
\t display:none;
}
#head input:checked ~ li{
\t display:block;
}
#head input:checked ~ label{
\t background-color:#511;
\t color:#fff;
}
#head label{
\t font-family:Constantia;
\t width:100%;
\t padding:10px 0px;
\t color:#333;
\t border-bottom:#111 dotted 1px;
\t display:block;
\t font-weight:bold;
\t text-transform:uppercase;
}
#head label:hover{
\t background-color:#511;
\t color:#fff;
\t cursor:pointer;
}
#head a:link{
\t background-color:#f00;
\t width:150px;
\t display:block;
\t color:#111;
\t text-decoration:none;
\t border-bottom:#333 solid 1px;
\t padding:10px;
\t float:left;
\t margin-right:10px;
}
#head a:visited{
\t color:#111;
}
#head a:hover{
\t background-color:#911;
\t color:#fff;
\t border-bottom:#211 solid 1px;
\t font-weight:bold;
}
#body{
\t padding:10px;
}<div id="head">
\t \t \t <ul>
\t \t \t \t <input type="checkbox" id="menu" />
\t \t \t \t <label for="menu">Menu</label>
\t \t \t \t
\t \t \t \t <li><a href="#">Link 1</a></li>
\t \t \t \t <li><a href="#">Link 2</a></li>
\t \t \t \t <li><a href="#">Link 3</a></li>
\t \t \t </ul>
\t \t </div>
\t \t
\t \t <div id="body">
\t \t \t <h1>Content</h1>
\t \t \t <p> All my content sits here what am I suppose to do?</p>
\t \t </div>을 snipet 코드가 현대 브라우저에서이 만 작품을 내가 체크 박스 해킹 : 여기
을 사용하고 있습니다로주의해야 위치 절대 값보다 브라우저가 헤더 아래에 내용이 있다고 가정하면 절대 위치를 적용하도록 변경해야하지만 여전히 헤더 밖으로 나가지만 c를 차지하지 않습니다. therfore c 잠시 후 옆이나 아래로 이동하지 않고 내비게이션 뒤에서 이동하십시오.
내비게이션 아래로 가기 전에 내용을 조금 더 세밀하게 만들려는 경우 창이 작아지면 내용이 작아 지므로 min-width을 #body{} 태그로 설정해야합니다.
스택 오버플로는 코드 작성 서비스가 아닙니다. – Thielicious
'최소 높이 : 321px; – jayms