常連

ハンバーガーメニューを作ってみたのですが、正しく表示されません。
z-indexなどを使ってみたのですが、それでも表示されず、困っています。
間違っている部分をご指摘いただけると幸いです。

```html
<button type="button" class="btn js-btn">
      <span class="btn-line"></span>
  </button>
    <nav>
      <ul class="menu">
        <li class="menu-list"><a href=#link>トップ</a></li>
        <li class="menu-list"><a href=./html/menu.html>メニュー </a> </li>
        <li class="menu-list"><a href=./html/reward.html>アンケート </a> </li>
        <li class="menu-list"><a href=./html/reservation.html>ご予約 </a> </li>
        <li class="menu-list"><a href=./html/recommend.html>こだわり</a></li>
        <li class="menu-list"><a href=./html/popular.html>ランキング</a></li>
      </ul>
    </nav>
```

```css
    body {
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    }

    button {
    -webkit-appearance: none;
    -moz-appearance: none;
        appearance: none;
    vertical-align: middle;
    border: 0;
    background: transparent;
    border-radius: 0;
    text-align: inherit;
    }

    button:hover {
    cursor: pointer;
    }

    /**************** 以下、ハンバーガーボタンのスタイリング ****************/
    .btn {
    /* ボタンの配置位置  */
    position: fixed;
    top: 16px;
    right: 16px;
    /* ボタンの大きさ  */
    width: 48px;
    height: 48px;
    /* バーガーの線をボタン範囲の中心に配置 */
    justify-content: center;
    align-items: center;
    /* 最前面に */
    z-index: 20;
    background-color: green;
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
    /* 線の長さと高さ */
    width: 100%;
    height: 4px;
    /* バーガー線の色 */
    background-color: #333;
    /* バーガー線の位置基準として設定 */
    position: relative;
    transition: .2s;
    z-index: 18;
    }

    /***** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
    content: "";
    /* 基準線と同じ大きさと色 */
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    transition: .2s;
    z-index: 8;
    }


    .btn-line::before {
    /* 上の線の位置 */
    transform: translateY(-16px);
    }


    .btn-line::after {
    /* 下の線の位置 */
    transform: translateY(16px);
    }

    /***** メニューオープン時 *****/
    .btn.open {
    transform: rotate(180deg);
    }
    .btn-line.open {
    /* 真ん中の線を透明に */
    background-color: transparent;
    }

    .btn-line.open::before,
    .btn-line.open::after {
    content: "";
    /* 上下の線の色を変える */
    background-color: #333;
    transition: .2s;
    }

    .btn-line.open::before {
    /* 上の線を傾ける */
    transform: rotate(135deg);
    }

    .btn-line.open::after {
    /* 上の線を傾ける */
    transform: rotate(-135deg);
    }

```

```javascript
$(function () {
    $('.js-btn').on('click', function () {        // js-btnクラスをクリックすると、
      $('.menu , .btn-line').toggleClass('open'); // メニューとバーガーの線にopenクラスをつけ外しする
    })
});
```
お手数おかけしますが、よろしくお願いいたします。

ハンバーガーメニューが表示されないのですが、間違っている部分をご指摘いただけないでしょうか？

# 前提・実現したいこと
ドロワーメニューが、ページの読み込み時に一瞬表示されてしまうのを防ぎたいです。

# 発生している問題
ページの外に隠しているドロワーメニューがページ読み込み時に一瞬表示されてしまいます。
display:none;とfadeInで実装はできるのですが、PC画面時にもドロワーが表示されてしまいます。
PC画面時にはドロワーを隠す方法が知りたいです。

# 試したこと
```css
.drawer {
 display: none;
}
```

```Javascript
$(function () {
　$('.drawer').fadeIn(0);
});
```

# 補足情報
.drawerの実装方法は、ハンバーガーメニューがクリックされたときにJavascriptでクラスを追加して、transformで見える位置にずらしています。

・display:none;とfadeInを使いでPC画面の際はドロワーメニューを消す方法
・もしできなければ他のやりかたで表示くずれを防ぐ方法

こちら2点の実装方法をご教授願います。

