滑动标题/导航栏

Sliding Header/NavBar

本文关键字：导航 标题      更新时间：2023-09-26

我有一个标题，但我被困在两件事上。

  1. 如何正确定位所有内容？我想要的是将其定位为底部带有导航栏的标题，然后在该导航栏中，我想要一个可以滑动的div，我想要 x 数量的选项卡。
  2. 如何使用JavaScript/JQuery使div向左/向右滑动？对不起，如果它没有意义。

我的代码是：

 <body>  
     <div class="header">
      <div id="topHeader"> </div>
        <div class="navBar">
        //buttons/text here
        <div id="slider"> </div>
        </div>
     </div>
 </body>

我尝试使用定位（绝对/相对），但是当我使导航栏相对时，它不会停留在底部，但是如果我同时将其和滑块设为绝对，滑块就不会留在导航栏中。还有其他方法可以完成它吗？

我无法理解如何使其工作。然而，它来了。

标头的 css 将是： 

.header {
display: block; // for that overall div..
}

然后你有一个顶部标题，它更像是一个顶部标题，你想要导航栏。好的，你说你想让它作为标题。然后就按原样写吧！它将用作标题，我的意思是只需添加一些边距和填充，以便它与其他对象有一定的距离。

#topHeader {
margin: 5px; // overall 5px pixel for all sides.
padding: 2px; // 2 pixel padding..
}
导航栏

是带有可能按钮和文本的导航栏，您将将其用作指向其他页面的超链接。右？因此，请尝试使用这样的东西：

<ul>
  <li>First text</li>
  <li>Second text</li>
  <li>Third text</li>
</ul>

现在，将它们全部显示在一行中。由于您希望它们在行中，因此列表项将显示在一行中，而不是默认显示在彼此下方。x选项卡将是列表中使用的li的数量，它将显示所有按钮或您尝试显示的内容。为此，CSS 是：

li {
display: inline;
}

要删除项目符号样式，请使用以下命令：

ul {
list-style: none;
}

这样，导航栏将像其他网站显示的那样显示在一行中。

第二个问题：

滑块在鼠标的帮助下滑动，而不是jQuery（开玩笑）。你可以使用滚动条伙伴，jQuery用于滚动或滑动，但一旦滑动就会隐藏。您将能够看到它，但是当它向后滚动时，它将隐藏，并退出页面，直到您再次将其滑回。您可以坚持滚动条进行滚动或滑动。

就这样！

j查询滑块：

从jQuery API中，如果你检查slide()你会发现，任何元素上的任何事件都会导致某个元素中的幻灯片（这将上下滑动元素）。

下面是一个示例： 

$(document).ready(function () {
  $("#slider").click(function () {
    $(".navBar").slideToggle(1000); // the time consumed is 1 sec = 1000 milliseconds.
  }
});

您可以看到，单击带有 id="slider" 的元素将滑动带有 class="navBar" 的元素，并且幻灯片将消耗 1 秒的时间。

意见或建议：

我想建议您首先了解有关您将使用的代码的基础知识。它们可以通过谷歌，必应或任何其他搜索引擎轻松搜索。因为如果您发布您一无所知的问题，将导致您的反对票。我知道这太荒谬了。因此，当您要使用jquery并且对此一无所知时，请尝试去Google并编写此搜索项jquery如果未找到，则将tutorial附加到搜索查询中并找到它。最好的教程可以在开发人员的网站上找到。就像你可以在 json.org 学习 jQuery on jquery.com 和 JSON。

相关文章：