0
내 웹 사이트에서 드롭 다운 메뉴가 있습니다. 페이지가 이미로드 된 상태 (스크롤하지 않음) 또는 사용자 페이지 스크롤 이후에 모든 것이 정상입니다. 메뉴가 드롭 다운됩니다. 사용자가 페이지 위로 가기 올 때 사용자가 페이지 상단으로 돌아온 후에 메뉴가 드롭 다운되지 않습니다.
문제
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function() {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'static',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
\t margin: 0;
\t padding: 0;
\t width: auto;
\t list-style-type: none;
\t text-align: center;
\t display: inline-block;
}
#navigation {
\t text-align: center;
}
#navigation ul li {
\t float: left;
\t font-weight: bold;
\t font-size: 20px;
\t line-height: 40px;
\t text-align: center;
\t text-shadow: 1px 1px 1px #000;
\t width: 140px;
}
#navigation ul li:hover {
\t background: #9D9FA4;
\t border-radius: 10px;
}
ul li a {
\t text-decoration: none;
\t color: #FFFFFF;
}
ul li li {
\t background: #3F61A9;
\t color: #fff;
\t display: none;
}
ul li li:hover {
\t background: #9D9FA4;
}
ul li li a{
\t text-decoration: none;
\t color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
\t position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
\t position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
\t position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
\t background-color: #9D9FA4;
\t text-align: center;
\t color: #FFFFFF;
\t font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
\t height: 40px;
}<!DOCTYPE html>
<html>
<head>
\t <meta charset="utf-8">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
\t \t \t <ul>
\t \t \t <li><a href="">main menu</a></li>
\t \t \t <li><a>test</a>
\t \t \t <ul class="sub-menu">
\t \t \t \t <li><a href="">test1</a></li>
\t \t \t \t <li><a href="">test2</a></li>
\t \t \t \t <li><a href="">test3</a></li>
\t \t \t \t <li><a href="">test4</a></li>
\t \t \t </ul>
\t \t \t </li>
\t \t \t </ul>
</div>
</div>
\t \t <div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
\t \t \t <br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
\t \t \t <p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
\t \t \t <br><br>
\t \t </div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>CSS에서 #content 및 #contentwrap을 제거하면 메뉴가 드롭 다운되지만 텍스트 뒤에 표시된다는 것을 알았습니다. 그러나 나는 그것을 제거하고 싶지 않다.
또한 '테스트'라는 ul> li> 위에 마우스를 올리면 오른쪽으로 조금 움직입니다. 나는 그것을 제거하고 싶습니다.
어떤 메뉴가 표시되는지에 관계없이 메뉴가 제대로 작동하려면 추가하거나 삭제해야하는 항목은 무엇입니까? 감사!
고마워요! 그것은 작동 .. 누군가가 드롭 다운 요소 위에 마우스를 가져 가면 텍스트 이동을 중지하는 방법을 알고 있다면 그것은 좋을 것입니다 .. 또한, 바닥 글에 대한 솔루션을 찾고 그래서 그것이 화면의 하단에 표시됩니다 콘텐츠가 충분하지 않은 경우 .. – pingwin850