# 追加情報（該当のコード）
```HTML
<header class="header">

<button
  type="button"
  id="js-hamburger"
  class="header__hamburfer hamburger"
  aria-expanded="false"
>
  <span class="hamburger__line"> </span>
</button>

<div
  class="header__drawer-back drawer-background"
  id="js-drawer-background"
></div>

<div class="header__drawer drawer">
  <div class="drawer__logo-box">
    <a href="front-page.html" class="drawer__logo-link">
      <img
        src="/assets/images/common/logo.png"
        alt="ロゴの写真"
        class="drawer__logo"
      />
    </a>
  </div>
  <nav class="drawer__nav sp-menu" id="js-global-menu">
    <ul class="sp-menu__list">
      <li class="sp-menu__item">
        <a href="front-page.html" class="sp-menu__link">ホーム</a>
      </li>
      <li class="sp-menu__item">
        <a href="archive-news.html" class="sp-menu__link">お知らせ</a>
      </li>
      <li class="sp-menu__item">
        <a href="home.html" class="sp-menu__link">ブログ</a>
      </li>
      <li class="sp-menu__item">
        <a href="page-price.html" class="sp-menu__link">コース・料金</a>
      </li>
    </ul>
  </nav>
  <div class="drawer__button-area">
    <div class="drawer__button-box">
      <a href="#" class="drawer__button drawer__button--orange">資料請求</a>
    </div>
    <div class="drawer__button-box">
      <a href="#" class="drawer__button drawer__button--blue">お問い合わせ</a>
    </div>
  </div>
</div>
</header>
```
```SCSS
// ハンバーガー
.hamburger {
  position: fixed;
  top: 16px;
  right: 25px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid black;
  box-shadow: 0 0 rem(15) transparent;
  outline: none;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  display: none;
}
@media screen and (max-width: 1,000px) {
  .hamburger {
    display: block;
  }
}



// ハンバーガーの線
.hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  background: black;
  transition: inherit;
  -webkit-transition: inherit;
  &::before,
  &::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: inherit;
    content: "";
    transition: inherit;
    -webkit-transition: inherit;
  }
  &::before {
    top: -5px;
  }
  &::after {
    top: 5px;
  }
}



// ドロワー時背景マスク
.drawer-background {
  position: fixed;
  z-index: $layer-floating;
  width: 100vw;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
  background: black;
  color: white;
  visibility: hidden;
  opacity: 0;
  display: none;
}
@media screen and (max-width: 1,000px) {
  .drawer-background {
    display: block;
  }
}



// spメニュー
.drawer {
  position: fixed;
  z-index: $layer-drawer;
  width: 280px;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
  background-color: white;
  transform: translateX(280px);
  transition: 0.3s;
  display: none;
}
@media screen and (max-width: 1,000px) {
  .drawer {
    display: block;
  }
}



// aria-expandedがtrueになったら
.hamburger[aria-expanded="true"] .hamburger__line {
  background-color: transparent;
  &::before,
  &::after {
    top: 0;
    background-color: black;
  }
}
.hamburger[aria-expanded="true"] .hamburger__line::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}



// jsでクラス追加
.is-drawerActive {
  // 背景固定
  height: 100%;
  overflow: hidden;

  .drawer {
    transform: translateX(0px);
    transition: 0.3s;
  }
  .drawer-background {
    visibility: visible;
    opacity: 0.8;
    transition: 0.3s;
  }
}
```
```JavaScript
$(function () {
  $('#js-hamburger').click(function () {
    $('body').toggleClass('is-drawerActive');

    if ($(this).attr('aria-expanded') == 'false') {
      $(this).attr('aria-expanded', 'true');
      $('#js-global-menu').attr('area-hidden', 'false');
    } else {
      $(this).attr('aria-expanded', 'false');
      $('#js-global-menu').attr('area-hidden', 'true');
    }
  });

  $('#js-drawer-background').click(function () {
    $('body').removeClass('is-drawerActive');
    $('#js-hamburger').attr('aria-expanded', 'false');
    $('#js-global-menu').attr('area-hidden', 'true');
  });
});
```

ページの読み込み時に一瞬表示されてしまう（ドロワーメニュー）

### 前提・実現したいこと

ハンバーガーメニュー内で縦スクロールできるようにしたいです。

### 発生している問題

```
縦スクロールできず、機種によっては下方の文字が切れてしまいます。
```

### 該当のソースコード

