웹마스터 팁

  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 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
나만의 미니홈 만들기 ㅡ메뉴에 게시판 연결 [5] file 예뜨락 2004.12.17
메뉴에 새 글 표시 모듈 사용 시 new 아이콘이 보이지 않는 버그 수정 [8] 퍼니엑스이 2014.08.12
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 file 미연조 2016.07.08
CSS + HTML 메뉴 마루디자인 2016.03.10
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
php 5.6 이상에서 사이트 메뉴 편집 등 오류 발생시 YJSoft 2015.08.12
레이아웃 메뉴에서 메뉴옆에 글수 표시하기 반걸 2015.07.20
Font Awesome 메뉴바에 적용하기 file 불금 2015.06.13
코어 1.5 모바일에서 닉네임 클릭시 팝업 메뉴안 뜰때.. 착한악마 2015.06.03
도메인이 바뀐후 기본 URL을 바꿨지만 2차메뉴의 링크는 바뀌지 않은 경우. [9] Ryuj 2013.11.20
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] file 조성우371 2009.01.17
모바일뷰 사용하는 경우, 사이트맵에서 메뉴 생성시, 모바일 뷰 가 자동으로 체크되도록 sejin7940 2014.09.10
CafeXE (homepage 모듈) 메뉴노출 권한오류 수정안. Xiso 2014.08.22
스케치북 게시판 메뉴얼 [1] socialskyo 2014.08.21
관리자설정-> 관리자 메뉴설정 에서 삭제가 안 되는 현상 수정하는 방법 [1] sejin7940 2014.08.11
1.7 버전 사이트 메뉴 편집 사용법 [4] file 휘즈 2013.07.27
메뉴가 많을때 레이아웃 쉽게 변경하기 웹빌드ver2 2014.05.23
쭘식 메뉴만들기 - 세로 슬라이드 메뉴 [11] file 쭘's 2003.04.29
펼침 목록 메뉴 만들기! (나모) - 쭘's [8] file 쭘's 2003.03.25
나왔다 드러갔다하는 메뉴.. [15] file Mr. JH 2002.05.17
태그 쓰기