페이지의 하단에 고정 남아 떠있는 메뉴

일부 일 전 고객 관계없이 해당 위치에 고정 유지하는 까다로움을 가지고 페이지의 하단에있는 수평 메뉴를 만들어달라고 부탁 :

• 웹 페이지의 콘텐츠의 길이;
• 사용자의 화면 해상도;
• 페이지의 스크롤;

본질적으로 : 우리의 메뉴는 바닥에 움직이지 유지하고 가능한이 페이지를 스크롤 있지만 항상 표시되어야합니다 ... 떠있는 메뉴 (메뉴 떠있)이어야합니다.

CSS 덕분에 같은 메뉴가 실제로 매우 간단하다!
우리가이를 수있게 주요 속성은 고정으로 가치 있어야합니다 위치입니다.
하지만,이 단계적으로 간다. 첫째, 우리 메뉴에 대한 컨테이​​너 역할을 우리의 웹사이트 내의 DIV를 작성 :

 <div id="footer">







 <ul>



  



 <li> <a href="/"> 홈 페이지 </ a> </ 리>



  



 <li> <a href="/chi-siamo.html"> 회사 소개 </ A> </ 리>



  



 <li> <a href="/dove-siamo.html"> 위치 </ a> </ 리>



  



 <li> <a href="/prodotti.html"> 제품 </ A> </ 리>



  



 <li> <a href="/listino.html"> 목록 </ a> </ 리>



  



 <li> <a href="/contattaci.html"> 문의 </ a> </ 리>







 </ UL>







 </ 사업부>

당신이 볼 수 있듯이 우리는 단순히 ID를 ( "바닥글") 할당하여 DIV를 작성하고 그 안에 우리는 (이 경우에는 우리가 일반적으로 목록 항목을 통해 관리해야하는) 우리의 메뉴를 추가했습니다.
우리는 우리가 원하는 효과를 만들 수있는 전체 코드를 사용할 아래 참조 :

 몸







 {



  



 여백 : 10px 0px 0px 0px;







 }







 # 바닥글







 {



  



 위치 : 고정;



  



 하단 : 0px;



  



 폭 : 100 %;



  



 텍스트 정렬 : 센터;



  



 배경 컬러 : # CCCCCC;



  



 국경 가기 : # 000000 고체 1px;







 }

첫째, 우리는 왼쪽과 하단에있는 권리를, (우리 예제에서, 상단 여백이없는 것입니다) 제거하여 신체의 여백을 설정합니다.
"고정 위치"낮은 위치 (하단 : 0px)와 너비 (페이지의 100 %) 우리는 ID "바닥글"집합과 함께화한 사업부를 즉시.

위의 코드는 모든 최신 브라우저 (IE7, 파이어 폭스, 사파리, 크롬 등.)와 올바르게 작동,하지만 불행히도 여전히 널리 사용되고 IEXPLORER 버전 6이 작동하지 않습니다! 이 코드를 추가해야합니다 있도록이 문제를 해결하려면 :

 # 바닥글 HTML







 {



  



 위치 : 절대;



  



 상단 : 표현 ((0 - (FOOTER.offsetHeight) + (document.documentElement.clientHeight document.documentElement.clientHeight :? document.body.clientHeight) + (= ignoreMe document.documentElement.scrollTop document.documentElement.scrollTop : 문서. body.scrollTop)) + '픽셀');







 }

"위치 : 고정"IEXPLORER의 이전 버전에서는 작동하지 않습니다 그리고 우리는 "위치 : 절대"로 리조트해야 동적 상단 (소위 동적 속성)을 통해 표현의 가치를 설정하여.

우리는 다시 스트레스, 그 '위치 : 고정 "당신은 제대로 페이지의 DOCTYPE을 설정한 경우에만 IExploer 7 올바르게 작동합니다!.

마지막으로 우리는 단지 글머리 기호 목록으로 만든 귀엽 우리의 메뉴를 만들기 위해 CSS의 다른 비트를 추가하는가 :

 # 바닥글 UL







 {



  



 목록 스타일 : 없음;



  



 여백 : 0px;



  



 여백 : 10px 0px 10px 0px;







 }







 # 바닥글 그들







 {



  



 디스플레이 : 인라인;



  



 폭 : 100px;



  



 여백 : 10px 0px 0px 0px;



  



 패딩 : 4px;



  



 테두리 : # 000000 고체 1px;



  



 배경 컬러 : # EEEEEE;







 }







 에 # 바닥글







 {



  



 색상 : # 333333;



  



 텍스트 장식 : 없음;







 }

완벽하게 결과를 감사하려면, 당신은 이미 콘텐츠가 가득한 페이지에 코드를 입력해야합니다.

아래의 결과 화면은 다음과 같습니다 :