안녕하세요 상단 메뉴 고정 스크립트 관련 질문 드립니다.
본문
안녕하세요 현제 메뉴를 만들고 있는데요
상단 고정 메뉴를 만들고 싶은데요 스크립틀 보니 잘 몰라서요 혹시 아시는 분은 알려 주실 수 있으신지 해서요
어덯게 대입을 해야 할지 잘 몰라서요
죄송합니다. 초보라서.....
html 코드 이구요
<header id="header" class="sub_head">
<!-- 로고 -->
<h1 class="logo"><a href="/"><img src="<?php echo $sw_skin_url?>/img/top_logo.png" alt="테스트용메뉴" /></a></h1>
<!-- //로고 -->
<!-- pc_메뉴시작 -->
<div id="pc_menu">
<div class="in_pc">
<ul class='main_menu'>
<li><a href="<?php echo G5_URL;?>/page/page.1-1.php">교회안내</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.2-1.php">기 관</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.3-2.php">사 역 · 기 관</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.4-1.php">교 육</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.5-1.php">찬 양</a></li>
<li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=6010">커뮤니티</a></li>
<li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=7010">인터넷방송</a></li>
</ul>
</div>
<!-- 2뎁스슬라이드메뉴 -->
<div id="menu_dept">
<div class="in_dept">
<ul class='menu_dept_ul'>
<li>
<div id='menu_1' class='menu_open' >
<ul class='sub_menu'>
<li><a href="<?php echo G5_URL;?>/page/page.1-1.php">교회안내</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-2.php">인사말씀</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-3.php">연혁</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-4.php">행정업무</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-5.php">예배안내</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-6.php">오시는 길</a></li>
<li><a href="<?php echo G5_URL;?>/page/page.1-7.php">교회시설</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<!-- 2뎁스슬라이드메뉴끝 -->
</div>
<!-- pc_메뉴끝 -->
</header>
<!-- //sub_header -->
스크립트 코드 입니다.
<script type='text/javascript'>
$(window).scroll(function(e){
topmenu_show($(this),e); //스크롤시 상단메뉴 sticky
});
$(window).resize(function(e){
topmenu_show($(this),e); //리사이즈시 상단메뉴 sticky
});
$(document).ready(function(){
$(document).on({
"mouseenter":function(){
$(this).find("ul").show().stop().css({"right":"-10px","opacity":0}).animate({
"right":0,
"opacity":1
},300,"Power3.easeOut");
},
"mouseleave":function(){
$(this).find("ul").stop().animate({
"right":"-10px",
"opacity":0
},300,"Power3.easeOut",function(){
$(this).hide();
});
}
},".pc_menu .in_dept");
//상단 메뉴 검색버튼 클릭시 검색어 입력창 보임
$(document).on("click",".tm_sch",function(){
if($(".search_box").is(":visible")){
$(".search_box").stop().animate({
"bottom":"50px",
"opacity":0
},{
"duration":300,
"easing":"Power3.easeOut",
complete:function(){
$(this).css({"display":"none"});
}
});
}else{
$(".search_box").css({"display":"block","opacity":"0","bottom":"0"}).stop().animate({
"bottom":"-52px",
"opacity":1
},{
"duration":300,
"easing":"Power3.easeOut"
});
}
});
//검색어 입력창외 다른 영역 클릭시 입력창 숨김
$(document).on("mouseup",function(e){
var elm=$(".search_box");
if(elm.has(e.target).length===0 && !$(e.target).hasClass("fa") && !$(e.target).hasClass("tm_sch")){
$(".search_box").stop().animate({
"bottom":"0",
"opacity":0
},{
"duration":300,
"easing":"Power3.easeOut",
complete:function(){
$(this).css({"display":"none"});
}
});
}
});
});
//상단메뉴 위치선정 및 스크롤시 sticky 적용 - 애니메이션
function topmenu_show(top_obj,e){
var sc_top=top_obj.scrollTop();
var obj=$("#header");
var ap=0.7;
var sbtom=0;
if($(".pc_menu").length){
sbtom=$(".pc_menu").outerHeight();
}
if(sc_top>=Number($(".pc_menu").outerHeight())){
obj.addClass("topmenu-fixed");
}else{
obj.removeClass("topmenu-fixed");
}
}
</script>
답변 2
그냥 두개 합쳐서 넣으시면 되시고요
아마 css 파일이나 style 적용해 놓은 파일을 찾으셔서 같이 넣으시면 되십니다.
.topmenu-fixed{position:fixed;}가 정의되어 있은 css 를 찾으셔서 같이 넣어 주시면 됩니다
스킨을 써보시는걸 추천합니다.
답변을 작성하시기 전에 로그인 해주세요.
