html - 创建可折叠的导航栏-6ren

html - 创建可折叠的导航栏

转载作者：行者123 更新时间：2023-11-27 23:51:55

25

4

我想制作一个主可折叠导航栏是将包含其他导航栏(可折叠)。我有一个，但我无法制作一个包含该可折叠导航栏的主可折叠导航栏。就像在这段代码中一样，我将“个人资料”作为一个可折叠栏，并希望将“导航”作为另一个包含“个人资料”导航栏的可折叠栏

我尝试编辑下面的 CSS:

.menu {
  border-radius: 8px;
  position: relative;
}

I have tried to add: .menu {
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <title></title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    list-style: none;
    text-decoration: none;
  }
  
  .menu {
    border-radius: 8px;
    position: relative;
  }
  
  .btn-nav {
    display: block;
    padding: 16px 20px;
    background: #333;
    color: white;
    font-size: 2em;
  }
  
  .item {
    border-top: 1px solid #2980b9;
    overflow: hidden;
  }
  
  .btn {
    display: block;
    padding: 16px 20px;
    background: #3498db;
    color: white;
    position: relative;
  }
  
  .btn:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3498db;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
  }
  
  .btn i {
    margin-right: 10px;
  }
  
  .smenu {
    background: #333;
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
  }
  
  .smenu a {
    display: block;
    padding: 16px 26px;
    color: white;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
  }
  
  .smenu a:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #3498db;
    left: 0;
    top: 0;
    transition: 0.3s;
    opacity: 0;
  }
  
  .smenu a:hover:before {
    opacity: 1;
  }
  
  .item:target .smenu {
    max-height: 10em;
  }
</style>


<body>
  <div class="container">
    <a class="btn-nav" href="#">Navigation</a>
    <div class="menu">
      <li class="item" id='profile'>
        <a href="#profile" class="btn"><i class="far fa-user" </i>Profile</a>
        <div class="smenu">
          <a href="#">Posts</a>
          <a href="#">Picture</a>
        </div>
      </li>
    </div>
  </div>
</body>

</html>

我想创建一个可折叠的导航栏，它将包含另一个可折叠的导航栏。

示例:如果您单击导航栏，则会打开一个导航栏，该导航栏也是可折叠的。

最佳答案

一种方法是使用 Bootstrap 折叠:

.menu {
  border-radius: 8px;
  position: relative;
}
  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    list-style: none;
    text-decoration: none;
  }
  
  .menu {
    border-radius: 8px;
    position: relative;
  }
  
  .btn-nav {
    display: block;
    padding: 16px 20px;
    background: #333;
    color: white;
    font-size: 2em;
  }
  
  .item {
    border-top: 1px solid #2980b9;
    overflow: hidden;
  }
  
  .btn {
    display: block;
    padding: 16px 20px;
    background: #3498db;
    color: white;
    position: relative;
  }
  
  .btn:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3498db;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
  }
  
  .btn i {
    margin-right: 10px;
  }
  
  .smenu {
    background: #333;
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
  }
  
  .smenu a {
    display: block;
    padding: 16px 26px;
    color: white;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
  }
  
  .smenu a:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #3498db;
    left: 0;
    top: 0;
    transition: 0.3s;
    opacity: 0;
  }
  
  .smenu a:hover:before {
    opacity: 1;
  }
  
  .item:target .smenu {
    max-height: 10em;
  }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
 <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
  <div class="panel-title">
    <a data-toggle="collapse" href="#collapse1" class="btn-nav" href="#">Navigation</a>
	</div>
	</div>
 <div id="collapse1" class="panel-collapse collapse">	
  <div class="panel-body">
      <li class="item" id='profile'>
        <a href="#profile" class="btn btn-primary"><i class="far fa-user" </i>Profile</a>
        <div class="smenu">
          <a href="#">Posts</a>
          <a href="#">Picture</a>
        </div>
      </li>
    </div>
	</div>
	</div>
	</div>
	</div>

来源:https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
希望对您有所帮助!

关于html - 创建可折叠的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56477282/

25

4

0

文章推荐： html - CSS:宽度百分比和边框

文章推荐： javascript - JQuery.append() - 如何在没有 ID 的情况下追加

文章推荐： c++ - 渲染透明物体

文章推荐： c++ - 使用方法而不是构造函数设置值的类的一行初始化

jQuery 可折叠
我正在尝试创建一个无序列表，其中每个包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
Java 可折叠 if 语句
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。原始代码如下所示: if ((getSomething() != null && getS
javascript - 可折叠/可展开的表格行为
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
javascript - 可折叠 Accordion
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
javascript - 可折叠，具有内容相关的展开大小
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？这是我
jQuery 可折叠 UL
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个一次。
Flutter 可折叠/可扩展卡片
我正在尝试匹配这个设计点击卡片应该展开我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
Javascript 可折叠 div 不起作用？
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
css - Materialise CSS - 可折叠
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。出于某种原因，当
php - 如何使递归 TreeView 可折叠
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。这是我的基本
java - Sonar 可折叠 if 语句
我收到异常“可折叠 if 语句”。通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
javascript - Angular 可折叠 Accordion
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
reactjs - Ant Design - 使菜单可折叠/可折叠
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
twitter-bootstrap - 可折叠 Bootstrap ，显示第一个元素
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
haskell - 可折叠、Monoid 和 Monad
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
Django admin - 如何使 "inlines"可折叠？
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案在 Django 1.10+ 中: class MyModelInl
javascript - YUI dataTable 行可展开/可折叠
有人已经用 YUI dataTable 制作了如下示例的脚本吗？示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
python - wxpython 可折叠 Pane 大小响应不一致
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
c# - Xamarin Forms 可折叠 StackLayout
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
android - 可折叠 View 不适用于 viewpager
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。我想在用户滚动布局时折叠顶部水平回收器 View

首页

博学

6Ren·AI

商城

html - 创建可折叠的导航栏