-
[마이피] 마이피 꾸미기 / CSS로 내려오는 (드롭다운) 메뉴 만들기2012.05.22 PM 07:25
작성 자체는 한참 예전에 했는데 까먹어서 이제야-_-;
C언어도 다시 해야하는데 요즘 너무 애니만 보고 헤헤 거리네용;
-
내려오는 메뉴, 그러니까 드롭다운 메뉴는 여러가지 제한이 있는 마이피에선 그렇게 예쁘게 만들 순 없지만
제 마이피 처럼 1단 레이아웃 사용자라면 예쁘던 말던 정말 좋은 기능이죠. 많은 메뉴를 한줄로 팍 줄일 수 있으니까요
이 글에선 간단하게 원리만 설명하며, 미리 작성된 파일을 첨부하였으니 다운받아서 이것저것 연습해보셔요' v')
또한 이 글은 어느정도 HTML/CSS에 대한 사용법을 알고 있는 분을 대상으로 작성되어있습니다
[ 드롭다운 메뉴.html ] 다운로드
(다운로드가 안 될 경우, 마우스 우클릭후 '다른 이름으로 저장'을 클릭해주셔요)
-
기본 HTML 코드
<div class='rkmenu'> <ul> <li class='mm'> <p>메뉴 1</p> <ol class='um'> <li><a href=''>메뉴 1의 하위 링크 1</a></li> <li><a href=''>메뉴 1의 하위 링크 2</a></li> <li><a href=''>메뉴 1의 하위 링크 3</a></li> </ol> </li> <li class='mm'> <p>메뉴 2</p> <ol class='um'> <li><a href=''>하위 링크 2-1 에프릴 룰루</a></li> <li><a href=''>하위 2-2</a></li> <li><a href=''>하위 2-3</a></li> </ol> </li> <li class='mm'> <p>메뉴 3</p> <ol class='um'> <li><a href=''>하위 3-1</a></li> <li><a href=''>하위 3-2</a></li> <li><a href=''>하위 3-3</a></li> </ol> </li> </ul> <div class='clear'></div> </div>
CSS
ul, ol { list-styte-:none; margin:0; padding:0; }
.rkmenu { background:#eee; padding:0 10px; }
.mm { float:left; width:100px; }
.um { display:none; p-osition: absolute; } /* ※ p 다음의 - 를 지워주셔야합니다 */
.mm:hover .um { display:block; background:#FFF; border:1px solid #999; padding:5px; margin:10px 0 0 0; } /* 아래 참고*/
.clear { clear:both; }
웹문서 결과
-
먼저, 디비전(이하 div)으로 한번 감싸고, 그 안에 아무 리스트나 만듭니다 ─ ⓐ
(위엔 언/오더로 구분되어있지만 아무거나 써도 상관없어요)
그 리스트의 아이템(li)에 보일 텍스트를 적고, 추가로 하나의 리스트를 더 만듭니다 ─ ⓑ
마지막으로 ⓐ가 끝난 다음엔 꼭 clear:both 를 사용하여 꽉 잡아줘야합니다
.mm:hover .um 의 마지막에있는 margin은 총 4개의 값을 가지고있는데, 순서대로 상/우/하/좌입니다
마이피에 저 CSS를 그대로 넣으면 아마 아래가 아닌 우측으로 나오게되는데
이럴땐 margin:15px 0 0 -50px; 를 넣어주면 해결됩니다
이때, ⓐ는 처음 보이는 메뉴입니다. 여기에 마우스를 가져가야 ⓑ가 나오죠
ⓑ는 ⓐ의 하위 메뉴입니다. 여기가 실제 링크된 부분이죠
대충 그림으로 보자면 아래와 같습니다
그림
HTML은 저렇게 구성되었고 다음은 CSS쪽을 봅시당
ul, ol { list-styte-:none; margin:0; padding:0; }
언/오더 리스트의 스타일을 제거하고 내/외부의 여백을 전부 0으로 설정입니다
.rkmenu { background:#eee; padding:0 10px; }
.rkmenu는 전체를 묶는 div이며, 이부분은 단순히 눈에 잘 띌 수 있도록 해주는 부분입니다 (...)
다른분들은 각자 자기 입맛에 맞춰 바꿔주셔요
.mm { float:left; width:100px; }
.mm은 첫번째 리스트(ul)의 리스트 아이템(li)입니다
float:left는 모두 좌측으로 위치(부유)하는것이고, width:100px 은 보는 그대로 가로 100픽셀로 설정입니다
.um { display:none; p-osition: absolute; }
.um은 두번째 리스트(ol)입니다
display:none 는 화면에 보이지 않도록 숨기는것 입니다. p-osition: absolute는 .um을 절대고정하도록 합니다
만약 p-osition: absolute 를 하지 않는다면, 숨겨진 메뉴가 나타날때마다 메뉴 아래의 모든 부분이 나타나는 메뉴의 높이만큼 아래로 녀라게됩니다
.mm:hover .um { display:block; background:#FFF; border:1px solid #999; padding:5px; margin-top:-10px; }
좀 어려운 부분입니다. .mm:hover 는 '마우스가 .mm에 올라가있을 때'를 뜻합니다
즉 .mm:hover .um은 '마우스가 .mm위에 올라가 있을 때의 .um'입니다 (...)
바로 위의 .um과 다르게, display:block으로 보일 수 있도록 되어있습니다
그 이후는 디자인적인 부분이니 그냥 넘어가겠습니다 (...)
.clear { clear:both; }
.mm에서 사용한 float을 제자리에 붙잡는 역할입니다. 설명이 이상하지만-_-;
사용하지 않는다면, .mm이후 모든 요소가 .mm의 우측에 붙어있는 상태로 나오게됩니다
위에서 가장 중요한 부분은 .um 과 .mm:hover .um 입니다
.um에선 보이지 않도록 설정해놓았지만, .mm에 마우스를 올려놓게되면 보이게하는 역할입니다
-
아우으 머릿속에있는걸 글로 쓰기가 어렵네요-_-; 글쓰는 능력도 애들같공;
예제파일을 보고 이것저것 주물주물해보시면 아마 무슨 말인지 아실겁니당;
아우 책을 읽어보며 글쓰는것도 연습해야하나ㅠㅠ