繁体   English   中英

如何在汉堡导航中创建移动友好的滚动边栏?

How can I create a mobile friendly scrollspy sidebar into a hamburger nav?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试使此侧面的nav / scrollspy nav移动友好,并且没有任何工作。 我应该怎么做?

我已经尝试过折叠和其他引导程序组件,但是由于之前从未使用过scrollspy,所以我不确定从哪里开始。 我可以在普通大小的窗口上使用scrollspy进行工作,但是在md和较小的窗口上却变得很奇怪,所以我想使其成为汉堡菜单。

<div class="container">
<div class="row">
    <div class="col-md-3 collapse text-center d-flex align-itmes-stretch justify-content-center">
        <div id="navbar" class="nav nav-expand-md position-fixed nav-pills flex-column navbar-dark bg-white">
            <a class="navbar-brand p-5"><span class="name">Jan Clark</span><br><span class="studio">Studio</span></a>
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply">
                    <span class="navbar-toggler-icon"></span>
                    </button>
            <a class="nav-link" href="#item-1">Item 1</a>
            <a class="nav-link" href="#item-2">Item 2</a>
            <a class="nav-link" href="#item-3">Item 3</a>
            <a class="nav-link" href="#item-4">Item 4</a>
        </div>
    </div>

    <div class="col-md-9">
            <h4 id="item-1">Item 1</h4>
            <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
            <h4 id="item-2">Item 2</h4>
            <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
            <h4 id="item-3">Item 3</h4>
            <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
            <br>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
            <h4 id="item-4">Item 4</h4>
            <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
    </div>
</div>
</div>
问题暂未有回复.您可以查看右边的相关问题.
2 如何在bootstrap中使用汉堡包按钮进行导航选项卡?

我正在为我的响应式网站使用bootstrap。 我有一个标签内容,我希望它的导航标签可以在移动视图中与汉堡按钮折叠,就像这个站点中的标签式字形。 我还附上图片了解更多细节。 这是我的nav-tabs标记代码: 我想使用这个汉堡按钮代码,就像当屏幕尺寸变得足够小时显示为切换按钮的那 ...

4 如何使无序列表导航友好

我正在尝试使网站上的导航响应式(最终对移动设备友好),但是我无法使其按我想要的方式工作。 理想情况下,在小于480像素的屏幕上,徽标应位于顶部,其他导航链接应在下方堆叠(每行一个),但现在我将为在移动屏幕上可辨认的所有内容做好准备。 我研究了很多不同的响应选项,但是导航方式的设置似乎 ...

2013-12-09 05:19:24 2 1214   html/ css
5 如何为手机创建菜单侧栏

我有以下代码,并且隐藏菜单类的范围使菜单项的标题不显示,但在打开菜单侧栏时也不显示它们。 如果我删除了类隐藏菜单,它会显示菜单标题,但是当菜单侧栏没有打开时它们也会显示,因此很奇怪。 在桌面上,它工作正常,但在手机/平板电脑上,它正如我所说的那样发生。 我将发布一些图像以使您完全理解。 side ...

9 如何在我的网站的移动视图中添加汉堡包

我必须为网站代码的移动视图添加一个汉堡包。 我在w3学校的帮助下尝试了一下,但效果不佳。 我将分享我的HTML和CSS代码。 我添加了一个汉堡图标,只是使其处于活动状态。 我应该在单独的JavaScript文件中编写代码还是在HTML中添加任何代码? 我尝试从HTML ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM