トップへ(mam-mam.net/)

コピペで使える「自動スクロールする水平(横並び)メニュー」

検索：

常時少しずつスクロールするメニュー

画像と文字の項目が20個のサンプル

<nav class="scroll_horizontal_menu">
  <ul>
    <li><a href=""><img src="/img/svg/c_airplane.svg" style="height:1em;">メニュー１</a></li>
    <li><a href=""><img src="/img/svg/c_apple.svg" style="height:1em;">メニュー２</a></li>
    <li><a href=""><img src="/img/svg/c_arrowb.svg" style="height:1em;">メニュー３</a></li>
    <li><a href=""><img src="/img/svg/c_arrowl.svg" style="height:1em;">メニュー４</a></li>
    <li><a href=""><img src="/img/svg/c_arrowr.svg" style="height:1em;">メニュー５</a></li>
    <li><a href=""><img src="/img/svg/c_arrowt.svg" style="height:1em;">メニュー６</a></li>
    <li><a href=""><img src="/img/svg/c_bai.svg" style="height:1em;">メニュー７</a></li>
    <li><a href=""><img src="/img/svg/c_battery.svg" style="height:1em;">メニュー８</a></li>
    <li><a href=""><img src="/img/svg/c_book.svg" style="height:1em;">メニュー９</a></li>
    <li><a href=""><img src="/img/svg/c_bottom.svg" style="height:1em;">メニュー１０</a></li>
    <li><a href=""><img src="/img/svg/c_bowl.svg" style="height:1em;">メニュー１１</a></li>
    <li><a href=""><img src="/img/svg/c_bowl2.svg" style="height:1em;">メニュー１２</a></li>
    <li><a href=""><img src="/img/svg/c_bullets.svg" style="height:1em;">メニュー１３</a></li>
    <li><a href=""><img src="/img/svg/c_burger.svg" style="height:1em;">メニュー１４</a></li>
    <li><a href=""><img src="/img/svg/c_camera.svg" style="height:1em;">メニュー１５</a></li>
    <li><a href=""><img src="/img/svg/c_car.svg" style="height:1em;">メニュー１６</a></li>
    <li><a href=""><img src="/img/svg/c_car2.svg" style="height:1em;">メニュー１７</a></li>
    <li><a href=""><img src="/img/svg/c_car3.svg" style="height:1em;">メニュー１８</a></li>
    <li><a href=""><img src="/img/svg/c_cart.svg" style="height:1em;">メニュー１９</a></li>
    <li><a href=""><img src="/img/svg/c_cellphone.svg" style="height:1em;">メニュー２０</a></li>
  </ul>
</nav>

画像と文字の項目が3個のサンプル

<nav class="scroll_horizontal_menu">
  <ul>
    <li><a href=""><img src="/img/svg/c_check.svg" style="height:1em;">メニュー２１</a></li>
    <li><a href=""><img src="/img/svg/c_clock.svg" style="height:1em;">メニュー２２</a></li>
    <li><a href=""><img src="/img/svg/c_clock2.svg" style="height:1em;">メニュー２１</a></li>
  </ul>
</nav>

画像の項目が3個のサンプル

<nav class="scroll_horizontal_menu">
  <ul>
    <li><a href=""><img src="/img/sample/car1.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/car2.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/car3.jpg" style="height:120px;"></a></li>
  </ul>
</nav>


項目ごとに一気にスクロールするメニュー

画像と文字の項目が20個のサンプル

