65958


初心者です  
サンプルコードを実行したところ、HTMLとCSSは機能していますが、スニペットから外部ファイルのjsファイルが機能していません。Google
chromeのF12で確認しましたが、エラーは出ていません。何が問題なのかわかりません。  
どなたかご教示頂ければ幸いです。

サンプルコードの引用先は下記の  
<https://digipress.info/tech/3d-rotating-hidden-menu-sample/> で一番下のサンプルです。

[code]

    　<script type="text/javascript" src="menu.js"></script>
    
[/code]

[code]

    var mqWidth = 680,
        scrollTrigger = 40,
        isMobile = null,
        burgerCheckbox = $('#humberger_check'), 
        hiddenMenu = $('.hidden_menu li'),
        slideBar = $('.menu_underline'),
        headerBar = $('.header_bar');
    
    function sliderBarAnimation(){
      if ( $(window).width() > mqWidth ){
        if (isMobile === false) return;
        isMobile = false;
        hiddenMenu.off('mouseenter mouseleave').hover(
          // nmouseenter
          function(){
            var current = $(this),
                barColor = current.data('bar-color');
            slideBar.addClass('visible').css({
              'top':'auto',
              'left' : current.position().left,
              'background-color':barColor
            })
          },
          //mouseleave
          function(){
            slideBar.removeClass('visible');
          }
        );
      } else {
        if (isMobile === true) return;
        isMobile = true;
        hiddenMenu.off('mouseenter mouseleave').hover(
          // nmouseenter
          function(){
            var current = $(this),
                barColor = current.data('bar-color');
            slideBar.addClass('visible').css({
              'left':0,
              'top':current.offset().top + 60,
              'background-color':barColor
            });
          },
          //mouseleave
          function(){
            slideBar.css({'top':0}).removeClass('visible');
          }
        );
      }
    }
    $(window).on({
      'resize' : function(){
          sliderBarAnimation();
        },
      'scroll' : function(){
        if ($(window).scrollTop() > scrollTrigger){
          headerBar.addClass('show-bg');
        } else {
          headerBar.removeClass('show-bg');
        }
      }
    });
    (function(){
      sliderBarAnimation();
      
      hiddenMenu.on('click', function(){
        var current = $(this);
        current.addClass('selected');
        setTimeout(function(){
          current.removeClass('selected');
          burgerCheckbox.prop('checked',false);
        }, 400);
      });
      hiddenMenu.children('a:not([target]):not([href^="tel:"])').on('click', function(e){
        var url = $(this).attr("href");
        if (!url) return;
        e.preventDefault();
        setTimeout(function(){
          window.location = url;
        },400);
      });
    })(jQuery);
[/code]

