CSS ile Açılır (dropdown) Menü Yapımı

안녕하세요, 저는 Tayfun Erbilen입니다 이 비디오에서는 CSS가있는 팝업 메뉴를 보여 드리겠습니다

다섯 번째로이 비디오를 찍을 것입니다 나는 오랫동안 공부하지 않고 습관을 잃어 버렸습니다 지금 Eeeee 물론이 사이트를 사용할 메뉴 디자인에 대한 이력서가 필요합니다

우리는 메뉴를위한 글꼴이 필요합니다 Google의 OPEN SANS 글꼴을 사용합니다 내가 쓸 수있는 파일이 필요해 폴더에 하나의 색인 파일과 하나의 CSS 파일이 있습니다 색인에 표준 HTML 코드를 작성한 후 내 Css 파일을 페이지에 포함시킵니다

예 이제 코드를 입력하기 시작합니다 <ul> <li> 구조체를 사용하여 메뉴 구조를 만들었습니다 카테고리에 따라 팝업 메뉴가 표시됩니다 이제 메뉴를 살펴보고 블로그와 의사 소통을 말하면서 운명을 끝내자 이제는 이렇게 생겼습니다

작은 CSS 설정을 만들어 봅시다 paddingine marginine 및 border를 재설정 한 후에 모든 요소를 ​​선택하면 나는 또한 list-style이라고 말한다 : none 어디 보자 예, 우리는 또한 a가 text-decoration none이라는 밑줄을 제거합니다

이제 나는 같은 시간에 폰트를 포함 할 것이다 latin-ext dial 나는 이것을 먹고있다 위로 Open Sans를 글꼴 패밀리 글꼴 패밀리로 지정하거나 문제가있을 경우 sans-serif를 지정합니다 지금 css로 어떤 일이 일어나고 있는지 살펴 보겠습니다 배경색으로 각 비디오마다 다른 색상을 선택했습니다

이번에는 내가 선택한 것을 선택합니다 바다색과 같은 것 높이 50 px로 높이 제공 ulmenu 나는 그들을 옆으로 데리고 가서 보자 높이도 50px로 제공합니다

나는 a를 블록 수준에서 편집 할 수있는 요소로 변형 시켰습니다 나는 글꼴 크기를 14px 글꼴 색칠하여 흰색 패딩을 만들었습니다 0 15px라고 말합니다 50px의 선 높이 예, 친구와 같은 문제는 없습니다 지금 그것 밑에 그러는 동안 나는 여기에서 높이를 말할 필요가 없었지만 나는 메뉴에 다른 것을 만들 것이지만 그렇지 않다

우리의 좋은 관리가 불필요한 것처럼 보인다 나는이 카테고리 1 카테고리 2 카테고리 3 디올을 친구로 여는 중입니다 카테고리 4를 새로 작성하십시오 이제 하단 메뉴에서 동일한 CSS를 읽게됩니다 그러나 이것은 친구가되어서는 안된다

우리는 이렇게 할 것입니다 이것은 첫번째 <li>의 첫 번째 <a>, <li> 첫 번째 <li> 그래서 우리는 성가신 존재가 아닙니다 그 동안 내 <li> 국경까지 확장됩니다 그래서 우리는 그것을 줄 수 있습니다 <a>이 경계가 아니라면, 문제는 삶입니다

우리는 이제 우리의 부하를 형성합니다 * 경찰에 관한 이야기 ​​sireni * 200 픽셀 너비로 만들고있어 <ul> 하위 메뉴를 편집 중입니다 <a> 패딩 : 7px 12px; 글꼴 흰색 예, 글꼴 크기는 14px입니다 ok는 모든 것이 멋지다

그러나 만일 당신이이 장소의 폭을 알아 차렸다면이 장소의 폭은 그에 따라 증가했다 하지만 우리는 이것을 원하지 않으므로 절대 위치를 정하고 위에 0p로 50p라고 말하십시오 그러나 그 안에 중심을두기 위해서는 <li> 그래서 나는 상대방을 유지하기 위해해야 ​​할 일을해야한다 내 메뉴 ok shan은 나머지 부분을 모두 열어 두는 것이 좋습니다 (드롭 다운)

나는 그것을 숨기기 만한다 display : none 나는 친구라고 말했다 어떻게 지금 열지? ulmenu의 첫 번째 <li> 호버가 표시되면 <ul>이 (가) 표시됩니다 : 내 친구를 차단합니다 *라는 것은 * 열리는 것을 보는 데 아무런 문제가 없다

