웹마스터 팁

  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 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
CentOS 6.x 에서 OpenSSL Heartbleed 취약점 업데이트 마루디자인 2016.02.23
PHP7에서 XE설치시 텍스트 다 깨져서 나올 때 꼬부기 2016.02.23
외부 페이지에서 XE 기능을 추가 할때 410contents 2016.02.25
서버의 파일권한 맞추기. 마루디자인 2016.03.01
[속도 향상] 불필요한 애드온 끄기 다미아빠 2016.03.06
호스팅 변경이나 이전시 썸네일 문제 점검사항 맥노턴 2016.03.07
CSS + HTML 메뉴 마루디자인 2016.03.10
고정도메인 host 변경하기 해피정닷컴 2016.03.11
게시판이 있는데 관리자 페이지에 나타나지 않을 경우 해결 방법 퍼니엑스이 2016.03.20
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 sejin7940 2016.04.03
IIS에서 HTTPS를 사용하기 위한 SSL설정 (letsencrypt 인증서 설치, 갱신) file ehii 2016.04.13
[개발팁] Console에서 디버깅 시 발생하는 x.js Deprecated 오류 제거 하기 SimpleCode 2016.04.19
[시니시즘] XE의 XML Query 관련 팁 시니시즘 2016.04.26
사용자정의 기준으로 정렬을 했을 경우 최신글이 목록 상단으로 뜨도록 수정법 ( 현재 최신글이 하단에 뜸 ) sejin7940 2016.05.25
CentOs7에서 중국 IP 차단하기 [5] file 카르마 2016.06.02
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] djdisodo 2016.06.04
하나의 웹서버에 php5, php7 설치하기 라온넷닷컴 2016.06.10
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 file 미연조 2016.07.08
아이콘 폰트 축소 서비스 easylogic 2016.08.11
xe 사이트에 응용프로그램으로 오토포스팅은 안됩니다. 최윤한 2016.08.17
태그 쓰기