Скользящая навигация вниз с перемещением элементов списка

У меня есть навигация, которая скользит вниз таким образом, что цвет фона скользит вниз, а элементы списка исчезают, но не перемещаются сверху вниз, и это то, чего я хотел бы достичь.

Должно быть просто добавление верхнего значения с помощью addClass/removeClass, но не похоже, чтобы оно работало в javascript.

Примечание. .nav-toggle — это значок гамбургера, который отлично работает.

Надеюсь, кто-нибудь может мне помочь.

--> Скрипка

Javascript:

// Navigation //

$(function() {
$('.nav-toggle').click(function() {
    event.preventDefault();
    $('nav ul.right-nav').slideFadeToggle(300);
    $('.nav-toggle').toggleClass('is-active');
})
});

$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
    $('nav ul.right-nav').hide();
    $('.nav-toggle').removeClass('is-active');
}
});

$.fn.slideFadeToggle  = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,  easing, callback);
};

HTML:

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

31.07.2015

Ответы:

Я изменил ваш jQuery, проверьте это.

// Navigation //

$(function() {
    $('.nav-toggle').click(function() {
        event.preventDefault();
        $('.right-nav li').slideToggle(300);
        $('.nav-toggle').toggleClass('is-active');
    })
});

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
        $('nav ul.right-nav').hide();
        $('.nav-toggle').removeClass('is-active');
    }
});

$.fn.slideFadeToggle  = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box; /* width and height value includes content, padding and border not the margin */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* remove highlight on touch devices */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  position: relative;
  min-height: 100%; /* sticky footer  */
  overflow-y: scroll;
}

body {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #000;
  background-color: transparent;
}

h1, h2, p, nav {
    text-rendering: optimizelegibility !important;
}

b, strong {
  font-weight: normal;
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
}

h1, h2, nav a {
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0;
  -webkit-column-span: all; /* break out the column flow */ 
          column-span: all;
}

h1, nav a {
  font-size: 21px;
  text-align: center;
}

/************************************************
Navigation
************************************************/

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 9999;
  background-color: transparant;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.mobile-nav {
  display: none; /* hide mobile nav */
}

nav {
  position: relative;
  padding: 0 10px;
}

nav ul {
  list-style: none;
  font-size: 0; /* remove default spacing */
}

nav ul.left-nav {
  float: left;
}

nav ul.right-nav {
  float: right;
}

nav li {
  display: inline-block;
}

nav a {
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  margin: 0 10px;
  line-height: 60px;
}

nav ul.right-nav a:link, 
nav ul.right-nav a:visited {
  color: #000;
  text-decoration: none;
}

nav ul.right-nav a:hover,
nav ul.right-nav a:focus, 
nav ul.right-nav li.selected {
  color: #000;
  border-bottom: 2px solid black;
}

/************************************************
Navicon
************************************************/

.nav-toggle {
  display: block;
  position: absolute;
  cursor: pointer;
  padding: 14px 0;
  left: 10px;
  z-index: 3;
}

.nav-icon {
  position: relative;
  margin-top: 7px;
  margin-bottom: 7px;
}

.nav-icon, 
.nav-icon:before, 
.nav-icon:after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: black;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.nav-icon:before, 
.nav-icon:after {
  position: absolute;
  content: "";
}

.nav-icon:before {
  top: -7px;
}

.nav-icon:after {
  top: 7px;
}

.nav-toggle.is-active .nav-icon {
  background-color: transparent;
}

