웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
제한된 외국 호스팅 환경에 맞추어 쓰기..... [5] | Falls Too Fast | 2007.11.20 |
XP 환경에서의 속도 저하 문제 해결 (Apache 2.2.X) [2] | Netsblue | 2007.11.20 |
분류(category) 필수로 입력받기 [9] | Diver | 2007.11.20 |
제한된 서버에서 ZBXE가 돌아가도록 설정하기 [2] | Falls Too Fast | 2007.11.22 |
(글) 첨부 파일 날짜 출력 및 아이콘 표시 [1] | Simulz | 2007.11.22 |
XE treeview [4] | 앙데르센 | 2007.11.22 |
글쓴이 이메일 정보 감추기 [2] | 대암지기 | 2007.11.22 |
배경이미지기능으로 페이지꾸미기 [3] | 팔공산 | 2007.11.23 |
소스에서 php short tags 제거하기 [1] | 토우코 | 2007.11.24 |
클립보드로 텍스트 복사하기 [5] | 베니 | 2007.11.24 |
윈도우 라이브 메신저를 홈페이지 서명난에 달자 [1] | Diver | 2007.11.26 |
[동영상 강좌1] zbxe 설치하기 [120] | 필반 | 2007.11.26 |
팁이라긴.. 약하지만;; Trac을 이용한 최신버전을 다운로드 받자!! [3] | 동균84 | 2007.11.26 |
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] | 팔공산 | 2007.11.27 |
(회원정보) 보기 페이지에서 포인트 변경하기 [4] | Simulz | 2007.11.28 |
google base 사용기. | font | 2007.11.29 |
메뉴에 이미지버튼 사용하기 [11] | 정낙훈(xynex) | 2007.11.29 |
(포인트) 선물하기 [9] | Simulz | 2007.11.30 |
위젯배경이미지방 오픈했습니다. [2] | 팔공산 | 2007.12.03 |
[동영상 강좌2] zbxe 페이지 생성과 기능 설명 [45] | 필반 | 2007.12.03 |