当前位置: 首页 > 知识库问答 >
问题:

如何制作固定在屏幕顶部的响应导航栏

戴嘉珍
2023-03-14

我正试图创建一个响应导航栏,它固定在页面顶部,链接高度为全高(100%),这样它们的背景颜色就可以改变。到目前为止,我只成功地修复了导航栏,并且这些链接在设备之间只是有点兼容。我将使用这种效果,即媒体查询强制菜单进入包含在图像中的导航。http://getbootstrap.com/examples/navbar-fixed-top/.我不喜欢bootstrap,我希望在将来自己能够做到这一点。有什么建议吗?

这是我的代码

玉:

链接(rel=“stylesheet”,href=“/main.css”)

导航

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

减:

导航

宽度:100%;

高度:3em;

顶部:0px;

左: 0px;

位置:固定;

背景-颜色:#000;

UL Li a{

   height:100%;

   text-align:center;

   margin-top: -3.5em;

   text-decoration:none;

   padding-right: 9%;

   padding-left: 9%;

   &:hover {

       color:#7f8c8d;

   }

}

}

共有1个答案

禄奇希
2023-03-14

我会重新考虑固定的标题定位,并加入一个绝对的方法。我个人不喜欢在我的方式中不断地使用标题,但是绝对可以通过下面的代码轻松地更改为固定

以下是我通常会做的方式,以确保一切都保持领先。

HTML

<div id="wrapper">
<ul id="navBar">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100%;
}
#wrapper {
    background:#AAA;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
ul {
    padding:0;
    margin:0;
}
li {
    float:left;
    min-width:50px;
    background:#CCC;
    list-style:none;
    vertical-align:middle;
    padding:15px;
}
li a {  
    color:#000;
}

或者把你自己摆弄掉:

对于媒体查询争吵,请尝试此方法。您可以调整小提琴窗口的大小。对于右下角的预览窗口,尝试将其减少到300px或更低。

 类似资料:
  • 我创建了一个固定顶部的bootstrap 4 navbar,它在大屏幕上展开,在其他屏幕上折叠。我还将添加到中,以防止navbar与主体内容重叠。 但是,在较小的屏幕上,当使用hamburger按钮展开折叠的navbar时,它会展开并填充屏幕。然后,一些导航链路变得隐藏(即在显示器之外)。此外,滚动不滚动navbar,而只滚动navbar下面的主体内容。 有没有可能压缩navbar以不占用超过屏幕

  • 本文向大家介绍twitter-bootstrap 基本导航栏(固定在页面顶部),包括了twitter-bootstrap 基本导航栏(固定在页面顶部)的使用技巧和注意事项,需要的朋友参考一下 示例            

  • 我有一个布局: 我想在屏幕顶部放置一个进度条,这样即使用户滚动,他们也能看到它。 我更喜欢不将NestedScrollView包装在另一个约束布局中。 更好的是,我希望在需要它的所有其他活动或片段中重用它。 有没有一个简单的方法可以使用AndroidStudios预览功能?

  • 我正在创建一个带有底部导航和抽屉的简单应用程序。 我将所有屏幕包装在带有顶部栏和底部栏的脚手架中。我想在特定屏幕上隐藏顶部栏和底部栏。有人知道如何实现吗 以下是设置导航的代码。 包含用于导航到屏幕

  • 问题内容: 我在网站上使用引导程序,并且导航栏固定顶部出现问题。当我只使用常规导航栏时,一切都很好。但是,当我尝试将其切换到导航栏固定顶部时,该网站上的所有其他内容都会向上移动,就像导航栏不存在并且导航栏与之重叠一样。我基本上是这样布置的: 我试图完全复制引导程序示例,但仅在使用navbar fixed top时仍然存在此问题。我究竟做错了什么? 问题答案: 您的答案是正确的docs: ### 需

  • 本文向大家介绍jQuery 顶部导航跟随滚动条滚动固定浮动在顶部,包括了jQuery 顶部导航跟随滚动条滚动固定浮动在顶部的使用技巧和注意事项,需要的朋友参考一下