웹마스터 팁

  2. Support
  3. 웹마스터 팁

CSS + HTML 메뉴

2016.03.10 11:39

마루디자인

자바스크립트를 사용하지 않고 마우스오버 메뉴를 만드는 방법 입니다
모바일에서 터치로 대신 hover를 대신할 수 있어서 반응속도 부분도 만족 스럽습니다

간단하게 원리를 설명하면
자식엘리먼트에 focus나 hover 동작시 스타일이 유지되는점을 이용하여 구현한 것 입니다

 

1
2
3
4
5
6
7
8
9
.menu1 ol{margin:0;padding:0;list-style:none}
.menu1 li{display:inline-block;min-width:80px}
.menu1 li ol{position:absolute;display:none}
.menu1 li ol li{display:block;line-height:32px}
.menu1 li ol li a{display:inline-block;width:100%}
.menu1 li ol li ol{left:100%;bottom:0;top:0;background:#f7f0ff}
.menu1 li:hover > ol{display:inline-block}
.menu1 a{display:block;background:#f7f7f7}
.menu1 a:hover{display:block;background:#eee}
태그 연관 글
  1. [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? by Alexander *2
  2. [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. by Spooky *1
  3. [2018/08/09] 묻고답하기 니코 위젯스타일 제목 색상을 바꾸고 싶어요? by 호돌이옆집아저씨
  4. [2017/08/21] 묻고답하기 레이아웃 수정 좀 봐주세요 by 예스24 *2
  5. [2017/08/08] 묻고답하기 메뉴바하고 이미지를 중앙에 고정하고싶어요. by 유자
, , , 이 게시물을
좋아요
목록
제목 글쓴이 날짜
위지윅 에디터의 관리의 활성 비활성이 안될 경우 해결책 [2] 김유중345 2009.05.01
index.php에서 Parse Error가 발생한다면 [6] YJSoft 2014.04.01
게시판이 있는데 관리자 페이지에 나타나지 않을 경우 해결 방법 퍼니엑스이 2016.03.20
XE 루트로 옮기기 완벽 가이드 [/xe/ 로부터 벗어나자!] ver 1.1 [107] file LI-NA 2013.02.26
기본 Content 위젯에 댓글 New표시하기 [10] 조슈아킴 2010.05.08
에디터 비활성화 문제 해결했습니다! [2] 엘로이스 2013.09.13
1.8 XEDITION 에서 로그인xe 사용하여 네이버 로그인 연동하기 [7] file karutian 2015.04.10
CSS + HTML 메뉴 마루디자인 2016.03.10
호스팅 변경이나 이전시 썸네일 문제 점검사항 맥노턴 2016.03.07
[속도 향상] 불필요한 애드온 끄기 다미아빠 2016.03.06
외부 이미지 저장 애드온 [7] file samsara 2013.03.26
서버의 파일권한 맞추기. 마루디자인 2016.03.01
외부페이지에서 매개변수 사용하기 [2] JnCsoft 2008.04.07
외부 페이지에서 XE 기능을 추가 할때 410contents 2016.02.25
PHP7에서 XE설치시 텍스트 다 깨져서 나올 때 꼬부기 2016.02.23
CentOS 6.x 에서 OpenSSL Heartbleed 취약점 업데이트 마루디자인 2016.02.23
댓글에 대댓글 달리면 수정 불가능하게 하기 [8] 불금 2015.06.17
Linux(CentOS) APM 컴파일 설치 (중급) [1] rwind 2016.02.01
(포인트) 레벨별 포인트 계산 기능 추가 [4] file Simulz 2007.11.19
(CSS) IE8용 웹조각 기능 file Simulz 2009.03.26
태그 쓰기