반응형 메뉴입니다.

\r\n

\r\n
행님\r\n
작성일시 2013.01.18 14:01:24\r\n
조회 1,677\r\n
댓글 34

첨부파일

\r\n

rwd_menu.zip (6.6K) 2013.01.20 18:51:57 63회 다운로드

\r\n

\r\n

아직 메뉴 3단 자동으로 추출하는거 까지는 못했습니다.

데스크탑, 휴대폰, 테블릿, 노트북, 스마트폰, 피쳐폰에 다 맞을걸로 생각됩니다.

@media screen and (max-width:768px){ 을 따로 두고 ... 기기의 가로 픽셀에 따라 메뉴가 자동으로 반응합니다.

.CSS 에 핑크색과 그린색 두가지 .CSS 첨부합니다.

jquery-1.4.2.min.js 이미 링크되어 있는 사이트에서는 아래 하단의 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 지워 주세요.

script.js 링크 잘 시키시고요 ...

그린색상과 핑크색상 두 가지 중 menu.php 보시고 링크시키면 됩니다.

DTD 버젼에서는 아주 잘 나옵니다만 ... 다른 버젼에서는 테스트 하지 못했습니다.

링크1 사이트는 참고로 한 사이트입니다.

부탁드립니다.

붙이는 방법 : main 에 rwd_menu 를 풀었으면 ...

메인 head.php 어디 부분에 ...

<?php include_once("$g4[path]/rwd_menu/menu.php"); ?> 로 링크하시면 되겠습니다.

성공하세요...

덧붙임 :

참, 메인에 붙이실 때 ...

<html><head></head><body></body></html> 다 떼야 하는거 아시죠 ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="title" content="DESIGN 반응형 웹디쟈인" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Dropdowns</title>
</head>
<body>

</body>
</html>

또 덧붙임 : IE7 사용을 위해서 ...

.CSS 10번째 줄

.nav a{ 사이에 *zoom:1} 추가해 주세요 ...

[이 게시물은 관리자님에 의해 2013-11-18 21:29:50 11.H_BBS에서 이동 됨]

[ 추가 정보 ... 더보기) ]

뷰PDF 1,2