스크롤시 주메뉴 상단고정하는방법
5,689
2015.03.19 19:30
첨부파일
-
- 첨부파일: fixed.js (293byte)30 2015-03-19 19:30:06
-
- 첨부파일: style.fixed.css (517byte)7 2015-03-19 19:30:06
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1a3 주소복사
본문
/eyoom/theme/basic/skin_bs/안에 임의로 nav/fixed 폴더를 생성합니다. 그럼 경로가 이렇게되죠!!
/eyoom/theme/basic/skin_bs/nav/fixed/ 안에다가 첨부한 파일을 업로드합니다.
/eyoom/theme/basic/layout/head_bs.html 파일을 열어 아래의 코드를 적당한곳(상단)에 추가합니다.
<link rel="stylesheet" href="../skin_bs/nav/fixed/style.fixed.css" type="text/css" /> <script language='JavaScript' src='../skin_bs/nav/fixed/fixed.js'></script>
아래코드를 보시면 <nav id="topMenu" class="gnb"> 이러한 코드가 있는데 같은위치에 추가시켜줍니다.
동일한 위치에 추가시켜야 메뉴가 깨지지않습니다.
<!--------------- Header Banner 영역 시작 { --------------->
<!-- 안내: 테마 image 폴더 내 이미지파일을 업로드 후 아래 a태그 링크설정 및 이미지 경로의 이미지 파일명 수정, 불필요 시 삭제 -->
<div class="header-banner pull-right hidden-sm hidden-xs">
<a href="#" target="_blank"><img src="../image/header_banner.png" class="img-responsive"></a>
</div>
<!-- 안내: 보여지는 이미지 크기는 209 x 50 픽셀입니다. 선명도 최적화를 위해 694 x 166 픽셀 사이즈로 image 폴더에 업로드 하시길 권합니다. -->
<!--------------- } Header Banner 영역 끝 --------------->
</div>
<div class="clearfix"></div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<nav id="topMenu" class="gnb"> //여기부분입니다.
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="{? defined('_INDEX_')}active{/} home-menu">
<a href="{C.G5_URL}{? _is_member && eyoomer.main_index != 'index'}/?home{/}"><i class="fa fa-home"></i> 메인</a>
</li>
<!-- End Home -->
그다음에 또 아래와 같이 </nav> 라고 끝을 맺어주는 코드를 추가합니다.역시 같은위치에 넣어주셔야 메뉴가 안깨집니다.
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
</div>
</li>
<!-- End Search Block -->
</ul>
</div>
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</nav> //여기 부분입니다.
</div>
<!--=== End Header ===-->
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
<!--{:}-->
<!--=== Board Title ===-->
이제 /eyoom/theme/basic/skin_bs/nav/fixed/style.fixed.css 파일을 본인 메뉴색상에 맞게 수정하시면됩니다.
p.s 안된다고 머라고 하기 없기^^ 잘되면 덧글 남기기^^
출처 & 참고 사이트 : 그누보드 사이트
2
좋아요!
레벨 5
경험치 2,212
Progress Bar 22%
- 가입일 : 2015-02-09 16:28:41
- 서명 : 바다는 비에 젖지 않는다.
- 자기소개 : 안녕하세요~
댓글목록
신비님의 댓글
당근 또 받으시와요...
축하합니다. 첫댓글 포인트 73포인트를 획득하였습니다.
김군님의 댓글
ㅎㅎ 당근 당근 ~~~
fm25님의 댓글
http://www.liberta.kr
잘 되네요. 깔끔하게 적용~
김군님의 댓글
좋습니다~~~굿^^
shadow님의 댓글
상단 메뉴바 고정에 한가지 더 팁을 더하자면
style.fixed.css를 여시고 background:white를 찾고 바로 옆에 ;background-color: rgba( 255, 255, 255, 0.9 )를 추가해보세요^^;
티보리님의 댓글
투명되는거네요 감사합니다. ㅎ
김군님의 댓글
김군님의 댓글
투명 굿~
티보리님의 댓글
감사합니다. 잘 되네요
김군님의 댓글
넵^^
마틴님의 댓글
와우~ 이런 팁이 올라오다니...
감사합니다. 잘쓰겠습니다.
김군님의 댓글
넵^^
fm25님의 댓글
참고한 그누보드 해당 자료 주소가 어디인가요?
전에 본 기억이 있는데... 막상 찾으려니 못찾겠네요.
이윰이 아닌 곳에 적용해보려니 잘 안되어서 원본 자료를 봤으면 싶네요.
김군님의 댓글
저도 막 검색하다가 찾은거라 다시 검색해보야할듯......아욱~~귀차니즘이 ㄷㄷ
홍인님의 댓글
베이직테마에서는 메뉴바가 단일색이어서 상관없지만 커뮤니티테마에서는 메뉴바색상을 사용자 마음대로 바꾸게 할 수가 있는데 이런 경우 배경색을 스타일박스에서 지정한 색상에 맞게 유동적으로 할 수 잇는 방법은 없을까요?
shadow님의 댓글
유동적으로 반영되는 방법은 유료 커뮤니티 테마와 연동되게 만들지 않는한 힘들거 같구요..
eyoom/theme/basic/css/colors폴더에 있는 색상별 css의 반영된 메뉴바 배경색을
참조하시거나 아니면 color picker와 같은 툴로 색상을 클릭하셔서 색상 정보를 메모해 놓으셨다가
상단바 고정 관련 폴더에 있는 style.fixed.css 내용중 background:white 이 부분중 white를 교체하시면 되겠어요
김군님의 댓글
컨닝좀 할께요~
김군님의 댓글
유동적으로 반영되는 방법은 유료 커뮤니티 테마와 연동되게 만들지 않는한 힘들거 같구요..
eyoom/theme/basic/css/colors폴더에 있는 색상별 css의 반영된 메뉴바 배경색을
참조하시거나 아니면 color picker와 같은 툴로 색상을 클릭하셔서 색상 정보를 메모해 놓으셨다가
상단바 고정 관련 폴더에 있는 style.fixed.css 내용중 background:white 이 부분중 white를 교체하시면 되겠어요(2)
자이언트님의 댓글
http://eyoom.net/bbs/board.php?bo_table=freeboard&wr_id=620
김군님의 댓글
소스만 알면 가능하죠!!
이윰 어드민관리자파일억서 회원 관리자 선택하는 소스를 짜서 회원도 설정할수있게 하거나 관리자가설정한값데로 출력하게 만들면되구요 스타일박스를 또 정한데로 온 오프 시키면서 하는 소스짜구요 가능은하지만 소스를 짤수없으니 못하는거뿐이구요 그래서 만들어진 기능을 사용할려면 유료테마를
이용할수밖에요 어느정도 소스짤수있으시면 어떤기능이든간에 더좋은기능도 가능하죠 결론은 머리가나빠서 소스를 못짠답니다 ㅜㅜ 소스를짜거나 유료를 구매하거나 ㅜㅜ 포인트를 열심이모아서 유료테마 사용할 려구 노력중입니다 하앜
오픈소스들도 만이 있으니 찾고
구글링을통해서 찾고 소스짜집기하고 되면 대박 이죠모 ㄷㄷ
자이언트님의 댓글
김군님.. 쫌 짱이십니다.
근데 이윰님 배고프시면 우짜라고.. 아까 어느 게시글에 강쥐 있던뎁.. 흠흠..
김군님의 댓글
이건 유료테마에 있는 스타일 박스가 아니구요~ 메뉴고정만 가능한 오픈소스입니다^^
자이언트님의 댓글
역시 실력파였어. 근데 불금이라고 한잔 하시고 오신거는 아니죠?
김군님의 댓글
금연실패로......전담으로 다시시도중........일회용 전담 들고있어요 ㅋㅋ
일회용 오늘 첨 써보는데 글쎄 잘모르겠네요 ㅋㅋ 전담으로 가야하나
전담 써보셧나요? 어디께 괜찬아유?
자이언트님의 댓글
1월1일부터 지금까지 한개피도 안피고 금연ing~~
김군님의 댓글
오우~~대단..........나도 어케좀 끊었으면 하는......
자이언트님의 댓글
저는 연상기법을 이용해요
김군님의 댓글
난 매번 시도는 하지만 실패 ......다시피다가 다시 금연 시도 실패 다시 피다가 금연시도 실패 반복되고있음 .....
그래서 이번엔 나도 전담 한번....생각이 드네요 ㅎㅎ 그래서 시범삼아 오늘 일회용 한번 사봤네요 편의점에팔길래 ㅎㅎ
자이언트님의 댓글
의지가 중요한 것이니 성공하시길 빌게요.
김군님의 댓글
그렇조 의지가 중요하죠 ㅎㅎ 담배를 피운사람은 끊는게 아니라 평생 참는거라고 하더군요^^
참기가 힘듬 ㅠㅠ
자이언트님의 댓글
참는다는 생각 자체를 안하도록 연습하는 게 중요한 듯
고비는 반드시 오겠죠.
그러니깐 방 옮겨야죠.
김군님의 댓글
ㅋㅋㅋ 올해는 금연해야할텐디 ^^
이진원님의 댓글
허허.. 저는 왜 안되려나욥...ㅋㅋㅋㅋ 이게 다 저의 실력이 부족해서 입니다. ㅠㅠ 증진해야겠네욥...
김군님의 댓글
공부하세요
미너리스님의 댓글
멋지네용!ㅎ
축하합니다. 행운의 포인트 86포인트를 획득하였습니다.
김군님의 댓글
멋져요!!
joosam님의 댓글
짱입니당..
축하합니다. 행운의 포인트 98포인트를 획득하였습니다.
김군님의 댓글
짱이죠!!
joosam님의 댓글
흠 요게 샵 베이직 기준으로 커뮤니티에는 잘 적용됩니다만 쇼핑몰 부분에서는 적용이 안되네요... 킁
김군님의 댓글
해당메뉴소스에 적용시키면될듯합니다
쇼핑몰 빌더는 안써봐서 소스를알수없어
잘 모르겠네요
joosam님의 댓글
넵... 쇼핑몰은 /eyoom/theme/shop_basic/skin_bs/shop/basic/head_bs.html 에 같은 설정을 했는데 적용이 안되네요...
fixed 폴더를 /eyoom/theme/shop_basic/skin_bs/shop/basic에 만들어 해결하긴 했는데요..
/eyoom/theme/basic/skin_bs/nav/fixed 의 파일을 불러오려면
<link rel="stylesheet" href="../skin_bs/nav/fixed/style.fixed.css" type="text/css" />
<script language='JavaScript' src='../skin_bs/nav/fixed/fixed.js'></script> 이 구문에서 뭐를 봐꿔야 할까요?
김군님의 댓글
Css파일과js파일 있는 경로를 바르게넣어주세요 경로가다르면 불러올수없거든요 첨부한파일을 넣어둔경로를<link rel="stylesheet" href="../skin_bs/nav/fixed/style.fixed.css" type="text/css" />
<script language='JavaScript' src='../skin_bs/nav/fixed/fixed.js'></script> 여기소스에 첨부한파일위치를 같게 수정해주시면 될겁니다
joosam님의 댓글
김군님 컬러값 주고 반투명은 유지 안되나요? 모바일로 볼 때 백그라운드를 진한색으로 컬러값을 주면 텍스트와 구분이 약해서요... 모바일 보기시 텍스트 컬러값은 어디를 만져야 하는지... 혹시 아시나 싶어서...
니몬님의 댓글
감사합니다