我正在制作一个使用html,css和javascript的导航栏。我最近在使导航栏响应时遇到了一个问题,我需要帮助。这里有一个指向codepen:的链接,我在这里粘贴了我所有的代码,这样你就可以更好地理解我的意思,并尝试帮助我。所以一切都运行得很好,除了当我点击“汉堡包”图标时,导航栏下面应该会出现一个下拉菜单,它延伸到整个页面的宽度,在一列中有4个导航选项。这是一个我希望它在单击“汉堡包”图标时所做的事情的示例:
Tell me if you need any more information
编辑:下拉菜单现在可以像你在第一个代码链接中看到的那样工作了。但还有另一个问题。如果你将鼠标悬停在
我必须实现一个需要在页面上放置一个水平导航栏的设计。此导航栏中可能存在未知数量的项目。如果栏用完了空间,溢出的链接将被填充到"more“下拉列表中。
视觉效果:
|page |
|nav item 1 nav item 2 nav item 3 MORE v |
| |
在“更多”中会有“导航项目4”和“导航项目5”。它会随着屏幕尺寸的变化而变化。
我的想法是使用JavaScript一次一个地
我对此几乎要失去理智了。我有一个bootstrap导航栏,我喜欢自己设计颜色等。因此,我使用以下代码更改了下拉菜单导航栏的链接颜色
.navbar .navbar-nav .dropdown-menu li a {
color:white;
}
它工作得很好,所以如果我有如下菜单项
Menu Item
sub menu item
子菜单项变为白色。
现在问题就从这里开始了。如果我将屏幕变小以折叠导航栏。下拉菜单链接的颜色仍然是默认的,所以我认为bootstrap使用的是媒体查询,不管我怎么尝试,它都不起作用。同样的技术是行不通的。
@media (max-width:767px){
我使用bootstrap 3,Html 5和CSS 3。网站有一个导航栏,如果用户点击导航栏,它就会关闭。但是如果用户点击一个项目,比如一个链接,它就会跟随这个链接。当我离开导航栏关闭导航栏的下拉列表时,我如何阻止这些元素?我想消除这些副作用。
$('body').click(function (event) {
// If user does not click on navigation and navigation drop down is visible.
if (!($(event.target).is('#navigation *')