일부 웹 마스터는 시간 낭비를 원하지 않습니다.이미 존재하는 단순한 요소의 처음부터 개발. 그들은 오랫동안 거기에 있었던 것에 시간을 낭비 할 필요가 없다고 믿습니다. 사실 HTML과 CSS를 배우는 사람들에게는 자신의 작업을 잘 이해하기 위해 스스로 많은 일을하는 것이 중요합니다. 이것은 메뉴에도 적용됩니다. 수직 CSS 메뉴를 만들어 보겠습니다. HTML 및 CSS 만 기반으로하며 Javascript 또는 JQuery를 기반으로하지 않습니다. 각 메뉴는 사이트 페이지로 연결되는 링크 목록입니다.
기본 단계
간단한 수직 CSS 메뉴를 만들려면 다음 단계의 순서가 필요합니다.
1. 먼저 메뉴를 구성 할 링크 목록 (HTML 코드 사용)을 정의합니다. 다음과 같은 이름을 지정하십시오.
- 집.
- 우리의 이야기.
- 지도.
- 서비스.
- 콘택트 렌즈.
2. 다음으로 CSS를 사용하여 원하는대로 링크 스타일을 지정합니다.
HTML 코드를 작성하고 my_Vmenu.html 파일에 저장 한 다음 브라우저에서 어떻게 보이는지 살펴 보겠습니다.
이것이 메뉴의 기본 (스켈레톤)입니다. # 1, # 2 등 링크로 대체해야합니다. 모든 것이 브라우저에서 어떻게 보이는지 확인하십시오. 당신은 그림을 좋아하지 않을 것입니다. 이제 본격적인 수직 CSS 메뉴를 만들기 위해 요소의 스타일을 설명해야합니다.
스타일 설명
my_Vmenu 파일을 만듭니다.css를 사용하면 사이트의 중요한 요소의 모양을 개선하려는 모든 것을 설정할 수 있습니다. 아래는 수직 CSS 메뉴에 애니메이션을 적용 할 포함 할 코드입니다. 생성 된 파일에 기록한 다음 여기에 제공된 주요 행의 의미를 자세히 살펴 보겠습니다.
사용 된 스타일에 대한 자세한 설명
이제 수직 CSS 메뉴를 자세히 살펴 보겠습니다.
ul # my_Vmenu는 전체 목록의 일반적인 스타일입니다.
ul # my_Vmenu li a-li 태그 사이의 링크 스타일.
ul # my_Vmenu li a : hover는 사람이 항목 중 하나를 가리킬 때 해당 메뉴의 항목 유형에 대한 설명입니다.
ul # my_Vmenu li a span-텍스트 설명 (메뉴 이름).
my_Vmenu.css 및 my_Vmenu 파일을 기억하십시오.html은 하나의 디렉토리에 저장되어야합니다. 그러나 다른 폴더에 위치 할 수 있지만 my_Vmenu.html 파일에 my_Vmenu.css 경로를 등록하는 것이 중요합니다. 초보자는 종종 이것에 문제가 있으므로 조심하십시오.
스타일은 html 파일의 head 태그 사이에 포함되어야합니다. menu_1.png 및 menu_2.png는 메뉴 항목을 정상 상태로 표시하고 마우스를 올려 놓을 때 사용하는 그림입니다.
사진을 별도의 폴더에 저장하는 것이 좋습니다.이미지의 이름을 my_images로 지정한 다음 CSS 코드를 수정합니다. 이 디렉토리에서 이미지가 표시된 곳에 url (my_images / menu_1.png) 및 url (my_images / menu_2.png)을 작성합니다.
CSS 코드에 설명 된 나머지 속성에서이해하기 쉬운. 메뉴의 모양을 정의합니다. 점의 너비와 높이가 정상 상태의 점과 그 위에 마우스를 올려 놓았을 때 동일하게 설정되어 있음을 쉽게 알 수 있습니다. 글꼴 크기는 18px이며 패딩은 항목 제목의 다른면에 패딩을 설정합니다. display 속성을 사용하면 너비와 패딩을 설정하기 위해 블록 단위로 디스플레이를 설정할 수 있습니다.
수직 메뉴
보시다시피 세로 CSS 메뉴는 쉽게 만들 수 있습니다. 지식 기반을 기반으로 인터넷 리소스 방문자에게 아름답고 매력적으로 만들 수 있습니다! 상상력을 발휘하면 세련된 메뉴가 사이트를 장식합니다.