[code]

    @charset "utf-8";
     * {
      box-sizing: border-box;
    }
    *:before, *:after {
      padding: 0;
      margin: 0;
    }
    
    body {
      font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
      background-color: #333;
      color: #efefef;
      text-align: center;
      margin: 0;
      padding: 0;
    }
    body a, body a:visited {
      color: #efefef;
      text-decoration: none;
    }
    body a:hover {
      color: #ccc;
    }
    
    .container {
      position: relative;
    }
    
    .content {
      margin: 0 auto;
      padding: 5% 40px;
    }
    
    .hidden_menu, .hidden_menu ul {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .hidden_menu ul li, .menu_underline, .header_bar::before {
      transition: all 0.3s ease;
    }
    
    .humberger, .hidden_menu, .hidden_menu ul, .header_bar, .container {
      transition: all 0.5s ease;
    }
    
    .hidden_menu ul li::before, .header_bar::before, .container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    #humberger_check {
      width: 0;
      height: 0;
      opacity: 0;
      visibility: hidden;
    }
    #humberger_check:checked + .humberger {
      transform: translateY(160px);
    }
    #humberger_check:checked + .humberger span {
      background-color: transparent;
    }
    #humberger_check:checked + .humberger span::before {
      top: 2px;
      transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
      -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
      transform: translate3d(0, 10px, 0) rotate(45deg);
    }
    #humberger_check:checked + .humberger span::after {
      top: 6px;
      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
      -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg);
      transform: translate3d(0, 6px, 0) rotate(-45deg);
    }
    #humberger_check:checked ~ .header_bar,
    #humberger_check:checked ~ .container {
      transform: translateY(160px);
    }
    #humberger_check:checked ~ .hidden_menu {
      transform: translateY(0);
    }
    #humberger_check:checked ~ .hidden_menu ul {
      opacity: 1;
      transform: rotateX(0);
    }
    
    .humberger {
      position: fixed;
      top: 20px;
      right: 5vw;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 3;
    }
    .humberger span {
      position: absolute;
      top: 6px;
      left: 50%;
      width: 30px;
      height: 4px;
      margin: 0 auto auto -15px;
      background-color: #fff;
      transition: background-color .1s linear .13s;
    }
    .humberger span::before, .humberger span::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #fff;
    }
    .humberger span::before {
      top: 12px;
      transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    .humberger span::after {
      top: 24px;
      transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .hidden_menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 160px;
      -webkit-perspective: 1600px;
      perspective: 1600px;
      background-color: #222;
      z-index: 3;
      transform: translateY(-100%);
    }
    .hidden_menu ul {
      list-style: none;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.08);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      transform: rotateX(90deg);
    }
    .hidden_menu ul li {
      position: relative;
      display: table;
      width: 20%;
      height: 100%;
      float: left;
      font-size: 13px;
    }
    .hidden_menu ul li::before {
      opacity: 0;
      transform: scale(0);
    }
    .hidden_menu ul li:nth-child(1)::before {
      background-color: #FA3687;
    }
    .hidden_menu ul li:nth-child(2)::before {
      background-color: #21D7A8;
    }
    .hidden_menu ul li:nth-child(3)::before {
      background-color: #1E9ED4;
    }
    .hidden_menu ul li:nth-child(4)::before {
      background-color: #B0D44A;
    }
    .hidden_menu ul li:nth-child(5)::before {
      background-color: #A865D5;
    }
    .hidden_menu ul li.selected::before {
      animation: scaling .4s linear;
    }
    .hidden_menu ul li:hover {
      background-color: rgba(0, 0, 0, 0.14);
    }
    .hidden_menu ul li a {
      position: relative;
      display: table-cell;
      vertical-align: middle;
    }
    .hidden_menu ul li i {
      display: block;
      margin-bottom: 15px;
      font-size: 25px;
    }
    
    .menu_underline {
      position: absolute;
      bottom: 0;
      height: 0;
      width: 20%;
      background-color: #fff;
    }
    .menu_underline.visible {
      height: 3px;
    }
    
    .header_bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      padding: 0 5vw;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      z-index: 2;
    }
    .header_bar::before {
      background-color: rgba(0, 0, 0, 0.84);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
      opacity: 0;
    }
    .header_bar.show-bg::before {
      opacity: 1;
    }
    .header_bar h1 {
      position: relative;
      margin: 26px 0 0;
      font-size: 20px;
      display: inline-block;
    }
    
    .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      background-image: url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00);
    }
    .container::before {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.6);
    }
    
    .content {
      position: relative;
      margin: 100px auto 4vw;
      padding: 0 5vw;
      height: 100vh;
    }
    .content h2 {
      position: relative;
      top: 30vh;
      font-size: 38px;
    }
    
    @keyframes scaling {
      50% {
        opacity: .28;
        transform: scale(0.5);
      }
      100% {
        opacity: 0;
        transform: scale(1.05);
      }
    }
    @media (max-width: 680px) {
      #humberger_check:checked + .humberger,
      #humberger_check:checked ~ .header_bar,
      #humberger_check:checked ~ .container {
        transform: translateY(300px);
      }
    
      .hidden_menu {
        height: 300px;
      }
      .hidden_menu ul li {
        float: none;
        width: 100%;
        height: 60px;
        font-size: 12px;
      }
      .hidden_menu ul li i {
        display: inline;
        font-size: 18px;
        margin-right: 15px;
      }
    
      .menu_underline {
        width: 100%;
        left: 0;
        bottom: auto;
      }
    }
[/code]

[code]

    <!doctype html>
    <html>
    <head>
    <script type="text/javascript" src="menu.js"></script>
    <meta charset="utf-8">
    <title>MENU</title>
    <link href="menu.css" rel="stylesheet" type="text/css"></head>
    
    <body>
    <input type="checkbox" role="button" title="menu" id="humberger_check" />
    <label for="humberger_check" class="humberger" aria-hidden="true" title="menu">
      <span></span>
    </label>
    <header class="header_bar">
      <h1>SITE TITLE</h1>
    </header>
    <main class="container">
      <section class="content">
        <h2>3D Rotating Hidden Menu</h2>
      </section>
    </main>
    <nav class="hidden_menu">
      <ul>
        <li data-bar-color="#FA3687">
          <a href="#"><i class="icon-picture"></i>IMAGE</a>
        </li>
        <li data-bar-color="#21D7A8">
          <a href="#"><i class="icon-film"></i>VIDEO</a>
        </li>
        <li data-bar-color="#1E9ED4">
          <a href="#"><i class="icon-music"></i>MUSIC</a>
        </li>
        <li data-bar-color="#B0D44A">
          <a href="#"><i class="icon-headphones"></i>PERSONAL</a>
        </li>
        <li data-bar-color="#A865D5">
          <a href="#"><i class="icon-cogs"></i>SETTINGS</a>
        </li>
      </ul>
      <span class="menu_underline"></span>
    </nav>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-04-24T02:37:36.143
65909
2020-04-25T12:47:54.617
2020-04-24T02:56:06.843
37940
37940
question
javascript
Javascriptを利用したメニューのサンプルコードについて、jsファイルが読み込まれない


ｊQueryを使用されていますが、HTMLファイル内でどこにもｊQeuryの本体を読み込んでいる記述がありません。  
[Google Hosted
Libraries](https://developers.google.com/speed/libraries#jquery)  
などを参考に使用するバージョンを決めて読み込むよう記述してやる必要があります。（下記の例はver.1.12.4)  
そのあとにご自身で作成されたｊｓファイルを読み込ませてやれば、動作すると思います。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    
[/code]


CC BY-SA 4.0
2020-04-25T12:47:54.617
65958
2020-04-25T12:47:54.617
9515
65909
answer