가로스크롤 메뉴 만들기(row scroll menu) html, css, jquery

가로스크롤 메뉴만들기!

가로 스크롤 마우스 휠 할때 jquery 사용해서 해야합니다.

만약에 모바일 가로스크롤 메뉴 아니면 jquery 사용 안하셔도됩니다.

<div 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>
  </ul>
</div>

/* 가로 스크롤 */
* {margin:0;padding:0;}
li {list-style: none;}
a {text-decoration: none;}
.nav {width:300px;}
.nav ul {border:1px solid blue;overflow:hidden;font-size:0;white-space:nowrap;overflow-x:scroll;}
.nav ul li {display:inline-block;margin:0 10px;width:100px;text-align:center;border:1px solid green;}
.nav ul li a {display:block;font-size:15px;}

// 가로스크롤
function row_scroll() {
  $(".nav ul").on('mousewheel', function (e) {
  
    var wheelDelta = e.originalEvent.wheelDelta;

    if (wheelDelta > 0) {
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    } else {
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    }
    
  });
}
row_scroll();