```HTML
	<div class="hdr_inner">
		<div class="hamburger" id="click">
		  <span></span>
		  <span></span>
		  <span></span>
		</div>
	    <nav class="globalMenuSp" id="nav">
	    	<a href="index.html" class="logo"><img src="assets/images/logo_key.png" alt="pluster"></a>
	     	<ul class="open">
	     	　　 <li><a href="index.html">01</a></li>
	            <li><a href="#">02</a></li>
	            <li><a href="#">03</a></li>
	            <li><a href="#">04</a></li>
	            <li></li>
	        </ul>
	     	<p><span>ACCESS</span>zyuusyohairu</p>
	     </nav>
	</div>
```
```CSS
html{
  overflow-x: hidden;
}
body{
  height: auto;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
  background-size: 100%;
  display: block;
  color: #000000;
}
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    top: 2.7%;
    right: 3%;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 24px;
    height  : 2px ;
    left    : 6px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 6px;
  }
  .hamburger span:nth-child(2) {
    top: 12px;
  }
  .hamburger span:nth-child(3) {
    top: 18px;
  }

  /* ナビ開いてる時のボタン */
  nav.globalMenuSp.active {
    background: #464144;
    height: 100%;
  }
  .hamburger.active span {
    background : #fff;
  }
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  nav.globalMenuSp {
    position: fixed;
    padding-bottom: 100px;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
  nav.globalMenuSp a.logo{
    padding:30px 0;
    display: inline-block;
    margin: 0 auto 60px;
  }
  nav.globalMenuSp ul {
    margin: 0 auto 50px;
    width: 100%;
  }
  nav.globalMenuSp ul li {
    list-style-type: none;
    width: 100%;
    color: #fff;
    text-align: left;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  nav.globalMenuSp ul li:hover{
    background: rgba(255, 255, 255, 0.6);
  }
  nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 30px 10%;
    text-decoration :none;
    font-size: 2.4rem;
    letter-spacing: 2px;
    span{
      vertical-align: top;
      font-size: 1.2rem;
      margin-right: 10px;
      color: #fff;
      }
  }
  nav.globalMenuSp p{
    font-size: 1.2rem;
    line-height: 2;
    padding: 0 10%;
    text-align: left;
    color: #fff;
    span{
      color: #fff;
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
      line-height: 1;
    }
  }
  nav.globalMenuSp.active {
    transform: translateY(0%);
  }
```
```JS
function disableScroll(event) {
event.preventDefault();
}

$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');

if ($(this).hasClass('active')) {
$('.globalMenuSp').addClass('active');
document.addEventListener('mousewheel', disableScroll, { passive: false });
document.addEventListener('touchmove', disableScroll, { passive: false });
document.body.style.overflow = "hidden";
} else {
$('.globalMenuSp').removeClass('active');
document.removeEventListener('mousewheel', disableScroll, { passive: false });
document.removeEventListener('touchmove', disableScroll, { passive: false });
document.body.style.overflow = "visible";
}
});
});

$('.open a[href]').on('click', function(event) {
    $('.hamburger').trigger('click');
});
```

### 試したこと
「.nav.globalMenuSp」に以下CSSを追記しましたが、変わりませんでした。。
    position: fixed;
　　 overflow-y: scroll;  
    width:100%;
    height:100%;

ハンバーガーメニュー内でスクロールできない

