롤오버의 배경 이미지 세로 메뉴

이전 기사에서 우리는 CSS에게 사용하는 방법을 보았다 mouseover 효과와 세로 메뉴를 당신이 마우스를 이동하는 항목을 표시하는 다른 배경 색상을 사용하여.

우리는이 예제를 다시이 메뉴의 두 가지 핵심 기능을 추가, 확대 : 향상된 액세스 탄환의 사용과 디자인 측면에서 더 나은 성능을 통해.

여기에 우리가 얻을 원하는 결과는 다음과 같습니다

마우스 포인터의 화면 예제에서는 메뉴에서 두 번째 링크를 고정합니다.

이 두 이미지의 이름과 menu_1.gif의 menu_2.gif를 제공 예를 들어 사용됩니다 :

크기 (150X22 픽셀)가 어디에 있었는지 개별 항목에 할당된 상자에서 글꼴 크기와 여백의 너비에 맞게 만든.

저는 레이아웃과 요구에 적절한 크기 사용자 지정 이미지를 만드는 독자를 초대합니다.

하자 연습은 메뉴를 그리기 시작. 우리는 HTML 코드를 분석 :

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> 페이지 1 </ A> </ 리>



        



 <li> <a href="#"> 페이지 2 </ A> </ 리>



        



 <li> <a href="#"> 페이지 3 </ A> </ 리>



        



 <li> <a href="#"> 4 페이지 </ A> </ 리>



        



 <li> <a href="#"> 5 페이지 </ A> </ 리>



    



 </ UL>







 </ 사업부>

모든 메뉴는 우리가 링크를 포함하는 글머리 기호 목록을 만들 수있는, "메뉴"라고 표시된 상자에 것입니다.

어떤 ID와 요소의 중첩에 의해 전적으로 식별에 따라 메뉴 항목 (목록, 목록, 링크), 어떤 링크를없이 클래스를 지정하지 마십시오.

적절한 발언과 함께 CSS를 다음과

 / *화한 generically DIV 태그 * /









 피







 {



    



 글꼴 크기 : 10px;



    



 글꼴 가족 : verdana;







 }









 / *이 메뉴의 배경과 상자의 너비를 지정 * /









 # 메뉴







 {



    



 배경 : # CCDDEE;



    



 폭 : 150px;







 }









 / * 메뉴에 포함된 UL 태그에서 기본 스타일을 삭제 * /









 # 메뉴 UL







 {



    



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



    



 리스트 스타일 타입 : 없음;







 }









 / 메뉴에 *화한 목록 * /









 # 메뉴는 것입니다







 {



    



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



    



 국경 - 하단 : # FFFFFF 고체 1px;







 }









 / * 메뉴의 목록에서 링크 스타일을 지정 * /









 # 메뉴 리, 그들 : 가져가







 {



    



 디스플레이 : 블록;



    



 위치 : 상대적;



    



 텍스트 장식 : 없음;



    



 색상 : # 192939;



    



 글꼴 무게 : 굵게;



    



 패딩 : 5px 5px 5px 5px;







 }









 / * 기본적으로 링크의 배경을 설정하고 mouseover는 * /









 거기 # 메뉴







 {



    



 배경 이미지 : URL (menu_1.gif);







 }







 가져가 # 메뉴는 것입니다







 {



    



 배경 이미지 : URL (menu_2.gif);







 }

위에서 언급한 바와 같이 요소의 둥지의 작업이 어떤 양식에 일치시키는 것과 함께 나타납니다 유일한 총알이 ID와 함께 상자 안에 둥지의 결과로, 메뉴 있는지 확인 "메뉴."

사이트의 다른 모든 총알은 기본적으로 그들의 방법이 아니면 명시적으로 CSS를 통해 할당됩니다.