웹마스터 팁

  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 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
댓글 수정/ 대댓글 달시에 댓글 공지 넣는법 [8] file 불금 2015.06.17
위젯 복사 팁 - 이걸 왜 이제야 알았을까.. socialskyo 2015.06.17
댓글에 대댓글 달리면 수정 불가능하게 하기 [8] 불금 2015.06.17
원하는 그룹에게 아이피를 전부다 표시해주기 [1] 불금 2015.06.16
SSL의 정석 (아파치 & nginx) [13] 기진곰 2015.06.16
확장변수 검색시 범위 설정해서 검색하는 팁. [2] 키다리아저씨2 2015.06.16
네이버 날씨 위젯 입니다 file codlllle 2015.06.15
페이스북 공유할 때 모바일에서는 이미지 안뜨는 증상 file silhwang 2015.06.14
XE 에 무료 채팅방 설치하기 [6] file 김동재4af45 2015.06.14
자동 저장되었습니다에 초단위 추가 file 불금 2015.06.13
무료 오픈 api가 많은 사이트 [유용] [3] file 김동재4af45 2015.06.13
Font Awesome 메뉴바에 적용하기 file 불금 2015.06.13
상단바 (navbar) 고정 레이아웃 알림센터 close시 밀려나는 현상 해결법 [2] file 불금 2015.06.13
Uchat 에서 XE 프로필 이미지 불러오게 수정하는법 file 불금 2015.06.10
MARIADB or MYSQL 의 INNODB로 엔진 변경 PHP스크립트 간장게장같은남자 2015.06.10
포인트 복권 모듈 관리자 페이지 1.7이상에 맞게 [10] file 착한악마 2015.06.10
간단한(?) 해시태그 소스.. [18] Ikoo 2015.06.10
트래픽 차단된 이미지들 보는 방식 만들었네요. SeungXE 2015.06.10
해당 그룹 or 관리자는 애드온 실행 안되게 하기 [3] 불금 2015.06.10
1.8.3 통합 검색시 제목+내용 으로 하기 불금 2015.06.09
태그 쓰기