웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
에디터의 옵션 설정하기.. 컴포넌트 보이지 않게 등.. [4] | 지허 | 2007.10.01 |
다중의 이종 웹 브라우저에서 웹 사이트 테스트하기 [1] | NetEagle | 2007.10.01 |
페이지에 설문 조사 넣기 [2] | 지허 | 2007.10.01 |
회원가입 약관 관련. [2] | rickey | 2007.09.28 |
(보드 모듈) 글 목록을 조회수 별로 색상 지정하기 [15] | Simulz | 2007.09.27 |
로고에 플래시파일 사용하기 [2] | 팔공산 | 2007.09.26 |
(모듈 설정) 모듈 목록을 추가하여 설정을 쉽고 빠르게 #2, 2007-09-28 [3] | Simulz | 2007.09.23 |
제로보드 XE 설치후에 제대로 작동 안하는 원인은... | 독도2005 | 2007.09.22 |
<수정>사이트 메신저 회원 연동해서 사용하기.... [3] | 녀석참 | 2007.09.22 |
공지창 소스 [2] | 열린 공간 | 2007.09.21 |
(포인트 모듈) 추가 정보 출력 [8] | Simulz | 2007.09.20 |
새 공지창 띄우기 [22] | *제트* | 2007.09.20 |
정사각형 썸네일은 안녕~ 직사각형 썸네일을 만들어보자 [8] | 매니안 | 2007.09.19 |
제로보드 XE에서 강추하는 플래시 넣기 [12] | 미오유 | 2007.09.19 |
게시물 읽을 때 하단에 목록 보이지 않게 하기 [3] | 정은기 | 2007.09.17 |
winxp IE7 rwapm에서 한글이름파일 업로드 [12] | 공수래 | 2007.09.17 |
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [11] | 써니a | 2007.09.17 |
2차,3차 메뉴가 좌측으로 일렬로 되어있어 구분이 잘 안됩니다,이럴 때~ [7] | *제트* | 2007.09.16 |
메뉴와 연결된 xe의 page에 iframe을 사용해서 제로보드4 게시판을 불러들였습니다 [2] | 바람처럼.. | 2007.09.14 |
파일 업로드시에 403에러 발생시 해결방법. [12] | WhiteAT | 2007.09.12 |