Расширение и изменение панели навигации, когда пользователь прокручивает вниз

Question

Расширение и изменение панели навигации, когда пользователь прокручивает вниз

В настоящее время я работаю над веб-сайтом проекта и являюсь одностраничным веб-сайтом, и я новичок в Bootstrap 3, поэтому я все еще использую некоторые шаблоны запуска. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не знаю, как составить эффективное, но сложное меню гамбургеров, которое хочет клиент:

когда пользователь находится на домашней странице или в заголовке / карусели, одно только меню гамбургера должно находиться на прозрачном навигационном фоне в правом верхнем углу экрана (не на краю).
это меню гамбургера из заголовка должно скрываться или просто фиксироваться вверх, когда вы немного прокручиваете.
когда вы прокручиваете ПОСЛЕ заголовка, должна появиться предполагаемая черная навигационная панель, закрепленная сверху, которая должна расширить ранее небольшую навигационную панель, а затем превратиться в полноэкранную панель шириной 100% с меню гамбургера на правой стороне и логотипом компании на левая сторона.
при щелчке меню гамбургера в правой части экрана должно появиться окно навигации.

Это мой HTML:

<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand">Navigation</a></li>
            <li><a href="#top">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Works</a></li>
            <li><a href="#portfolio">People</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

В настоящее время я использую стандартный шаблон Bootstrap 3, потому что я хотел узнать больше об этом, прежде чем перейти к 4. Это мой CSS:

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary .badge {
  color: #428bca;
  background-color: #fff;
}

Это все, с чем я сейчас работаю для меню. Я хотел бы создать новые классы для этих вещей, поэтому я не буду полагаться на шаблон Bootstrap и могу редактировать его как можно скорее, не испортив все.

0

css twitter-bootstrap navigation hamburger-menu onepage-scroll

Источник

user6122731 07 авг '18 в 22:56

1 ответ

Решение

Другие вопросы по тегам css twitter-bootstrap navigation hamburger-menu onepage-scroll

user6555850 08 авг '18 в 08:31 2018-08-08 08:31 · Accepted Answer · 2018-08-08 08:31

Я думаю, что вам нужна боковая панель с некоторыми эффектами прокрутки. Вы должны будете использовать некоторые javaScript для достижения этой цели. Я не знаю деталей того, как именно это делается, но я могу дать вам некоторые ресурсы, которые помогут вам достичь этого.

Сделайте прозрачный navbar с меню гамбургера. (Код приведен ниже)

.navcolor{
  background-color:rgba(0,0,0,0);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
<body>
<nav class="navbar navbar-light navcolor  mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">People</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

Создайте боковую панель. Следуйте этому сообщению в блоге, чтобы добиться этого https://bootstrapious.com/p/bootstrap-sidebar
Добавьте эффекты прокрутки. Смотрите этот код на codepen. https://codepen.io/sonorangirl/pen/XmRBjq

Я уверен, что вы можете объединить все вышеперечисленные шаги для достижения того, что вы хотите. Всего наилучшего!