웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
CSS + HTML 메뉴
2016.03.10 11:39
자바스크립트를 사용하지 않고 마우스오버 메뉴를 만드는 방법 입니다
모바일에서 터치로 대신 hover를 대신할 수 있어서 반응속도 부분도 만족 스럽습니다
간단하게 원리를 설명하면
자식엘리먼트에 focus나 hover 동작시 스타일이 유지되는점을 이용하여 구현한 것 입니다
1
2
3
4
5
6
7
8
9
|
.menu 1 ol{ margin : 0 ; padding : 0 ; list-style : none } .menu 1 li{ display :inline- block ; min-width : 80px } .menu 1 li ol{ position : absolute ; display : none } .menu 1 li ol li{ display : block ; line-height : 32px } .menu 1 li ol li a{ display :inline- block ; width : 100% } .menu 1 li ol li ol{ left : 100% ; bottom : 0 ; top : 0 ; background : #f7f0ff } .menu 1 li:hover > ol{ display :inline- block } .menu 1 a{ display : block ; background : #f7f7f7 } .menu 1 a:hover{ display : block ; background : #eee } |
태그 연관 글
- [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? *2
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
- [2018/08/09] 묻고답하기 니코 위젯스타일 제목 색상을 바꾸고 싶어요?
- [2017/08/21] 묻고답하기 레이아웃 수정 좀 봐주세요 *2
- [2017/08/08] 묻고답하기 메뉴바하고 이미지를 중앙에 고정하고싶어요.
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
댓글 수정/ 대댓글 달시에 댓글 공지 넣는법 [8] | 불금 | 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 |
네이버 날씨 위젯 입니다 | codlllle | 2015.06.15 |
페이스북 공유할 때 모바일에서는 이미지 안뜨는 증상 | silhwang | 2015.06.14 |
XE 에 무료 채팅방 설치하기 [6] | 김동재4af45 | 2015.06.14 |
자동 저장되었습니다에 초단위 추가 | 불금 | 2015.06.13 |
무료 오픈 api가 많은 사이트 [유용] [3] | 김동재4af45 | 2015.06.13 |
Font Awesome 메뉴바에 적용하기 | 불금 | 2015.06.13 |
상단바 (navbar) 고정 레이아웃 알림센터 close시 밀려나는 현상 해결법 [2] | 불금 | 2015.06.13 |
Uchat 에서 XE 프로필 이미지 불러오게 수정하는법 | 불금 | 2015.06.10 |
MARIADB or MYSQL 의 INNODB로 엔진 변경 PHP스크립트 | 간장게장같은남자 | 2015.06.10 |
포인트 복권 모듈 관리자 페이지 1.7이상에 맞게 [10] | 착한악마 | 2015.06.10 |
간단한(?) 해시태그 소스.. [18] | Ikoo | 2015.06.10 |
트래픽 차단된 이미지들 보는 방식 만들었네요. | SeungXE | 2015.06.10 |
해당 그룹 or 관리자는 애드온 실행 안되게 하기 [3] | 불금 | 2015.06.10 |
1.8.3 통합 검색시 제목+내용 으로 하기 | 불금 | 2015.06.09 |