<nav class="scroll_horizontal_menu2">
  <ul>
    <li><a href=""><img src="/img/svg/c_airplane.svg" style="height:1em;">メニュー１</a></li>
    <li><a href=""><img src="/img/svg/c_apple.svg" style="height:1em;">メニュー２</a></li>
    <li><a href=""><img src="/img/svg/c_arrowb.svg" style="height:1em;">メニュー３</a></li>
    <li><a href=""><img src="/img/svg/c_arrowl.svg" style="height:1em;">メニュー４</a></li>
    <li><a href=""><img src="/img/svg/c_arrowr.svg" style="height:1em;">メニュー５</a></li>
    <li><a href=""><img src="/img/svg/c_arrowt.svg" style="height:1em;">メニュー６</a></li>
    <li><a href=""><img src="/img/svg/c_bai.svg" style="height:1em;">メニュー７</a></li>
    <li><a href=""><img src="/img/svg/c_battery.svg" style="height:1em;">メニュー８</a></li>
    <li><a href=""><img src="/img/svg/c_book.svg" style="height:1em;">メニュー９</a></li>
    <li><a href=""><img src="/img/svg/c_bottom.svg" style="height:1em;">メニュー１０</a></li>
    <li><a href=""><img src="/img/svg/c_bowl.svg" style="height:1em;">メニュー１１</a></li>
    <li><a href=""><img src="/img/svg/c_bowl2.svg" style="height:1em;">メニュー１２</a></li>
    <li><a href=""><img src="/img/svg/c_bullets.svg" style="height:1em;">メニュー１３</a></li>
    <li><a href=""><img src="/img/svg/c_burger.svg" style="height:1em;">メニュー１４</a></li>
    <li><a href=""><img src="/img/svg/c_camera.svg" style="height:1em;">メニュー１５</a></li>
    <li><a href=""><img src="/img/svg/c_car.svg" style="height:1em;">メニュー１６</a></li>
    <li><a href=""><img src="/img/svg/c_car2.svg" style="height:1em;">メニュー１７</a></li>
    <li><a href=""><img src="/img/svg/c_car3.svg" style="height:1em;">メニュー１８</a></li>
    <li><a href=""><img src="/img/svg/c_cart.svg" style="height:1em;">メニュー１９</a></li>
    <li><a href=""><img src="/img/svg/c_cellphone.svg" style="height:1em;">メニュー２０</a></li>
  </ul>
</nav>

画像と文字の項目が3個のサンプル

<nav class="scroll_horizontal_menu2">
  <ul>
    <li><a href=""><img src="/img/svg/c_check.svg" style="height:1em;">メニュー２１</a></li>
    <li><a href=""><img src="/img/svg/c_clock.svg" style="height:1em;">メニュー２２</a></li>
    <li><a href=""><img src="/img/svg/c_clock2.svg" style="height:1em;">メニュー２１</a></li>
  </ul>
</nav>

画像の項目が7個のサンプル

<nav class="scroll_horizontal_menu2">
  <ul>
    <li><a href=""><img src="/img/sample/c001.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c002.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c003.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c004.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c005.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c006.jpg" style="height:120px;"></a></li>
    <li><a href=""><img src="/img/sample/c007.jpg" style="height:120px;"></a></li>
  </ul>
</nav>

ソースコード

