tripolskypetr/navigation.html

## navigation.html
<!DOCTYPE html>
<html>
<head>
  <title>Drag and drop</title>
  <style>
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    html {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    nav {
      border: 1px solid black;
      overflow-x: scroll !important;
      user-select: none;
    }
    nav>ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding-inline-start: 0;
      margin-block-start: 0;
      margin-block-end: 0;
    }
    nav>ul>li {
      list-style-type: none;
      padding: 5px;
      margin: 5px;
    }
    nav>ul>li:not(:first-child) {
      margin-left: -1px;
      border-left: 1px solid black;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>
  <script>
    (function() {
      const element = document.querySelector('nav');
      let startX;
      let scrollLeft;
      element.addEventListener('mouseup', () => element.classList.remove('scrolling'));
      element.addEventListener('mousedown', (e) => {
        element.classList.add('scrolling');
        startX = e.pageX - element.offsetLeft;
        scrollLeft = element.scrollLeft;
      });
      const move = (x) => {
        if (!element.classList.contains('scrolling')) {
          return;
        }
        const walk = (x - startX) * 3;
        element.scrollLeft = scrollLeft - walk;
      };
      element.addEventListener('mousemove', (e) => move(e.pageX - element.offsetLeft));
    })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Drag and drop</title>
	<style>
	::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
	}
	html {
	-ms-overflow-style: none;
	scrollbar-width: none;
	}
	nav {
	border: 1px solid black;
	overflow-x: scroll !important;
	user-select: none;
	}
	nav>ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	}
	nav>ul>li {
	list-style-type: none;
	padding: 5px;
	margin: 5px;
	}
	nav>ul>li:not(:first-child) {
	margin-left: -1px;
	border-left: 1px solid black;
	}
	</style>
	</head>
	<body>
	<nav>
	<ul>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	<li>Link</li>
	</ul>
	</nav>
	<script>
	(function() {
	const element = document.querySelector('nav');
	let startX;
	let scrollLeft;
	element.addEventListener('mouseup', () => element.classList.remove('scrolling'));
	element.addEventListener('mousedown', (e) => {
	element.classList.add('scrolling');
	startX = e.pageX - element.offsetLeft;
	scrollLeft = element.scrollLeft;
	});
	const move = (x) => {
	if (!element.classList.contains('scrolling')) {
	return;
	}
	const walk = (x - startX) * 3;
	element.scrollLeft = scrollLeft - walk;
	};
	element.addEventListener('mousemove', (e) => move(e.pageX - element.offsetLeft));
	})();
	</script>
	</body>
	</html>