서버 페이지 코딩
본문
http://www.nano-clean.kr/bbs/board.php?bo_table=table74&wr_id=1
이런식으로 서버 페이지 구성 할건데요....
소스 복사해봐도 저런식으로 되지 않네요
이런식으로만 나오네요 ㅠㅠ
가급적 아래 형식으로 서버 페이지 메뉴가 나오고 싶은데요
저런 소스좀 구할수 있을까요 ?
혹 css도 구성해야 하나요.......
답변 5
아래 소스중 디자인 꾸미는 쿼리 삭제하고 나면 될거에요...
<div LyBack grBodyGen alt="바디 좌메뉴형"><div LyPack><div LyYard floatAfterBox>
<style>
[grBodyGen] { border-top:4px solid #314151; }
[floatAfterBox]:after { display:block; clear:both; float:none; content:""; }
[bodydesk] { float:right; width:calc( 100% - 240px); }
[bdMnBanner] { border:3px outset steelblue; }
[bodyMnLt] { float:left; width:200px; margin-right:40px; }
[bdMnTtl] { display:flex; justify-content:center; align-items:center; text-align:center; height:120px; padding:0 20px; margin-bottom:20px; border-top:0px solid #42628e;
background:linear-gradient( to bottom, #50a5da, #71c8ff 35%, #42628e 90% );
color:white; font-size:16pt; font-weight:bold;
box-shadow:0 6px 6px 0 rgba(0,0,0, .3);
}
[bdMnLn] { position:relative; height:50px; font-size:12pt; border-bottom:1px solid #dddddd; }
[bdMnLn] > A { height:100%; width:100%; display:flex; align-items:center; padding-left:5px; }
[bdMnLn] > A:hover { background:#50a5da; text-decoration:none; color:white; font-weight:bold; }
[bdMnD1] { position:absolute; left:100%; top:0; background:white; padding:0; border:8px solid #eeeeee; min-width:100%; width:auto; background:#fcfcfc; font-size:10.5pt; }
[bdMnD1] > A { display:block; white-space:nowrap; padding:8px; border-bottom:1px solid #eeeeee; }
[bdMnD1] > A:hover { background:#eeeeee; text-decoration:none; }
[bdMnD1] > A[ON] { color:#ffffff; font-weight:bold; background:#42628e; }
#__2차서브__보임_숨김__애니메이션정의__ { content:"x축으로 이동"; }
[bdMnD1] { visibility: hidden; opacity:0; transition:.2s ease-in-out; transform:translateX(-10px); z-index:1; }
[bdMnLn]:hover [bdMnD1] { visibility:visible; opacity:1; transform:translateX(0px); }
</style>
<div bodyMnLt>
<div bdMnTtl>회사소개</div>
<div bdMnLn><a href="">회사소개 메뉴임미다</a></div>
<div bdMnLn><a href="" ON>선택된 메뉴</a></div>
<div bdMnLn><a href="">회사소개 메뉴임미다</a></div>
<div bdMnLn><a href="">회사소개 메뉴임미다</a></div>
<div bdMnLn><a href="">회사소개 메뉴5번 +</a>
<div bdMnD1>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
<a href="">회사소개 메뉴 5번 서브메뉴</a>
</div>
</div>
<div bdMnLn><a href="">회사소개 메뉴임미다</a></div>
<div bdMnBanner><a href="">배너임미다 메뉴임미다</a></div>
</div>
</div></div></div>
팻시님 적용은 인덱스에 적용해 봤네요
감사해요
왼쪽으로 메뉴 이동은 어떻게 하나요?
css 나 자바스크립트 써야 해요. 자스는 복잡하니... 아닌가??
하여간 요즘은 css 가 편해요.
아래 사이트에서 상단 메뉴나 좌측 메뉴 오버해보세요. 원하는 작용이 나올꺼에요.
순수 CSS 니까 베끼기 쉬울겁니다.
css 중 position 요소가 중요하니 빼먹지 마세요.
구글에 모바일 메뉴 검색하면 통소스 나옵니다.
위 댓글 소스에 보면
<div bdMnLn><a href="">회사소개 메뉴5번 +</a>
<div bdMnD1> <---- 서브가 있는 메뉴들은 여기 속에 집어 넣으면 됩니다.
<a href="">회사소개 메뉴 5번 서브메뉴</a> <--- 이렇게 그럼 저절로 움직여요
</div>
</div>
css 에서
#__2차서브__보임_숨김__애니메이션정의__ { content:"x축으로 이동"; } <--- 이부분 아래 잘보세요.
그냥 소스 자체를 그대로 긁어서 붙여도 움직여요...
거기서 눈치껏 숫자만 바꾸어서 쓰셔도 되요.
다섯번째메뉴에 >>> 회사소개 메뉴5번+ 라고 되어 있는데 올리면 서브 메뉴 나올꺼에요.
