69298


ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。

menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。

[code]

    .container {
      position: relative;
    }
    
[/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]

    （menu css）
    
    @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: 30px;
        display: inline-block;
        color: #FFF;
        transform: skew(-10deg);
    }
    
    .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      background-image:;
    }
    .container::before {
      position: fixed;
      background-color: rgba(0, 0, 0, 0);
    }
    
    .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;
      }
    }
    
    （slider css）
    
    @charset "utf-8";
    
    [class^="swiper-button-"], .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }
    
    [class^="swiper-slide-shadow-"] {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
        background-color: #888;
        clear: both;
    }
    
    .swiper-container {
      width: 100%;
      height: 34vw;
      -webkit-transition: opacity .6s ease, -webkit-transform .3s ease;
      transition: opacity .6s ease, -webkit-transform .3s ease;
      transition: opacity .6s ease, transform .3s ease;
      transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease;
    }
    .swiper-container:hover .swiper-button-prev,
    .swiper-container:hover .swiper-button-next {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
    .swiper-container.loading {
      opacity: 0;
    }
    .swiper-container.scale-out {
      -webkit-transform: scale(0.7);
              transform: scale(0.7);
    }
    .swiper-container.scale-in {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    
    .swiper-slide {
      background-position: center;
      background-size: cover;
      -webkit-perspective: 1600px;
              perspective: 1600px;
    }
    .swiper-slide.swiper-slide-active {
      z-index: 2;
    }
    .swiper-slide .entity-img {
      display: none;
    }
    .swiper-slide .content {
      position: absolute;
      top: 40%;
      left: 0;
      width: 50%;
      padding-left: 5%;
      color: #fff;
      -webkit-transform: translateZ(100px) translateX(100px);
              transform: translateZ(100px) translateX(100px);
    }
    .swiper-slide .content .title {
      font-size: 2.5em;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .swiper-slide .content .caption {
      display: block;
      font-size: 12px;
      line-height: 1.4;
    }
    
    [class^="swiper-button-"] {
      width: 44px;
      opacity: 0;
      visibility: hidden;
    }
    
    .swiper-button-prev {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
    
    .swiper-button-next {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 9px;
      position: relative;
      width: 12px;
      height: 12px;
      background-color: #fff;
      opacity: .4;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 18px;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 0px solid #fff;
      border-radius: 50%;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
      opacity: 1;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
      border-width: 1px;
    }
[/code]

[code]

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>MENU</title>
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
    <link href="css/menu.css" rel="stylesheet" type="text/css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link href="css/container.css" rel="stylesheet" type="text/css">
    <script type=<"css/slider.css" rel="stylesheet" type="text/css"></script>
    </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>
    
    <section class="swiper-container loading">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-test-set="test" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
          <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" />
          <div class="content">
            <p class="title">Shaun Matthews</p>
            <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
          </div>
        </div>
        <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
          <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" />
          <div class="content">
            <p class="title">Alexis Berry</p>
            <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
          </div>
        </div>
        <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
          <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" />
          <div class="content">
            <p class="title">Billie Pierce</p>
            <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
          </div>
        </div>
        <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
          <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" />
          <div class="content">
            <p class="title">Trevor Copeland</p>
            <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
          </div>
        </div>
        <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
          <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" />
          <div class="content">
            <p class="title">Bernadette Newman</p>
            <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
          </div>
        </div>
      </div>
    
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </section>
    <div id="footer">
        <div id="slide">
        <div id="slide-in">
            <p id="page-top"><a href="#wrap">PAGE TOP</a></p>
          </div>
    </div>
        </div>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="lib/jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
    <script src="js/slider.js"></script>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-08-01T04:23:57.233
69154
2020-12-23T10:53:55.887
2020-12-23T10:53:55.887
32986
37940
question
javascript html css swiper
サンプルコードを組み合わせたところ、リンク（内部、外部）できない


menu.cssのcontent部分を削除致しましたところ、無事リンクができるようになりました。


CC BY-SA 4.0
2020-08-06T05:59:02.927
69298
2020-08-06T05:59:02.927
37940
69154
answer