gpt4 book ai didi

javascript - 导航栏多项选择

转载 作者:行者123 更新时间:2023-11-28 06:20:43 25 4
gpt4 key购买 nike

所以我正在摆弄我在 http://cssmenumaker.com/menu/responsive-flat-menu 上找到的这个设计。但是当浏览器中的导航栏缩小时我遇到了一些问题。浏览器的全宽看起来就像下面的 img 1....当缩小时,它会变成一个带有下拉菜单的汉堡菜单,如 img 2 所示。问题是它会重复,因为我添加了一个额外的 li 标签来添加“ super 棒的菜单”。所以,我的问题是如何删除 img 2 中的额外重复(它应该像 img 1 一样保留全宽)。

我尝试了一些简单的删除类,但它们不起作用。我确信这非常简单,只是我没有看到它。

enter image description here enter image description here

我把代码贴在这里(因为无论出于什么原因,在这里缩进jquery都是一个巨大的痛苦) http://codepen.io/anon/pen/NxZLKo

<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li><a href='#' class="current">Super Awesome Menu</a></li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->

最佳答案

您可以使用媒体查询来做到这一点。将这行代码放入您的 css 中,然后就可以开始了。

@media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }

它将隐藏第一个 child ,在这种情况下 super 棒,如果你这样做 li:nth-child(2) 它将隐藏 Home 等。

关于javascript - 导航栏多项选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35555071/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com