<script>
function TMamScrollHorizontalMenu(){
  this.scrollSpeed=2;//1回でスクロールするpx数
  this.fontSize=20;//フォントサイズ(px)
  this.nav=[];
  this.ul=[];
  this.x=[];
  this.w=[];
  this.flag=[];
  //スタイルシートの登録
  let style=document.createElement("style");
  document.head.appendChild(style);
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu{'+
    'width:100%;max-width:100%;min-width:100%;font-size:'+this.fontSize+'px;'+
      'overflow-x:scroll;border:1px solid #b76;padding:0;margin:0 6px 6px 0;'+
      'border-radius:10px;box-shadow:4px 4px 4px rgba(0,0,0,0.4);'+
      '-ms-overflow-style: none;'+
      'scrollbar-width: none;'+
      'line-height:1em;'+
    '}'
    ,0
  );
  let agent=navigator.userAgent;
  if(agent.indexOf('MSIE')==-1 && agent.indexOf('Trident')==-1 ){
    style.sheet.insertRule(
      'nav.scroll_horizontal_menu::-webkit-scrollbar{display: none;}'  ,0
    );
  }
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu ul{'+
    'display:flex;list-style:none;justify-content:flex-start;margin:0;padding:0;'+
      'border:none;border-radius:0px;'+
      'background:#d87;width:auto;'+
      'flex-wrap:nowrap;white-space: nowrap;'+
      'position:relative;min-width:3000px;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu ul li:hover{background:#955;}'
    ,0
  );
  //IEはCSSのanimationで一括指定が一部出来ないためバラバラに登録する
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu ul li{'+
      'border-radius:10px 10px 10px 10px;'+
      'margin:auto 0;'+
      'vertical-align:middle;'+
      'animation-name:MamScrollHorizontalMenuAni;'+
      'animation-duration:0.8s;'+
      'animation-timing-function:ease;'+
      'animation-delay:0.0s;'+
      'animation-iteration-count:1;'+
      'animation-direction:normal;'+
      'animation-fill-mode:forwards;'+
      'animation-play-state:running;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    '@keyframes MamScrollHorizontalMenuAni{'+
    '  0%{opacity:0.0;}  100%{opacity:1.0;}'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu ul li a{'+
      'margin:0;display:block;padding:12px 12px;'+
      'text-decoration:none;color:#fff;text-shadow: 1px 2px 3px #333;'+
      'border-radius:10px 10px 10px 10px;font-weight:bold;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu ul li a:active{box-shadow:4px 4px 6px 2px rgba(0,0,0,0.4) inset;}'
    ,0
  );

  this.init=function(){
    this.nav=document.querySelectorAll("nav.scroll_horizontal_menu");
    this.ul=document.querySelectorAll("nav.scroll_horizontal_menu ul");
    for(let i=0;i<this.ul.length;i++){
      this.flag[i]=false;
      this.x[i]=0;
      this.w[i]=0;
      let w=0;
      for(let j=0;j<this.ul[i].children.length;j++){
        w+=parseInt(window.getComputedStyle(this.ul[i].children[j]).width);
      }
      this.w[i]=parseInt(window.getComputedStyle(this.ul[i].children[0]).width)
      this.ul[i].style.width=w+'px';
    }
    setTimeout(this.scroll.bind(this),1000);
  }
  this.scroll=function(){
    for(let i=0;i<this.ul.length;i++){
      let li=this.ul[i].children[0];
      this.x[i]+=this.scrollSpeed;
      if(this.x[i]>this.w[i]){
        this.ul[i].appendChild(li);
        this.x[i]=0;
        this.w[i]=parseInt(window.getComputedStyle(this.ul[i].children[0]).width);
        this.ul[i].style.left=this.x[i];
      }else{
        this.ul[i].style.left=-this.x[i]+'px';
      }
    }
    setTimeout(this.scroll.bind(this),33);
  }
  window.addEventListener("DOMContentLoaded",function(){
    this.init();
  }.bind(this));
}

function TMamScrollHorizontalMenu2(){
  this.scrollSpeed=8;//1回でスクロールするpx数
  this.fontSize=20;//フォントサイズ(px)
  this.nav=[];
  this.ul=[];
  this.x=[];
  this.w=[];
  this.flag=[];
  //スタイルシートの登録
  let style=document.createElement("style");
  document.head.appendChild(style);
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2{'+
    'width:100%;max-width:100%;min-width:100%;font-size:'+this.fontSize+'px;'+
      'overflow-x:scroll;border:1px solid #34b;padding:0;margin:0 6px 6px 0;'+
      'border-radius:10px;box-shadow:4px 4px 4px rgba(0,0,0,0.4);'+
      '-ms-overflow-style: none;'+
      'scrollbar-width: none;'+
      'line-height:1em;'+
    '}'
    ,0
  );
  let agent=navigator.userAgent;
  if(agent.indexOf('MSIE')==-1 && agent.indexOf('Trident')==-1 ){
    style.sheet.insertRule(
      'nav.scroll_horizontal_menu2::-webkit-scrollbar{display: none;}'  ,0
    );
  }
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2 ul{'+
    'display:flex;list-style:none;justify-content:flex-start;margin:0;padding:0;'+
      'border:none;border-radius:0px;'+
      'background:#34d;width:auto;'+
      'flex-wrap:nowrap;white-space: nowrap;'+
      'position:relative;min-width:3000px;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2 ul li:hover{background:#12a;}'
    ,0
  );
  //IEはCSSのanimationで一括指定が一部出来ないためバラバラに登録する
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2 ul li{'+
      'border-radius:10px 10px 10px 10px;'+
      'margin:auto 0;'+
      'animation-name:MamScrollHorizontalMenu2Ani;'+
      'animation-duration:0.8s;'+
      'animation-timing-function:ease;'+
      'animation-delay:0.0s;'+
      'animation-iteration-count:1;'+
      'animation-direction:normal;'+
      'animation-fill-mode:forwards;'+
      'animation-play-state:running;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    '@keyframes MamScrollHorizontalMenu2Ani{'+
    '  0%{opacity:0.0;}  100%{opacity:1.0;}'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2 ul li a{'+
      'margin:0;display:block;padding:12px 12px;'+
      'text-decoration:none;color:#fff;text-shadow: 1px 2px 3px #333;'+
      'border-radius:10px 10px 10px 10px;font-weight:bold;'+
    '}'
    ,0
  );
  style.sheet.insertRule(
    'nav.scroll_horizontal_menu2 ul li a:active{box-shadow:4px 4px 6px 2px rgba(0,0,0,0.4) inset;}'
    ,0
  );

  this.init=function(){
    this.nav=document.querySelectorAll("nav.scroll_horizontal_menu2");
    this.ul=document.querySelectorAll("nav.scroll_horizontal_menu2 ul");
    for(let i=0;i<this.ul.length;i++){
      this.flag[i]=false;
      this.x[i]=0;
      this.w[i]=0;
      let w=0;
      for(let j=0;j<this.ul[i].children.length;j++){
        w+=parseInt(window.getComputedStyle(this.ul[i].children[j]).width);
      }
      this.w[i]=parseInt(window.getComputedStyle(this.ul[i].children[0]).width)
      this.ul[i].style.width=w+'px';
      setTimeout(this.scroll.bind(this),3000,i);
    }
  }
  this.scroll=function(i){
    let li=this.ul[i].children[0];
    this.x[i]+=this.scrollSpeed;
    if(this.x[i]>this.w[i]){
      this.ul[i].appendChild(li);
      this.x[i]=0;
      this.w[i]=parseInt(window.getComputedStyle(this.ul[i].children[0]).width);
      this.ul[i].style.left=this.x[i];
      setTimeout(this.scroll.bind(this),2000,i);
    }else{
      this.ul[i].style.left=-this.x[i]+'px';
      setTimeout(this.scroll.bind(this),33,i);
    }
  }
  window.addEventListener("DOMContentLoaded",function(){
    this.init();
  }.bind(this));
}
MamScrollHorizontalMenu =new TMamScrollHorizontalMenu();
MamScrollHorizontalMenu2=new TMamScrollHorizontalMenu2();
</script>

垂直(縦並び)メニューのサンプル一覧

nav,ul,liタグとCSSを使って縦並びのメニューをつくる
CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る
nav,ul,liタグとCSSを使ってカラフルなボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使ってカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンのカラフルな縦並びのメニューをつくる

水平(横並び)メニューのサンプル一覧

nav,ul,liタグとCSSを使って横並びのメニューをつくる
nav,ul,liタグとCSSとJavascriptで水平(横並び)自動スクロールするメニューをつくる
CSSでSVGアイコンを下部に固定した横並びのメニューがあるページ作る
nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる