使用javascript创建垂直响应式导航栏

文章/答案/技术大牛

发布

4回答

javascript、html、css

我目前正在尝试从头开始创建一个网站，因为我有时间练习。到目前为止，我已经有了一个可以工作的导航栏(这个导航栏实际上还没有把你带到其他页面，但确实可以工作)。我决定让这个导航栏具有响应性，因为它是一个相当大的栏。我已经给出了点击一个按钮就可以选择竖条的选项。需要注意的是，只有当浏览器宽度小于900px时，用户才能使用该按钮。通过反复试验，我已经确保按钮的javascript可以正常工作，但仍然没有运

浏览 38提问于2020-04-30得票数 2

回答已采纳

1回答

如何在bootstrap中根据屏幕大小切换html页面

html、twitter-bootstrap

我正在创建一个个人网站，我想确保它们在不同屏幕尺寸的设备上看起来很好。我有一个项目的网页，这将有不同的布局根据它是在哪个设备上查看。在桌面屏幕上，我想要一个垂直的navbar，当用户向下滚动页面时，它会向下滑动，并包含跳转到该页面中特定位置的链接。然而，在手机屏幕上，我想完全去掉垂直的navbar，只在主navbar下面有一个水平的navbar，然后每个部分都会有一个箭头回到页面的顶部。为了实现这一点，我计划创建两个页面projects.html和mprojects.html与上述布局。但是，如何根据bootstrap中的

浏览 0提问于2016-02-21得票数 0

1回答

垂直导航栏的CSS

css、navbar

正在尝试使用CSS3创建垂直导航栏。类似于"Smokey Bones“网站使用的以下示例请注意，简单的垂直链接列表将不起作用。此外，它应该是响应<

浏览 21提问于2018-08-05得票数 0

1回答

bootstrap导航栏可垂直扩展

html、twitter-bootstrap

我正在尝试让一个bootstrap导航栏固定在顶部(我已经这样做了)，并使它可以垂直扩展。我想把一个谷歌地图和我的所有控件在这个导航栏固定在顶部，使它可以垂直扩展，以便用户可以改变其大小在一个响应式的方式。我的导航栏和google地图div的代码：

浏览 0提问于2016-03-11得票数 0

1回答

Bootstrap导航栏折叠按钮的问题

html、twitter-bootstrap

我有一个问题是，当它在移动模式(小屏幕)它不显示侧栏菜单(仪表板，菜单，内容，类别等)内的汉堡。我怎么才能修复它？

浏览 20提问于2017-08-04得票数 0

1回答

twitter-bootstrap太宽导航栏

html、css、twitter-bootstrap

我在一个网站上工作，我正在使用bootstrap框架。我有一个导航栏设置，相当“原始”，但我有太多的项目在导航栏上。因此，我有两行导航栏项目。我想要的是导航栏在一行上设置尽可能多的项目，如果没有足够的宽度来设置它们，它会显示一个带有"more“的下拉列表，其余的项目在" dropdown”下。

浏览 1提问于2015-10-27得票数 0

1回答

为什么Bootstrap导航栏总是折叠？

twitter-bootstrap、bootstrap-4、ng-bootstrap、bootstrap-5

现在导航栏总是折叠的。当我点击汉堡切换菜单时，它会打开，但内容是垂直显示的，而不是水平显示的。我已经在下面包含了导航的代码。和以前一样。

浏览 2提问于2017-08-30得票数 19

回答已采纳

1回答

React Material Ui响应式抽屉

reactjs、material-ui

我使用React material UI Appbar组件创建了一个响应式导航栏。如果屏幕较大，则在导航栏中显示选项卡。如果屏幕大小为中等或更小，它将使用material UI responsive抽屉在导航栏的正下方左侧显示导航栏(主页、关于等)。如何将响应材料UI抽屉移到右侧？

浏览 51提问于2021-06-13得票数 0

回答已采纳

1回答

Twitter Bootstrap导航栏问题

html、css、twitter-bootstrap

目前我正在为当地的一家公司做我的第一个网站，当我在移动设备上查看导航栏时，我遇到了一个问题。如果向右滚动时设备无法显示整个导航栏，则会显示一个空白区域。

浏览 1提问于2013-06-10得票数 0

回答已采纳

1回答

创建响应式导航栏

javascript、html、css、responsive-design、navigation