그러나 그것은 매우 죽었다 전시 : 아무도 전시 : 그것이 조금 이었다는 것을 어리 석다 차단하십시오 그래서 그것을 불투명하게하자 : 0 호버가 opacitysini 1 일 때 친구를 지금 봅시다

이제 우리는 애니메이션이 필요하기 때문에 다시 변경되지 않았다는 것을 눈치 채지 못했습니다 이 <ul> 전환에서부터 : 250ms 모두 모든 기능에 대해 025 초의 애니메이션 예 샨이 조금 더 미학적이었습니다

하지만 내가 여기 올 때 그것에 이상한 것이있다 불투명도를 떨어 뜨 렸지만 마크를 숨기지 않았기 때문입니다 우리가 표시하면 어떻게되는지 보자 none 표시 : 차단 불행히도 우리는 애니메이션을 잃고 있습니다 그래서 그것은 표시되지 않습니다 : 없음 가시성 : 나는 숨겨진 친구들을 말할 것입니다 너 어디 선가 봐라

부끄러워하지 않는다 그러나 visiblity에 올 때 : 눈에 보이는; 내가 볼 수 있도록 친구들을 만들고있어 그리고 나는 불투명도 100 %를 자연스럽게하고 있는데, 나는이 같은 결과를 얻는다 조금 나아지다 일반적으로 상단에서부터 50 픽셀입니다

30 픽셀에서 시작하겠습니다 친구의 경우 50 픽셀을하자 나는 지금보고있다 네, 이번엔 너무 아름다워 보여요 꽤 좋은 당신이 원한다면 우리는 멀티 드롭 다운에서 그것을 할 수 있습니다

카테고리 3 친구에게 하위 메뉴 추가 하위 메뉴 1 하위 메뉴 2 하위 메뉴 3 서브 메뉴 3에 서브 메뉴를 추가하십시오 하위 Alt 메뉴 1 <li> 하위 메뉴 2 </ li> 충분히 네, 지금 찾고 있습니다 지금 친구는 왼쪽에있는 첫 번째 하위 남자를 향해 오른쪽 : 0 top : 50px 그러나 그 후에 나는 이런 것을해야만합니다 예 : ulmenu 첫 번째 <li> UL의 울룸에 관한 얘기입니다

즉이 첫 번째 드롭 다운 메뉴와 다른 하위 메뉴입니다 이것은 200px 친구를 얻는 왼쪽 값에서 그들 중 최고 값 0에 무슨 일이 일어나는가입니다 그래서 당신은 그들과 똑같이 그들을 보러 와야합니다 그러나 지금 내가 그것에 올 때 그것은 다른 것에 열리고 그것이 있어서는 안된다 우리는 변화를 일으킬 것이다

큰 머리 표를 붙이면 첫 번째 메뉴가 열립니다 이제 이것은 일반 메뉴의 첫 번째 드롭 다운을 여는 데 필요한 호버 코드입니다 또한 드롭 다운 메뉴 안에 드롭 다운을 열려면 마우스를 움직여 코드를 작성해야합니다 첫 번째 <li> ul의 ul에서 : 첫 번째 ul을 열 때 마우스를 올리면됩니다 아니면 나는 그것이 될 것이라고 생각한다

나는 그것들을 같은 방식으로 적용한다 이제 보자 네, 보는 것만 큼 아름답습니다 여기에서는 ul'min의 하위 메뉴와 관련된 위치를 적용해야합니다 올바른 장소에서 볼 수있는이 방법을 친구가 참조하십시오

이제 왼쪽에서 오른쪽으로 위에서 아래로 내려 오는 것을 보면서 애니메이션이 그 안에 있습니다 첫 번째 단계에서 열리므로 팝업 메뉴의 왼쪽 값은 180 픽셀입니다 왼쪽 가치 200px로 친구를 사귈 때 그래, 나는 그것이 더 좋다라고 생각한다 마지막으로, 우리는 우리의 배경색을 다음과 같이 열어 놓을 것입니다 네, 이것이 우리 수업입니다

희망은 유용하다 css 당신이 할 수있는 많은 좋은 것들이있다 특히 양식 요소를 사용자 정의하기 위해 나는 CSS와 동일한 버전을 준비 할 것임을 알고 있어야한다 나는 과정이 빠르지 않기를 바란다 나는 그런 문제가 있음을 안다

나는 천천히 그리고 분명히 가능한 한 글을 쓰려고했지만 오랜 시간이 지난 후에 나는이 점에서 조금 강요 당할 수있다 그것을 찾지 마라 다른 사람을상의하기 위해 자신을 잘 돌 봅니다