Как реализовать такое Меню на javascript(jquery)?

253

27 декабря 2021, 05:10

Скажите, пожалуйста, как реализовать скролл у меню на мобильной версии? Фото прикладываю. Логика такая: когда пункты меню перестают влезать, должен быть реализован скролл Спасибо.

Answer 1

Возможно, это то что вам нужно.

Вариант со скроллом. Скролл появляется при необходимости. Здесь JavaScript (jQuery) не требуется.

body, 
html { 
  margin: 0; 
  padding: 0; 
} 
 
ul, 
li { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  display: inline-block; 
} 
 
#nav__min, 
#nav__max { 
  height: 70px; 
  background-color: red; 
  white-space: nowrap; 
  overflow-y: hidden; 
  overflow-x: auto; 
  margin-bottom: 20px; 
} 
 
.nav__ul a { 
  color: white; 
  text-decoration: none; 
  vertical-align: middle; 
  line-height: 70px; 
  margin: 0 20px; 
}

<div id="nav__min"> 
  <ul class="nav__ul"> 
    <li><a href="#">Меню 1</a></li> 
    <li><a href="#">Меню 2</a></li> 
    <li><a href="#">Меню 3</a></li> 
  </ul> 
</div> 
<div id="nav__max"> 
  <ul class="nav__ul"> 
    <li><a href="#">Меню 1</a></li> 
    <li><a href="#">Меню 2</a></li> 
    <li><a href="#">Меню 3</a></li> 
    <li><a href="#">Меню 4</a></li> 
    <li><a href="#">Меню 5</a></li> 
    <li><a href="#">Меню 6</a></li> 
    <li><a href="#">Меню 7</a></li> 
    <li><a href="#">Меню 8</a></li> 
    <li><a href="#">Меню 9</a></li> 
    <li><a href="#">Меню 10</a></li> 
  </ul> 
</div>

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

$('.nav__ul').on('mousedown', function(e) { 
  var $this = $(this), 
    $window = $(window), 
    mouseX = e.pageX, 
    width = $this.outerWidth() 
  elemX = $this.offset().left + width - mouseX; 
  e.preventDefault(); 
  $window.on('mousemove.drag', function(e2) { 
    $this.offset({ 
      left: e2.pageX + elemX - width, 
      right: e2.pageX + elemX - width 
    }); 
  }).one('mouseup', function() { 
    $window.off('mousemove.drag'); 
  }); 
});

body, 
html { 
  margin: 0; 
  padding: 0; 
} 
 
ul, 
li { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  display: inline-block; 
} 
 
#nav { 
  height: 70px; 
  background-color: red; 
  white-space: nowrap; 
  overflow: hidden; 
  margin-bottom: 20px; 
  padding: 0 20px; 
} 
 
.nav__ul a { 
  color: white; 
  text-decoration: none; 
  vertical-align: middle; 
  line-height: 70px; 
} 
 
.nav__ul li { 
  margin: 0 20px; 
} 
 
.nav__ul li:first-child { 
  margin: 0 20px 0 0; 
} 
 
.nav__ul li:last-child { 
  margin: 0 0 0 20px; 
} 
 