我在将导航栏转换为响应式导航时遇到了一些问题。我的切换和导航定位不是很好。下面是该站点的示例。我不太确定缺失的部分是什么？ function myFunction() { var x = document.getElementById("myTopnavimg src="images/common/gnav

浏览 0提问于2018-11-09得票数 0

2回答

如何在Liferay中激活原生bootstrap 2.3.2 javascript组件

javascript、twitter-bootstrap、liferay、liferay-6、alloy-ui

我使用的是Liferay 6.2，并在我的html页面中包含了合金UI的Bootstrap版本，即：<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></s

浏览 2提问于2014-05-20得票数 1

1回答

如何在响应式布局中为移动屏幕添加另一个导航

wordpress、layout、navigation、responsive-design

我正在与响应式布局的wordpress主题设计。响应式布局是使用css3媒体quires.Currently安排的，该主题导航依赖于大屏幕尺寸的水平superfish导航。我想使用superfish或accordian将导航更改为垂直导航。如何更改移动屏幕的导航？

浏览 3提问于2012-12-21得票数 0

回答已采纳

2回答

Bootstrap 3导航栏跳到两行而不是崩溃？

twitter-bootstrap-3

我想我错过了显而易见的东西，但我有一个Bookstrap 3导航栏，它在桌面视图中工作得很好，但当我挤压宽度时，它达到了平板电脑的大小，而不是折叠到切换菜单中，它将菜单跳到两行：我尝试过通过媒体查询来减小导航栏中的文本大小

浏览 0提问于2015-01-16得票数 0

1回答

为Javascript* classList.toggle设置动画*

javascript、html、css、css-transitions

我最近开始学习CSS和HTML，并找到了一个响应式导航栏的教程。它们显示了带有javascript函数classList.toggle的移动版导航栏。

浏览 0提问于2016-06-17得票数 0

1回答

菜单导航栏网页:动态菜单windows.screen

javascript、html、css、menu、navigationbar

我想创建一个具有响应式布局的导航栏菜单。当网站显示在监视器上时，我想要重放导航栏。当网站显示在手机上时，我会显示菜单图标，最终显示导航栏。我该怎么做呢？

浏览 15提问于2019-07-27得票数 1

3回答

bootstrap 3 rails 4响应式导航栏"icon-bar“未展开

css、ruby-on-rails、twitter-bootstrap、navbar

当我的页面缩小太多，或者我在移动设备上时，我的导航栏就变成了一个小的三行按钮，显然就是所谓的“图标栏”。当我点击或触摸这个按钮时，没有任何反应。这是每个平台都存在的问题，移动设备，笔记本电脑等。我想要么让这个小的三线图标栏正常工作，要么把它一起移除。

浏览 1提问于2014-04-15得票数 1

1回答

使用mootools进行响应式顶部栏导航

javascript、jquery、navigation、mootools、responsive-design

我正在使用mootools，并将基金会作为我的css“框架”。我正在使用的导航顶栏从基金会和它的伟大。然而响应式的设计被毁了。 <--这是基础代码。<-导航文档我无法理解他们用来转换它的jquery脚本。有人知道mootools响应式导航栏吗？

浏览 2提问于2012-09-21得票数 0

回答已采纳

2回答

如何使用javascript切换响应式导航栏

javascript、html、css、responsive-design

点击汉堡包应该添加一个名为"active“的类到navbar中，这会改变CSS并使导航条可见。以下是与导航栏相关的媒体查询部分 display: initial;} top: 70px; .navbar a { display: block;这是javascript&l

浏览 2提问于2022-08-16得票数 0

5回答

如何创建响应式导航栏？

javascript、jquery、html、css、responsive-design

我有困难使我的网站响应，我已经做了它的所有页面，只需要完成我的导航。它可以在www.christierichards.co.uk/gcc_website/index.php上看到。基本上，当窗口大小调整到635px时，导航ul消失，并出现菜单图标，此时在CSS中，导航ul已设置为显示:无。这里我需要做的是，当你点击菜单图标时，导航被设置为显示区块，并向下滑动整个页面以显示导航(我希望这是有意义的！)如今很多响应式网站都在使

浏览 1提问于2014-04-13得票数 0

0回答

蓝图中的响应式导航栏？

blueprintjs

我正在尝试在我的新项目中使用Blueprint，而不是Bootstrap。如何在Blueprint中创建响应式导航栏？

浏览 0提问于2017-12-07得票数 3

回答已采纳

点击加载更多