背景
我正在尝试制作一个固定的导航栏,其中一个选项有一个下拉菜单。在较小的屏幕上,菜单叠加层会显示在屏幕中间垂直显示的所有选项。我不想在小屏幕版本的任何链接上使用背景颜色/悬停。导航背景应该是 #fff
或 #111
,具体取决于您使用的主题(在 .mobile-menu 和 nav 中将“light”更改为“dark”以查看其他菜单主题)。屏幕宽度只是用于测试的占位符。我在 JavaScript 中留下了一些旧版本的残余(比如 navList
)——对此感到抱歉——请忽略那些东西。
问题
- 子链接的背景色以及悬停背景色不会消失。
- 有子链接的链接太高了,我似乎无法摆脱它的填充/边距。
我尝试过的
我试过重写
* { background-color: transparent }
和
* { padding: 0; margin: 0 }
在我的小屏幕媒体查询的底部无济于事,以及在单个元素和/或元素类上重置这些属性。
我也试过使用 <a>
而不是 <div>
对于链接 2 ( .dropbtn
),但这会导致 .dropdown-content
出现在 Link 2 的正上方,而不是从它的正下方开始。我能够用像 top: 47px
这样的笨拙的东西来解决这个问题在 .dropdown-content
, 但真的更喜欢如何使用 <div>
导致菜单正确显示在链接 2 下方(并且找不到会导致 <a>
链接 2 表现得像 <div>
的参数)。
禁用所有 JavaScript 也没有解决它。
代码
到目前为止,这是我得到的: https://jsfiddle.net/heyycap/2p0zq61e/1355/
var mobile = $('.mobile-menu')
var navList = $('nav > ul')
var winHeight
var docHeight
var throttleScroll
var scrollTop
var nav = $('nav')
var light = $('.light')
var dark = $('.dark')
var breakPoint = 600
var windowSize = 0
var newWindowSize = 0
var lightColor = '#fff'
var darkColor = '#111'
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
console.info('Scrollbar: ' + scrollbarWidth + 'px')
function styleLightDark() {
light.css({
'background-color': lightColor,
'color': darkColor
})
dark.css({
'background-color': darkColor,
'color': lightColor
})
}
function styleMobileMenu() {
if (mobile.hasClass('light')) {
mobile.css('background-color', lightColor)
} else {
mobile.css('background-color', darkColor)
}
}
function styleNav() {
if ($('nav').hasClass('light')) {
$('nav').css('background-color', lightColor)
} else {
$('nav').css('background-color', darkColor)
}
}
function remBg() {
light.css('background-color', '')
dark.css('background-color', '')
}
function changeNav(x) {
if (windowSize == 'small') {
if (x <= breakPoint) {
nav.hide()
}
}
if (windowSize == 'large') {
if (x > breakPoint) {
nav.fadeIn(500)
}
}
}
function checkWindowSize(x) {
if (x <= breakPoint) {
newWindowSize = 'small'
}
if (x > breakPoint) {
newWindowSize = 'large'
}
}
function getMeasurements() {
var winHeight = $(window).height()
var docHeight = $(document).height()
var trackLength = docHeight - winHeight
var innerWidth = $(document).width()
var widthWithScrollbar = innerWidth + scrollbarWidth
amountScrolled()
console.info('Width - scrollbar, if it exists: ' + innerWidth + 'px')
if (winHeight == docHeight) {
checkWindowSize(innerWidth)
if (windowSize != newWindowSize) {
windowSize = newWindowSize
changeNav(innerWidth)
}
} else {
checkWindowSize(widthWithScrollbar)
if (windowSize != newWindowSize) {
windowSize = newWindowSize
changeNav(widthWithScrollbar)
}
}
}
function amountScrolled() {
scrollTop = $(window).scrollTop()
console.info('Scrolled: ' + scrollTop + 'px')
if ((scrollTop < 5) && (innerWidth > breakPoint)) {
remBg()
} else if ((scrollTop < 5) && (nav.is(':hidden')) && (innerWidth <= breakPoint)) {
remBg()
} else if ((!nav.is(':hidden')) && (innerWidth <= breakPoint)) {
mobile.css('background-color', '')
} else if ((scrollTop >= 5) && (nav.is(':hidden')) && (innerWidth <= breakPoint)) {
remBg()
styleMobileMenu()
} else if ((scrollTop >= 5) && (innerWidth > breakPoint)) {
styleLightDark()
}
}
getMeasurements()
$(window).on('resize', function() {
getMeasurements()
})
$(window).on('scroll', function() {
clearTimeout(throttleScroll);
throttleScroll = setTimeout(function() {
amountScrolled()
}, 10)
})
mobile.on('click', function() {
scrollTop = $(window).scrollTop()
if (nav.is(':hidden')) {
nav.fadeIn(500)
remBg()
styleNav()
} else if ((!nav.is(':hidden')) && (scrollTop > 5)) {
nav.fadeOut(500)
remBg()
styleMobileMenu()
} else {
nav.fadeOut(500)
remBg()
}
})
body {
background-color: lightblue;
margin: 50px 0;
}
.mobile-menu {
display: none;
transition: .5s ease;
}
nav {
position: fixed;
width: 100%;
top: 0;
opacity: .9;
transition: .5s ease;
}
nav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
padding: 14px 16px;
}
nav.dark a:hover,
nav.dark .dropdown:hover .dropbtn {
background-color: #fff;
color: #111;
}
nav.light a:hover,
nav.light .dropdown:hover .dropbtn {
background-color: #111;
color: #fff;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#navigation,
#resources,
.resources {
display: none;
}
.light * {
color: #111;
}
.dark * {
color: #fff;
}
.dark .dropdown-content {
background-color: #111;
}
.light .dropdown-content {
background-color: #fff;
}
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
/* MEDIA QUERIES */
@media (max-width: 600px) {
.mobile-menu {
display: block;
position: fixed;
text-align: right;
width: 100%;
top: 0;
right: 0;
cursor: pointer;
z-index: 3;
height: auto;
opacity: .9;
align-items: center;
padding: 14px 16px;
overflow: hidden;
}
nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
display: none;
}
nav>div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
nav a,
.dropdown,
#navigation,
#resources,
.resources,
.dropdown-content a {
float: none;
display: block;
text-align: center;
position: relative;
padding: 1px 0;
}
.dropdown-content,
.dropbtn {
float: none;
display: block;
text-align: center;
position: relative;
padding: 0;
}
#navigation:after {
content: "Navigation";
}
#resources:after {
content: "Resources";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a class="mobile-menu light">menu</a>
<nav class="light">
<div>
<div id="navigation"></div>
<a href="#">Link 1</a>
<div class="dropdown">
<div href="#" class="dropbtn">Link 2</div>
<div class="dropdown-content">
<a href="#">Link 2-1</a>
<a href="#">Link 2-2</a>
<a href="#">Link 2-3</a>
<a href="#">Link 2-4</a>
<a href="#">Link 2-5</a>
</div>
</div>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
<div id="resources"></div>
<div class="resources">
<a href="#">Link 8</a>
<a href="#">Link 9</a>
<a href="#">Link 10</a>
<a href="#">Link 11</a>
</div>
</div>
</nav>
<section>
<p>Test text</p>
<p>some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text
to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : some text to cause scrolling : : some text to wrap : some text to wrap : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>some text to cause scrolling : </p>
<p>Last bit of text</p>
</section>
</body>
最佳答案
使用媒体查询添加这些样式
@media screen and (max-width: 767px) {
nav.light a:hover, nav.light .dropdown:hover .dropbtn {
background-color: transparent;
color: black;
}
.dropdown .dropbtn {
padding: 0 16px;
}
}
关于jquery - 填充、边距和背景颜色不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51130501/