웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
아이콘 폰트 축소 서비스 | easylogic | 2016.08.11 |
XE Core:1.7.5.3 조회수 증가, 자기 게시글 클릭시 조회수 증가 [1] | 때린데 또때려 | 2014.07.04 |
상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기. [2] | Xian | 2005.02.19 |
포트포워딩없이 외부접속 허용하기(윈도우 서버) [1] | 임채원임 | 2014.11.17 |
CentOs7에서 중국 IP 차단하기 [5] | 카르마 | 2016.06.02 |
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 | 미연조 | 2016.07.08 |
하나의 웹서버에 php5, php7 설치하기 | 라온넷닷컴 | 2016.06.10 |
배너 랜덤추출 스크립트 [xe적용방법] [16] | 라싸 | 2008.02.19 |
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] | djdisodo | 2016.06.04 |
CentOS 7 : Apache2.4 + PHP5.6 + MariaDB + VSFTP 설치하기 [6] | 우리아기 | 2015.08.06 |
[추천 팁] 오에카키 PHP 버전으로 만들기 [19] | 소프트맨 | 2002.08.31 |
사용자정의 기준으로 정렬을 했을 경우 최신글이 목록 상단으로 뜨도록 수정법 ( 현재 최신글이 하단에 뜸 ) | sejin7940 | 2016.05.25 |
부운영자 [26] | 송동우 | 2012.02.05 |
정확한 계산기 소스입니다. [2] | 현탁 | 2014.01.15 |
[시니시즘] XE의 XML Query 관련 팁 | 시니시즘 | 2016.04.26 |
[개발팁] Console에서 디버깅 시 발생하는 x.js Deprecated 오류 제거 하기 | SimpleCode | 2016.04.19 |
IIS에서의 URL 재작성 사용하기 [5] | ehii | 2014.10.30 |
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 | sejin7940 | 2016.04.03 |
그룹별 회원 목록 출력 [2] | 윤삼 | 2015.10.25 |
위지윅 에디터의 관리의 활성 비활성이 안될 경우 해결책 [2] | 김유중345 | 2009.05.01 |