수직 CSS 메뉴 : 직접하십시오

일부 웹 마스터는 이미 존재하는 단순한 요소를 처음부터 개발하는 데 시간을 낭비하고 싶지 않습니다. 그들은 오래 있었던 것에 시간을 낭비하는 것이 이치에 맞지 않는다고 생각합니다. 사실, HTML 및 CSS를 배우는 사람들에게는 자신의 업무를 잘 이해하기 위해 많은 일을하는 것이 중요합니다. 이것은 메뉴에 적용됩니다. 수직 CSS 메뉴를 만듭니다. Javascript와 JQuery를 사용하지 않고 HTML과 CSS만을 기반으로합니다. 각 메뉴는 사이트의 페이지로 연결되는 링크 목록입니다.

기본 단계

복잡하지 않은 수직 CSS 메뉴 를 만들려면 다음과 같은 순서가 필요합니다.

1. 먼저 메뉴가 구성 될 링크 목록 (HTML 코드 사용)을 결정하십시오. 다음과 같이 이름을 지정하십시오.

1. 집.
2. 우리의 역사.
3. 리더십.
4. 서비스.
5. 연락처.

2. 그런 다음 CSS를 사용하여 원하는대로 링크를 양식화합니다.

HTML 코드를 작성 하여 my_Vmenu.html에 저장하고 브라우저에서 어떻게 보이는지 봅니다.

이것이 우리 메뉴의 기본 (골격)입니다. # 1, # 2 등 링크로 교체해야합니다. 브라우저에서 어떻게 보이는지보십시오. 너는 그림을 좋아하지 않을 것이다. 이제 전체 수직 CSS 메뉴를 만들기 위해 요소의 스타일을 설명해야합니다.

스타일 설명

my_Vmenu.css라는 파일을 작성하십시오.이 파일에서 사이트의 중요한 요소의 모양을 향상시키려는 항목을 설정할 수 있습니다. 아래는 코드입니다.이 코드는 수직 CSS 메뉴를 구현합니다. 생성 된 파일에 기록한 다음, 여기에 나열된 주요 줄이 무엇인지 자세히 살펴볼 것입니다.

사용 된 스타일에 대한 자세한 설명

이제 CSS 수직 메뉴를 자세히 살펴 보겠습니다.

목록 스타일 유형을 사용하면 목록 표시자를 제거 할 수 있습니다. 여백과 여백에 "0"을 사용하여 목록에서 여분의 들여 쓰기를 제거하십시오. HTML 코드에서 볼 수 있듯이 메뉴는 목록이고 CSS는 스타일을 설정합니다.

Ul # my_Vmenu - 전체 목록의 일반적인 스타일.

Ul # my_Vmenu li a - li 태그 사이의 링크 스타일.

Ul # my_Vmenu li a : 호버는 한 사람이 커서를 가리키고있을 때 메뉴의 항목 유형에 대한 설명입니다.

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 메뉴는 쉽게 만들 수 있습니다. 지식을 바탕으로 온라인 리소스 방문객에게 아름답고 매력적인 사이트를 만들 수 있습니다! 상상력을 사용하면 세련된 메뉴가 사이트를 장식합니다.