내비게이션 메뉴바에서 해당 메뉴를 클릭하여 페이지를 이동해도 메뉴바에 걸려있는 효과를 계속 유지하는 방법좀 알려주세요...
조회수 3603회
<head>
<meta charset="utf-8">
<title>the next 내비제작</title>
<style>
* { margin:0; padding:0; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; }
header { text-align:center; position:fixed; top:0; left:0; background:#fff; width:100%; padding:20px 0; }
header h1 { color:#006; }
nav { border-top:1px solid #ccc; border-bottom:3px solid #ccc; height:40px; overflow:hidden; position:fixed; width:100%; background:rgba(255,255,255,0.8); }
nav > div { border-bottom:1px solid #ccc; height:40px; }
nav #gnb { width:960px; margin:0 auto; }
nav #gnb:after { content:""; clear:both; display:block; height:0; visibility:hidden; }
nav #gnb > li { float:left; text-align:center; width:137px; }
nav #gnb > li:last-child { margin-right:0; }
nav #gnb > li a { display:block; height:40px; line-height:40px; }
nav #gnb > li > a:link, nav #gnb > li > a:visited { color:#333; font-weight:bold; font-size:18px; }
nav #gnb > li > a:hover, nav #gnb > li > a:active, nav #gnb > li > a:focus, nav #gnb > li > a.select { background:#069; color:#fff; }
nav #gnb ul li a:link, nav #gnb ul li a:visited { color:#666; }
nav #gnb ul li a:hover, nav #gnb ul li a:active, nav #gnb ul li a:focus { background:#eee; }
section { text-align:center; height:500px; background:#ffc; }
#cont1 { text-align:center; height:500px; background:#fcf; }
#cont2 { text-align:center; height:500px; background:#ccf; }
#cont3 { text-align:center; height:500px; background:#cff; }
</style>
</head>
<body>
<header>
<h1>LOGO</h1>
</header>
<nav>
<div>
<ul id="gnb">
<li>
<a href="#cont1">MENU1</a>
<ul>
<li><a href="#">SUB1-1</a></li>
<li><a href="#">SUB1-2</a></li>
<li><a href="#">SUB1-3</a></li>
<li><a href="#">SUB1-4</a></li>
</ul>
</li>
<li>
<a href="#cont2">MENU2</a>
<ul>
<li><a href="#">SUB2-1</a></li>
<li><a href="#">SUB2-2</a></li>
<li><a href="#">SUB2-3</a></li>
<li><a href="#">SUB3-4</a></li>
</ul>
</li>
<li>
<a href="#cont3">MENU3</a>
<ul>
<li><a href="#">SUB3-1</a></li>
<li><a href="#">SUB3-2</a></li>
</ul>
</li>
<li>
<a href="#">MENU4</a>
<ul>
<li><a href="#">SUB4-1</a></li>
<li><a href="#">SUB4-2</a></li>
</ul>
</li>
<li>
<a href="#">MENU5</a>
<ul>
<li><a href="#">SUB5-1</a></li>
<li><a href="#">SUB5-2</a></li>
<li><a href="#">SUB5-3</a></li>
</ul>
</li>
<li>
<a href="#">MENU6</a>
<ul>
<li><a href="#">SUB6-1</a></li>
</ul>
</li>
<li>
<a href="#">MENU7</a>
<ul>
<li><a href="#">SUB7-1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<section>
<img src="http://placehold.it/960x300" width="960" height="300" alt="임시이미지">
</section>
<section id="cont1">
</section>
<section id="cont2">
</section>
<section id="cont3">
</section>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$("#gnb > li > a").on("mouseover focus",function(){
$(this).next().stop().animate({"height":160},300);
});
$("#gnb > li > a").on("mouseleave focusout",function(){
$(this).next().stop().animate({"height":40},300);
});
$("#gnb ul li a").on("mouseover focus",function(){
$(this).parents("nav").stop().animate({"height":200},300);
$(this).parents("ul").prev("a").addClass("select");
});
$("#gnb ul li a").on("mouseleave focusout",function(){
$(this).parents("nav").stop().animate({"height":40},300);
$(this).parents("ul").prev("a").removeClass();
});
/*
$("#gnb > li").on("mouseover focus",function(){
$("nav").stop().animate({"height":200},300);
$(this).children("a").addClass("select");
});
$("#gnb > li").on("mouseleave focusout",function(){
$("nav").stop().animate({"height":40},300);
$(this).children("a").removeClass();
});
*/
</script>
</body>
링크 이동을 하지 않는 내비게이션 메뉴들은 클릭을 하면 해당 메뉴의 배경과 글자색상이변한 상태로 유지되는 반면에
아래페이지로 이동 하는 링크를 걸어 놓은 내비게이션 메뉴는 클릭하면 해당 페이지로 이동한 뒤에 배경과 글자색상이 변한 상태가 유지되지 않습니다.
페이지를 이동해도 이러한 효과가 유지되도록 하는 좋은 방법을 알려주세요 ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자
댓글 입력