Twitterなどにある下から出てきて下にスワイプすると消せるタイプのメニューがありますが、これは何という名称なのでしょうか。
またこのメニューをCSSで再現することは可能なのでしょうか。
調べようにも名称がわからないので調べようがありませんでした...
詳しい方教えていただけると幸いです。
![![イメージ説明](2d4ec81e46a29458d9e429381192f2ac.png)

下から出てくるメニューの名称と作り方について

Jquery初心者です。
多階層のアコーディオンメニューを作っているのですが、
1階層目をクリックして2階層目を開いた後に、
2階層目のメニューをクリックして、3階層目を開こうとすると、すべて閉じてしまいます。
どうもうまくいかず、ご助言いただいれば幸いです。

### 該当のソースコード

```HTML
<ul id="menu">
	<li><span>メニュー1</span>
		<ul class="sec">
			<li><span>メニュー1-1</span></li>
			  <ul class="sec">
			    <li><a href="#">メニュー1-1-1</a></li>
			    <li><a href="#">メニュー1-1-2</a></li>
			    <li><a href="#">メニュー1-1-3</a></li>
			  </ul>
			<li><a href="#">メニュー1-2</a></li>
			<li><a href="#">メニュー1-3</a></li>
		</ul>
	</li>
</ul>
```
```CSS
ul{
	margin-bottom:35px;
	}
li{
	border-bottom:solid 1px #F2F2F2;
	}
li a,
li span{
	display:block;
	pointer-events: auto !important;
	font-size: 14px;
	text-decoration:none;
	padding:15px 0;
	}
li span{
	font-size: 14px;
	cursor:pointer;
	}
li span:hover{
	opacity:0.8;
	}
li a:before,
li span:before{
	display:inline-block;
	content:'';
	width:14px;
	height:14px;
	border-radius:7px;
	margin-right:9px;
	vertical-align:middle;
	background: url(common/images/icon_menu_ar1.png) center center no-repeat;
	}
ul.sec{
	display:none;
	margin:0 0 10px 25px;
	}
.sec li{
	border-bottom:0;
	}
.sec li a{
	padding:15px 0;
	}
.sec li a:before{
	display:inline-block;
	content:'';
	width:14px;
	height:14px;
	border-radius:7px;
	margin-right:9px;
	vertical-align:middle;
	background: url(common/images/icon_menu_ar2.png) center center no-repeat;
	}
```
```Javascript
$(function($) {
	$('#menu span').on('click', function() {
		$(this).next('ul:not(:animated)').slideToggle();
		$(this).children('span').toggleClass('open');
		// 他のサブメニューを閉じる
		$('.sec').not($(this).next('.sec')).slideUp();
		$(this).children('span').not($(this).children('span')).removeClass('open');
	});
});
```

### 試したこと

「// 他のサブメニューを閉じる」以下２行を削除するなどしてみましたが、
現象は変わりませんでした。
他のメニューをクリックすると、自動で開いているメニューを閉じるという今の状態は維持したいと思っています。
どうぞよろしくお願いいたします。

多階層のアコーディオンメニューの開閉について

### 前提・実現したいこと


アンドロイドスタジオで、画面上部のfileやview,editなどと書かれたメインメニューを再表示したいです。
View -> Appearence -> Mainmenu の順で押したらメインメニューが消えてしまい、戻し方が分からなくなってしまいました。
教えてくださいませ。

### 発生している問題・エラーメッセージ

```

```

### 該当のソースコード

```ここに言語名を入力

```

### 試したこと



### 補足情報（FW/ツールのバージョンなど）

アンドロイドスタジオの画面上部メインメニューが消えてしまった

タイトル通り、WPFでハンバーガーメニューを作成したいです。
ただいま、WPFを学習中でアニメーションをつけて、ハンバーガーメニューのような動きをする方法があると考え、その方法をご教授願います。
現時点では、gridの幅をアニメーションで変更するしかできず、gridが拡大したときにほかのコントロールのかぶってしまいます。
また、gridを出す、隠すをボタン二つで制御しているので、1つにまとめることができないか知りたいです。
```xmal
<Window x:Class="HamburgerMuneWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HamburgerMuneWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Storyboard x:Key="Appearance">
            <DoubleAnimation 
                Storyboard.TargetName="config"
                Storyboard.TargetProperty="Width"
                To="300"
                Duration="00:00:00.1"/>
        </Storyboard>
        <Storyboard x:Key="Disappear">
            <DoubleAnimation
                Storyboard.TargetName="config"
                Storyboard.TargetProperty="Width"
                To="20"
                Duration="00:00:00.1"/>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Button x:Name="Btn001" Content="設定" Height="40" Margin="0,90,476,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="67">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Appearance}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Button x:Name="Btn001_Copy" Content="設定" Height="40" Margin="0,177,542,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="67">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Disappear}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Grid x:Name="config" HorizontalAlignment="Right" Width="17" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,53,0,0" VerticalAlignment="Top" Width="81"/>
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,53,0,0" VerticalAlignment="Top" Width="81"/>
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,140,0,0" VerticalAlignment="Top" Width="81"/>
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,140,0,0" VerticalAlignment="Top" Width="81"/>
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,217,0,0" VerticalAlignment="Top" Width="81"/>
            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,217,0,0" VerticalAlignment="Top" Width="81"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,22,0,0" VerticalAlignment="Top" Width="83"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="159,17,0,0" VerticalAlignment="Top" Width="83"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,109,0,0" VerticalAlignment="Top" Width="83"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="161,107,0,0" VerticalAlignment="Top" Width="83"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,186,0,0" VerticalAlignment="Top" Width="83"/>
            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="161,179,0,0" VerticalAlignment="Top" Width="83"/>
        </Grid>
    </Grid>
</Window>
```
また、ほか方法がありましたら、お願いいたします。
よろしくお願いいたします。

WPFでハンバーガーメニューを作成したい

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

ヘッダーとフッター、そしてサイドメニューについて、最終的にはどのページでも表示されるようにするためそれぞれ別のHTMLファイルにソースコードを書き、必要があればそれを取り出せるようにできる機能をJavascriptを用いて実装させようとしています。

**
現在は、その第一弾としてフッターを別ファイルからJavascriptを用いて表示させようとしているのですが、残念ながら表示させることができません。**

下記のサイトを参考に、いろいろいじってみています。

https://qiita.com/hiroyukiwk/items/f2a74ba1406de9fad6f6

サーバーのフォルダ階層を下記のようにし、ソースコードを記述してみました。

![イメージ説明](66fc4a0a8b73b7d0128224df14d764d9.jpeg)

```footer
<footer>
  <p>© All rights reserved by ああああああ</p>
</footer>

```
```main
function footer(rootDir){
$.ajax({
url: rootDir + "include/footer.html",
cache: false,
async: false,
dataType: 'html',
success: function(html){
  html = html.replace(/\{$root\}/g, rootDir);
  document.write(html);
}
});
}

```

ちなみになのですが、main.jsのソースコードの意味があまりよくわかっていません、、、、

```ここに言語を入力
function footer(rootDir){
$.ajax({
url: rootDir + "include/footer.html",
cache: false,
async: false,
dataType: 'html',
success: function(html){
  html = html.replace(/\{$root\}/g, rootDir);
  document.write(html);
}
});
}
```
は具体的に、何をしようとしているものなのか、もしよろしければご教授いただけると嬉しいです、、、

```index
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <meta name="robots" content="noindex,nofollow">
   <title>ああああああ</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <link rel="stylesheet" href="partsSet.css">
   <link rel="stylesheet" href="stylesheet.css">

   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
   <script>
   $(function() {
      const hum = $('#hamburger, .close')
      const nav = $('.sp-nav')
      hum.on('click', function(){
         nav.toggleClass('toggle');
      });
   });
   </script>
</head>
<body>
   <header>
      <h1>
         <a href="/">ああああああ</a>
      </h1>
      <nav class="pc-nav">
         <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">カテゴリー</a>

              <ul>
                <li><a href="">Child1</a></li>
                <li><a href="">Child2</a></li>
                <li><a href="">Child3</a></li>
                <li><a href="">Child4</a></li>
                <li><a href="">Child5</a></li>
              </ul>
            </li>

            <li><a href="#">掲示板</a></li>
            <li><a href="#">自己紹介</a></li>
            <li><a href="#">連絡先</a></li>
         </ul>
      </nav>
      <nav class="sp-nav">
         <ul>
           <li><a href="#">ホーム</a></li>
           <li><a href="#">カテゴリー</a></li>
           <li><a href="#">掲示板</a></li>
           <li><a href="#">自己紹介</a></li>
           <li><a href="#">連絡先</a></li>
            <li class="close"><span>閉じる</span></li>
         </ul>
      </nav>
      <div id="hamburger">
         <span></span>
      </div>

   </header>
   <div class="main-visual">
     <div id="wrapper">
       <div class="left-column">
         コンテンツ
       </div>

       <div class="right-column">

         <h3>人気記事</h3>

       </div>

    </div>
   </div>

   

  <script type="text/javascript">footer();</script>

<script src="scripts/main.js"></script>

</body>
</html>

```

index.htmlの

```ここに言語を入力
  <script type="text/javascript">footer();</script>

<script src="scripts/main.js"></script>
```

の部分にて、フッターの内容を呼び出そうとしているのですが、残念ながら実行してみてもフッターは表示されません。

ファイルの指定方法が適切ではないのか、それともソースコードの記述が不適切なのか、、、

Javascriptを用いて、フッターを表示させる方法をご教授いただければ幸いです。

どうぞよろしくお願いいたします。