웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
SVN 의 사용 방법 [3] | preware | 2007.11.06 |
완전 초보도 확장 변수를 이용해 게시판 개조할수잇다!! [4] | 쿤. | 2007.11.06 |
(08년 1월2일수정)0.2.3이후 최근글에 공지사항을 제외시키고자할 경우 [11] | 포레버 | 2007.11.07 |
레벨 아이콘이 제대로(찌그러지는 등) 출력되지 않을 때 수정방법 | 必得力 | 2007.11.07 |
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 [25] | 소마세월 | 2007.11.07 |
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] | xe촙5 | 2007.11.08 |
제로보드 2.3 에서 2.5 변경사항 데이터 테이블 구조 변경사항 체크를 정리해봅니다. [4] | 도토리나무 | 2007.11.09 |
제로보드 2.3 에서 2.5 업그레이드 방법 | 도토리나무 | 2007.11.09 |
첨부파일 기능에 대한 짧은 정보 [3] | 고라리 | 2007.11.09 |
외부 문서에서 회원 정보 얻는 방법 [11] | 소마세월 | 2007.11.10 |
통합검색 버그 style 수정 [2] | 소마세월 | 2007.11.11 |
확장변수에서 본문 입력 빼기 [10] | Diver | 2007.11.12 |
회원에게 만기일 주기(1원짜리 팁) [17] | 까오천사 | 2007.11.12 |
쪽지 수신 음성 알림 [19] | Simulz | 2007.11.13 |
알바트로스 적용후 검색하는 곳에 댓글과 태그 검색 업션 넣기 [1] | 비밀얌 | 2007.11.13 |
[수정]업로드된 그림 자동출력 [6] | 소마세월 | 2007.11.13 |
이미지 갤러리 셀렉트박스 문제 [1] | 공작대천사 | 2007.11.14 |
<head> 태그안에 임의의 내용을 넣는 방법 [1] | 발돋움 | 2007.11.16 |
간편해진 페이지 수정법 | coll | 2007.11.16 |
(포인트) 레벨별 포인트 계산 기능 추가 [4] | Simulz | 2007.11.19 |