.nav__ul { 
  cursor: move; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="nav"> 
  <ul class="nav__ul"> 
    <li><a href="#">Меню 1</a></li> 
    <li><a href="#">Меню 2</a></li> 
    <li><a href="#">Меню 3</a></li> 
    <li><a href="#">Меню 4</a></li> 
    <li><a href="#">Меню 5</a></li> 
    <li><a href="#">Меню 6</a></li> 
    <li><a href="#">Меню 7</a></li> 
    <li><a href="#">Меню 8</a></li> 
    <li><a href="#">Меню 9</a></li> 
    <li><a href="#">Меню 10</a></li> 
    <li><a href="#">Меню 11</a></li> 
    <li><a href="#">Меню 12</a></li> 
    <li><a href="#">Меню 13</a></li> 
    <li><a href="#">Меню 14</a></li> 
    <li><a href="#">Меню 15</a></li> 
    <li><a href="#">Меню 16</a></li> 
    <li><a href="#">Меню 17</a></li> 
    <li><a href="#">Меню 18</a></li> 
    <li><a href="#">Меню 19</a></li> 
    <li><a href="#">Меню 20</a></li> 
    <li><a href="#">Меню 21</a></li> 
    <li><a href="#">Меню 22</a></li> 
    <li><a href="#">Меню 23</a></li> 
    <li><a href="#">Меню 24</a></li> 
    <li><a href="#">Меню 25</a></li> 
    <li><a href="#">Меню 26</a></li> 
    <li><a href="#">Меню 27</a></li> 
    <li><a href="#">Меню 28</a></li> 
    <li><a href="#">Меню 29</a></li> 
    <li><a href="#">Меню 30</a></li> 
  </ul> 
</div>

Answer 2

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

P.S. чтобы увидеть меню, сожмите браузер до 500px

let burger__menu = document.querySelector('.burger__menu'); 
let header__nav = document.querySelector('.header__nav'); 
 
burger__menu.addEventListener('click', () => { 
	burger__menu.classList.toggle('active'); 
	header__nav.classList.toggle('active'); 
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 
 
*, *:before, *:after { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
} 
 
body { 
	margin: 0; 
	color: white; 
	font-size: 16px; 
	font-family: 'Open Sans', sans-serif; 
} 
 
img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
} 
 
.header { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	padding: 0px; 
	background-color: #D81829; 
	min-height: 100px; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	align-items: center; 
} 
 
.header__ul { 
	list-style: none; 
	padding: 0; 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	-webkit-flex-wrap: wrap; 
	-moz-flex-wrap: wrap; 
	-ms-flex-wrap: wrap; 
	-o-flex-wrap: wrap; 
	flex-wrap: wrap; 
	font-size: 20px; 
} 
 
.header__li { 
	margin-left: 5vw; 
} 
 
.header__li a { 
	color: white; 
	text-decoration: none; 
	cursor: pointer; 
	position: relative; 
	white-space: nowrap; 
} 
 
.header__li a::before { 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	display: block; 
	content: ''; 
	width: 0%; 
	height: 1px; 
	background-color: white; 
	transition: width .2s ease-in-out; 
} 
 
.header__li a:hover::before { 
	width: 100%; 
} 
 
@media (max-width: 480px) { 
	.header__ul { 
		position: absolute; 
		opacity: 0; 
		visibility: hidden; 
		background-color: #D81829; 
		top: 30px; 
		padding: 10px 10px; 
		border: 2px solid black; 
	} 
 
	.header__nav { 
		margin-left: 30px; 
		display: -webkit-flex; 
		display: -moz-flex; 
		display: -ms-flex; 
		display: -o-flex; 
		display: flex; 
		align-items: center; 
		position: relative; 
	} 
 
	.header__li { 
		margin-left: 0; 
	} 
 
	.header__nav.active .header__ul { 
		transition: .4s opacity ease-in-out, 
					.4s visibility ease-in-out; 
		opacity: 1; 
		visibility: visible; 
	} 
 
	.burger__menu { 
		display: -webkit-flex; 
		display: -moz-flex; 
		display: -ms-flex; 
		display: -o-flex; 
		display: flex; 
		justify-content: center; 
		align-items: center; 
		flex-direction: column; 
		transform: translateZ(0); 
		background: #000; 
		padding: 20px 23px; 
		max-width: 46px; 
		max-height: 40px; 
		cursor: pointer; 
		position: relative; 
	} 
 
	.line__burger { 
		position: absolute; 
		width: 30px; 
		height: 2px; 
		background-color: white; 
		transition: transform .4s ease-in-out; 
	} 
 
	.line__burger:first-child { 
		transform: translateY(13px); 
	} 
 
	.line__burger:last-child { 
		transform: translateY(-13px); 
	} 
 
	.burger__menu.active .line__burger:nth-child(1) { 
		transform: rotate(45deg); 
	} 
 
	.burger__menu.active .line__burger:nth-child(2), 
	.burger__menu.active .line__burger:nth-child(3) { 
		transform: rotate(-45deg); 
	} 
 
}

<header class="header"> 
	<nav class="header__nav"> 
		<div class="burger__menu"> 
			<div class="line__burger"></div> 
			<div class="line__burger"></div> 
			<div class="line__burger"></div> 
		</div> 
		<ul class="header__ul"> 
			<li class="header__li"><a>О компании</a></li> 
			<li class="header__li"><a>Доставка</a></li> 
			<li class="header__li"><a href="">Оплата</a></li> 
			<li class="header__li"><a>Новости</a></li> 
		</ul> 
	</nav> 
</header>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Растягиваются объекты вдали от центра

Имеется такой код:

201

javascript

Как убрать у числа пробел JS

Есть функция parseInt(max30, 10); преобразует строки вида 1100 в числоНо бывает встречается стока записанная вот так 1 100, пробел мешает, выдает NaN

167

javascript

запуск скриптов php и js по кнопке

Имеется кнопка, при нажатии на которую происходит php скрипт, на добавление данных в базу данныхТак же по этой кнопке вызывается js скрипт, со всплывающим...

101

Java

Как компилятор понимает, где одна переменная, а где другая?

Почему если при создании объектов указать перед значением (short), то компилятор понимает, в какую переменную записать это значение?

256