웹마스터 팁

  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 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
member 모듈 메일인증을 사용할때 모바일 기본스킨에서 회원가입 후 이메일 발송 안내 띄우기 [2] file 후하니 2015.08.01
새로고침 없는 실시간 웹서비스를 위한 기술과 간략한 역사(?) [1] onTrust 2015.07.27
[실험팁] XE 고용량/큰사진 썸네일 깨지는 것 해결 socialskyo 2015.07.20
레이아웃 메뉴에서 메뉴옆에 글수 표시하기 반걸 2015.07.20
DB에서 직접 시퀀스 생성하기 [3] 기진곰 2015.07.18
CloudFlare 사용시 방문자 IP와 SSL 접속여부가 정확하게 파악되지 않는 문제 해결법 [4] 기진곰 2015.07.12
IIS서버 자동 설치 프로그램(PHP, MySQL, phpMyAdmin) [1] 공처아찌 2015.07.12
모바일에 최적화된 화면으로 보기 문구가 레이아웃을 가리는 문제 creative8 2015.07.11
config 파일을 일반 유저가 쓸 수 없는 문제 해결법 [15] wkp 2015.07.09
문서페이지가 수정이 되지 않는 문제 [2] file monet 2015.07.07
위젯 가운데 정렬 하는법 [3] 불금 2015.07.05
홈페이지 제작 시 점검사항 15가지 [1] 유래유거 2015.06.29
사이트 서버 운영체제와 사용하는 웹서버 소프트웨어 알아보는 사이트 file 후하니 2015.06.28
홈페이지 속도가 느린 이유.(팁같지도 않은 팁) [11] 가브리엘조 2015.06.27
cloudflare api 용 curl 기본값 마루디자인 2015.06.24
추천검색어,실시간인기순위 소스 file codlllle 2015.06.21
실시간 rss 피드글 출력 위젯 file codlllle 2015.06.20
다음 위젯 뱅크를 대신할 위젯 베스트! codlllle 2015.06.20
자신이 쓴 글에 특정유저 댓글을 차단 Ikoo 2015.06.20
다음 실시간 검색어 위젯 file codlllle 2015.06.19
태그 쓰기