Создание складной панели навигации - PullRequest
Новая
       1

Создание складной панели навигации

0 голосов
/ 06 июня 2019

Я хочу сделать так, чтобы главная панель навигации была разборной и содержала другую панель навигации (разборную). У меня есть один, но я не могу сделать главную складную панель навигации, которая будет содержать эту складную панель навигации. Как и в этом коде, я сделал «Профиль» как одну складную панель и хочу сделать «навигацию» как другую складную панель, которая будет содержать панель навигации «Профиль»

Я попытался изменить 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>

Я хочу создать складную панель навигации, которая будет содержать другую складную панель навигации.

Пример. Если щелкнуть панель навигации, откроется панель навигации, которая также будет разборной.

1 Ответ

0 голосов
/ 06 июня 2019

Один из способов использования коллапса 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
Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...