常時少しずつスクロールするメニュー
画像と文字の項目が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を使ってサブメニューがある横並びのメニューをつくる