javascript - How to avoid using overflow -
i creating navigation/menu bar , want move horizontally cursor moves on it. working not want set overflow property hidden because have drop down tabs should appear when cursor on menu option. if use overflow cut off @ point drop down cut off. inside scroll contains menu options.
var sum = 0; $("#scroll li").each(function () { sum += $(this).width() + parseint($(this).css('paddingleft')) + parseint($(this).css('paddingright')) }); $("#scroll").css('width', sum); $("#holder").mousemove(function (e) { x = -(((e.pagex - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseint($("#scroll").css('paddingleft')) + parseint($("#scroll").css('paddingright')) - $("#holder").width())); $("#scroll").css({ 'marginleft': x + 'px' }); });
#scroll{ height: 30px; line-height: 30px; margin-left: 0; padding: 0 10px; } #scroll li { float: left; padding: 0 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="holder" style="width: 800px;line-height: 30px; /* overflow: hidden; */margin-left: 10px;float: left;"> <div id="scroll" class="nav-collapse"> </div> </div>
please provide alternate solution using overflow.
without entire sample of code or jsfiddle reference can't can use overflow-x : hidden
guess.
Comments
Post a Comment