웹마스터 팁

  2. Support
  3. 웹마스터 팁

CSS + HTML 메뉴

2016.03.10 11:39

마루디자인

자바스크립트를 사용하지 않고 마우스오버 메뉴를 만드는 방법 입니다
모바일에서 터치로 대신 hover를 대신할 수 있어서 반응속도 부분도 만족 스럽습니다

간단하게 원리를 설명하면
자식엘리먼트에 focus나 hover 동작시 스타일이 유지되는점을 이용하여 구현한 것 입니다

 

1
2
3
4
5
6
7
8
9
.menu1 ol{margin:0;padding:0;list-style:none}
.menu1 li{display:inline-block;min-width:80px}
.menu1 li ol{position:absolute;display:none}
.menu1 li ol li{display:block;line-height:32px}
.menu1 li ol li a{display:inline-block;width:100%}
.menu1 li ol li ol{left:100%;bottom:0;top:0;background:#f7f0ff}
.menu1 li:hover > ol{display:inline-block}
.menu1 a{display:block;background:#f7f7f7}
.menu1 a:hover{display:block;background:#eee}
태그 연관 글
  1. [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? by Alexander *2
  2. [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. by Spooky *1
  3. [2018/08/09] 묻고답하기 니코 위젯스타일 제목 색상을 바꾸고 싶어요? by 호돌이옆집아저씨
  4. [2017/08/21] 묻고답하기 레이아웃 수정 좀 봐주세요 by 예스24 *2
  5. [2017/08/08] 묻고답하기 메뉴바하고 이미지를 중앙에 고정하고싶어요. by 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
에디터의 옵션 설정하기.. 컴포넌트 보이지 않게 등.. [4] 지허 2007.10.01
다중의 이종 웹 브라우저에서 웹 사이트 테스트하기 [1] NetEagle 2007.10.01
페이지에 설문 조사 넣기 [2] 지허 2007.10.01
회원가입 약관 관련. [2] rickey 2007.09.28
(보드 모듈) 글 목록을 조회수 별로 색상 지정하기 [15] file Simulz 2007.09.27
로고에 플래시파일 사용하기 [2] 팔공산 2007.09.26
(모듈 설정) 모듈 목록을 추가하여 설정을 쉽고 빠르게 #2, 2007-09-28 [3] file Simulz 2007.09.23
제로보드 XE 설치후에 제대로 작동 안하는 원인은... 독도2005 2007.09.22
<수정>사이트 메신저 회원 연동해서 사용하기.... [3] 녀석참 2007.09.22
공지창 소스 [2] 열린 공간 2007.09.21
(포인트 모듈) 추가 정보 출력 [8] file Simulz 2007.09.20
새 공지창 띄우기 [22] *제트* 2007.09.20
정사각형 썸네일은 안녕~ 직사각형 썸네일을 만들어보자 [8] 매니안 2007.09.19
제로보드 XE에서 강추하는 플래시 넣기 [12] 미오유 2007.09.19
게시물 읽을 때 하단에 목록 보이지 않게 하기 [3] 정은기 2007.09.17
winxp IE7 rwapm에서 한글이름파일 업로드 [12] 공수래 2007.09.17
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [11] 써니a 2007.09.17
2차,3차 메뉴가 좌측으로 일렬로 되어있어 구분이 잘 안됩니다,이럴 때~ [7] file *제트* 2007.09.16
메뉴와 연결된 xe의 page에 iframe을 사용해서 제로보드4 게시판을 불러들였습니다 [2] 바람처럼.. 2007.09.14
파일 업로드시에 403에러 발생시 해결방법. [12] WhiteAT 2007.09.12
태그 쓰기