웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
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 인증서 설치, 갱신) | 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] | 카르마 | 2016.06.02 |
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] | djdisodo | 2016.06.04 |
하나의 웹서버에 php5, php7 설치하기 | 라온넷닷컴 | 2016.06.10 |
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 | 미연조 | 2016.07.08 |
아이콘 폰트 축소 서비스 | easylogic | 2016.08.11 |
xe 사이트에 응용프로그램으로 오토포스팅은 안됩니다. | 최윤한 | 2016.08.17 |