.nav-toggle.is-active .nav-icon:before {
  -webkit-transform: translateY(7px) rotate(45deg);
  -moz-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-icon:after {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -moz-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

/************************************************
Responsive
************************************************/

@media screen and (max-width:1012px) {
   .size-m {
    max-width: 700px; /* bigger text width */
   }
}

@media screen and (max-width:667px) {
    .compact-group .compact-item {
      width: -webkit-calc(50% - 2px * 2);
      width: calc(50% - 2px * 2);
      /* when max-width is less than this value it will 
      always display two resizing thumbnails next to each other */
    }
}

@media all and (min-width: 668px) {
    nav ul.right-nav {
      display: block !important;
    }
}

@media all and (max-width: 667px) {
    header {
      position: fixed;
      background-color: red;
    }

    .home {
      background-color: white;
      padding-left: 50px;
      padding-right: 50px;
    }

    .nav-up {
      top:-44px; /* hide navigation on scroll */
    }

    .mobile-nav {
      display: block; /* show mobile navigation */
    }

    nav {
      padding-left: 0;
      padding-right: 0;
    }

    nav ul.left-nav {
      float: none;
    }

    .right-nav {
      float: none;
      /* display: none; */
    }

    nav li {
      width: 100%;
    }

    nav a {
      display: block;
      margin: 0;
      line-height: 44px;
    }

    nav ul.right-nav a:hover,
    nav ul.right-nav li.selected {
      text-decoration: underline;
      border-bottom: none; /* remove border when mobile */
    }

    .grid-wrapper {
      margin-top: 60px;
    }
}

@media all and (max-width: 600px) {
    body { 
      font-size: 18px;
    }

    h1, h2, nav a {
      font-size: 21px;
    }

    h1 {
      margin: 0 0 20px 0;
    }

    p {
      margin: 0 0 20px 0;
    }
}

@media all and (max-width: 480px) {
    .grid-item a:hover img {
      opacity: 1.0;
    }   

    .copy {
      padding: 20px 10px;
    }

    .copy-img {
      padding: 20px 0;
    }

    .caption {
      display: none; /* remove caption on mobile devices */
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
	<nav>
		<div class="mobile-nav">
			<div class="nav-toggle"><i class="nav-icon"></i></div>
		</div>
		<ul class="left-nav">	
			<li class="home"><a href="#">Pixelation</a></li>	
		</ul>
		<ul class="right-nav">	
			<li><a href="#">Work</a></li>
			<li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>

31.07.2015

Спасибо, но возможно ли, чтобы они оставались встроенными, а не плавали вниз друг над другом? 31.07.2015

Извините, но, похоже, это не работает, но это много лишнего кода. Я больше думал о настройке nav ul.right-nav в мобильном режиме position: absolute, width: 100% и добавлении и удалении класса, который изменит верхнее значение -88px на 0px. 31.07.2015

Это явно работает. Меню расположены сверху вниз, как вы хотели 31.07.2015

Извините, теперь я вижу это. Он работает после медиа-запроса 480px. Спасибо, это немного больше кода, чем я хотел бы видеть, но спасибо. 31.07.2015

Есть много других способов сделать это, нужно только поискать. Рад помочь. Если вы цените мой ответ, пожалуйста, отметьте его как ответ 31.07.2015

используйте function(event) вместо function()

в вашем сценарии

$('.nav-toggle').click(function(event) {
        //  code
}

Демо — https://jsfiddle.net/kkxtr8ze/5/

31.07.2015

Извините, но я не вижу разницы, что у меня уже работало? 31.07.2015

Новые материалы

Создание кнопочного меню с использованием HTML, CSS и JavaScript

Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

Внедрите OAuth в свои веб-приложения для повышения безопасности

OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

Классы в JavaScript

class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

Как свинг-трейдеры могут использовать ИИ для больших выигрышей

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

Как построить любой стол

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

Обзор: Машинное обучение: классификация

Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

Разработка расширений Qlik Sense с qExt

Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Web Development Python Coding Deep Learning AI React Software Engineering Nodejs Development Typescript Data Java NLP Front End Development Computer Science Algorithms Learning Programming Languages ChatGPT Tech Tutorial Reactjs Angular React Native Productivity Cybersecurity Python Programming Javascript Development Neural Networks Learning To Code HTML Developer CSS