サンプルコードを組み合わせたところ手のひらツールが現れることと、内部リンクができない

前提・実現したいこと

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

発生している問題

内部及び外部リンクができない

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>MENU</title>
6<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
7<link href="css/menu.css" rel="stylesheet" type="text/css">
8<link href="css/slider.css" rel="stylesheet" type="text/css">
9<link href="css/container.css" rel="stylesheet" type="text/css">
10<script type=<"css/slider.css" rel="stylesheet" type="text/css"></script>
11</head>
12
13<body>
14<input type="checkbox" role="button" title="menu" id="humberger_check" />
15<label for="humberger_check" class="humberger" aria-hidden="true" title="menu">
16  <span></span>
17</label>
18<header class="header_bar">
19  <h1>SITE TITLE</h1>
20</header>
21<main class="container">
22  <section class="content">
23    <h2>3D Rotating Hidden Menu</h2>
24  </section>
25</main>
26<nav class="hidden_menu">
27  <ul>
28    <li data-bar-color="#FA3687">
29      <a href="#"><i class="icon-picture"></i>IMAGE</a>
30    </li>
31    <li data-bar-color="#21D7A8">
32      <a href="#"><i class="icon-film"></i>VIDEO</a>
33    </li>
34    <li data-bar-color="#1E9ED4">
35      <a href="#"><i class="icon-music"></i>MUSIC</a>
36    </li>
37    <li data-bar-color="#B0D44A">
38      <a href="#"><i class="icon-headphones"></i>PERSONAL</a>
39    </li>
40    <li data-bar-color="#A865D5">
41      <a href="#"><i class="icon-cogs"></i>SETTINGS</a>
42    </li>
43  </ul>
44  <span class="menu_underline"></span>
45</nav>
46
47<section class="swiper-container loading">
48  <div class="swiper-wrapper">
49    <div class="swiper-slide" data-test-set="test" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
50      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" />
51      <div class="content">
52        <p class="title">Shaun Matthews</p>
53        <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>
54      </div>
55    </div>
56    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
57      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" />
58      <div class="content">
59        <p class="title">Alexis Berry</p>
60        <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>
61      </div>
62    </div>
63    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
64      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" />
65      <div class="content">
66        <p class="title">Billie Pierce</p>
67        <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>
68      </div>
69    </div>
70    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
71      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" />
72      <div class="content">
73        <p class="title">Trevor Copeland</p>
74        <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>
75      </div>
76    </div>
77    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
78      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" />
79      <div class="content">
80        <p class="title">Bernadette Newman</p>
81        <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>
82      </div>
83    </div>
84  </div>
85
86  <!-- If we need pagination -->
87  <div class="swiper-pagination"></div>
88  <!-- If we need navigation buttons -->
89  <div class="swiper-button-prev swiper-button-white"></div>
90  <div class="swiper-button-next swiper-button-white"></div>
91</section>
92<div id="footer">
93    <div id="slide">
94    <div id="slide-in">
95        <p id="page-top"><a href="#wrap">PAGE TOP</a></p>
96      </div>
97</div>
98    </div>
99<script type="text/javascript" src="js/swiper.min.js"></script>
100<script type="text/javascript" src="lib/jquery-3.5.0.min.js"></script>
101<script type="text/javascript" src="js/menu.js"></script>
102<script src="js/slider.js"></script>
103</body>
104</html>
105

css
1* {
2  box-sizing: border-box;
3}
4*:before, *:after {
5  padding: 0;
6  margin: 0;
7}
8
9body {
10  font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
11  background-color: #333;
12  color: #efefef;
13  text-align: center;
14  margin: 0;
15  padding: 0;
16}
17body a, body a:visited {
18  color: #efefef;
19  text-decoration: none;
20}
21body a:hover {
22  color: #ccc;
23}
24
25.container {
26  position: relative;
27}
28
29.content {
30  margin: 0 auto;
31  padding: 5% 40px;
32}
33
34.hidden_menu, .hidden_menu ul {
35  backface-visibility: hidden;
36  -webkit-backface-visibility: hidden;
37}
38
39.hidden_menu ul li, .menu_underline, .header_bar::before {
40  transition: all 0.3s ease;
41}
42
43.humberger, .hidden_menu, .hidden_menu ul, .header_bar, .container {
44  transition: all 0.5s ease;
45}
46
47.hidden_menu ul li::before, .header_bar::before, .container::before {
48  content: '';
49  position: absolute;
50  top: 0;
51  left: 0;
52  width: 100%;
53  height: 100%;
54}
55
56#humberger_check {
57  width: 0;
58  height: 0;
59  opacity: 0;
60  visibility: hidden;
61}
62#humberger_check:checked + .humberger {
63  transform: translateY(160px);
64}
65#humberger_check:checked + .humberger span {
66  background-color: transparent;
67}
68#humberger_check:checked + .humberger span::before {
69  top: 2px;
70  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;
71  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
72  transform: translate3d(0, 10px, 0) rotate(45deg);
73}
74#humberger_check:checked + .humberger span::after {
75  top: 6px;
76  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;
77  -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg);
78  transform: translate3d(0, 6px, 0) rotate(-45deg);
79}
80#humberger_check:checked ~ .header_bar,
81#humberger_check:checked ~ .container {
82  transform: translateY(160px);
83}
84#humberger_check:checked ~ .hidden_menu {
85  transform: translateY(0);
86}
87#humberger_check:checked ~ .hidden_menu ul {
88  opacity: 1;
89  transform: rotateX(0);
90}
91
92.humberger {
93  position: fixed;
94  top: 20px;
95  right: 5vw;
96  width: 40px;
97  height: 40px;
98  cursor: pointer;
99  z-index: 3;
100}
101.humberger span {
102  position: absolute;
103  top: 6px;
104  left: 50%;
105  width: 30px;
106  height: 4px;
107  margin: 0 auto auto -15px;
108  background-color: #fff;
109  transition: background-color .1s linear .13s;
110}
111.humberger span::before, .humberger span::after {
112  content: '';
113  position: absolute;
114  left: 0;
115  width: 100%;
116  height: 4px;
117  background-color: #fff;
118}
119.humberger span::before {
120  top: 12px;
121  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);
122}
123.humberger span::after {
124  top: 24px;
125  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);
126}
127
128.hidden_menu {
129  position: fixed;
130  top: 0;
131  left: 0;
132  width: 100%;
133  height: 160px;
134  -webkit-perspective: 1600px;
135  perspective: 1600px;
136  background-color: #222;
137  z-index: 3;
138  transform: translateY(-100%);
139}
140.hidden_menu ul {
141  list-style: none;
142  width: 100%;
143  height: 100%;
144  margin: 0;
145  padding: 0;
146  opacity: 0;
147  background-color: rgba(255, 255, 255, 0.08);
148  -webkit-transform-origin: center bottom;
149  transform-origin: center bottom;
150  transform: rotateX(90deg);
151}
152.hidden_menu ul li {
153  position: relative;
154  display: table;
155  width: 20%;
156  height: 100%;
157  float: left;
158  font-size: 13px;
159}
160
161.container {
162  position: absolute;
163  top: 0;
164  left: 0;
165  width: 100%;
166  z-index: 1;
167  background-size: cover;
168  background-attachment: fixed;
169  background-position: center;
170  background-image:;
171}
172.container::before {
173  position: fixed;
174  background-color: rgba(0, 0, 0, 0);
175}
176
177.content {
178  position: relative;
179  margin: 100px auto 4vw;
180  padding: 0 5vw;
181  height: 100vh;
182}
183.content h2 {
184  position: relative;
185  top: 30vh;
186  font-size: 38px;
187}
188
189@keyframes scaling {
190  50% {
191    opacity: .28;
192    transform: scale(0.5);
193  }
194  100% {
195    opacity: 0;
196    transform: scale(1.05);
197  }
198}
199@media (max-width: 680px) {
200  #humberger_check:checked + .humberger,
201  #humberger_check:checked ~ .header_bar,
202  #humberger_check:checked ~ .container {
203    transform: translateY(300px);
204  }
205

補足情報（FW/ツールのバージョンなど）

dreamweaver cs6 chrome

FrontEnd_Japan

2020/07/26 14:14

前回の質問のリンクを記載して頂いたほうが、質問の背景を理解しやすいです。

cht

2020/07/27 05:48

すみませんでした。前回の質問のリンクです。 https://teratail.com/questions/270905

FrontEnd_Japan

2020/08/01 09:12

swiper.js, slider.jsの２つが読み込まれていますが、slider.jsの使用用途はなんでしょうか。

cht

2020/08/01 12:36

FrontEnd_Japan様 slider.jsについてはスライドを立体に見えるように配置し、回転するキューブ状のスライダーを表示する事と、速度だと思います。

行動規範の内容に同意します

回答4件

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

投稿2020/08/06 05:55

cht

総合スコア10

自己解決

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

投稿2020/08/06 05:51

cht

総合スコア10

フッターからの内部リンク不具合について
aタグのリンク参照先がhtmlに記載がございません。
<a href="#wrap">は、htmlのid="wrap"に向けて移動します。
ですので、htmlタグ内のどこかにid="wrap"を追記する必要があります。

html
1<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

投稿2020/08/01 09:03

FrontEnd_Japan

総合スコア271

cht

2020/08/01 12:50

FrontEnd_Japan様有難うございます。 <body>下に<div id="wrap">を追記いたしましたところ、他のページで試してtopに行きましたが、この組み合わせではだめでした。

FrontEnd_Japan

2020/08/01 13:36

>他のページで試してtopに行きましたが、この組み合わせではだめでした。この組み合わせってどの組み合わせでしょうか。

FrontEnd_Japan

2020/08/01 13:42

>他のページで試してtopに行きましたが駄目なページは何のぺーじでしょうか。

cht

2020/08/01 23:23

FrontEnd_Japan様有難うございます。やはり、ハンバーガーメニューのコードを追記すると全てtopに行きません。スライダーだけだとtopに行きます。宜しくお願いします。

FrontEnd_Japan

2020/08/02 00:16

ローカルで検証したいので、menu.jsとslider.jsのコードも記載していただけませんか？

cht

2020/08/02 02:19

menu.js 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); slider.js var sliderSelector = '.swiper-container', isMove = false, options = { init: false, loop: true, speed:800, autoplay:{ delay:3000 }, effect: 'cube', // 'cube', 'fade', 'coverflow', cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 40, shadowScale: 0.94, }, grabCursor: true, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, // Events on: { init: function(){ this.autoplay.stop(); }, imagesReady: function(){ this.el.classList.remove('loading'); this.autoplay.start(); }, touchMove: function(event){ if (!isMove) { this.el.classList.remove('scale-in'); this.el.classList.add('scale-out'); isMove = true; } }, touchEnd: function(event){ this.el.classList.remove('scale-out'); this.el.classList.add('scale-in'); setTimeout(function(){ isMove = false; }, 300); }, slideChangeTransitionStart: function(){ console.log('slideChangeTransitionStart '+this.activeIndex); if (!isMove) { this.el.classList.remove('scale-in'); this.el.classList.add('scale-out'); } }, slideChangeTransitionEnd: function(){ console.log('slideChangeTransitionEnd '+this.activeIndex); if (!isMove) { this.el.classList.remove('scale-out'); this.el.classList.add('scale-in'); } }, transitionStart: function(){ console.log('transitionStart '+this.activeIndex); }, transitionEnd: function(){ console.log('transitionEnd '+this.activeIndex); }, slideChange:function(){ console.log('slideChange '+this.activeIndex); console.log(this); } } }, mySwiper = new Swiper(sliderSelector, options); // Initialize slider mySwiper.init(); 宜しくお願いします。

FrontEnd_Japan

2020/08/02 03:42

ありがとうございます????

FrontEnd_Japan

2020/08/02 08:01 編集

html見ていて他の点も気になりました。以下のファイルがlinkではなくscriptで読み込まれてしまっています。 <script type=<"css/slider.css" rel="stylesheet" type="text/css"></script> 正しくは <link href="css/slider.css" rel="stylesheet" type="text/css"> あと、headタグ内で複数のCSSが読み込まれていますが、質問に掲載のあるコードはなんのCSSでしょうか。

cht

2020/08/02 09:45

FrontEnd_Japan様何度もすみません。下記のスライダーのサンプルコードをそのままコピーしてしまっていました。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.8/css/swiper.min.css"><link href="slider.css" rel="stylesheet" type="text/css"> 修正いたしましたが変化はありませんでした。 head内のたぐについてはハンバーガーメニューがmenu.css及びmenu.jsでスライダーがswiper.min.css、slider.css及びswiper.js,slider.jsです。 container.cssについてはテーブル作成の為、読み込んでいましたが現在は削除してあります。宜しくお願いします。因みにこのサンプルのurlがhttps://digipress.info/tech/3d-rotating-hidden-menu-sample/になります。 <script type=<"slider.css" rel="stylesheet" type="text/css"></script>

cht

2020/08/02 10:40

追記 https://digipress.info/tech/introducing-swiper-js/ の3D キューブ回転スライダーになります。

行動規範の内容に同意します

太字の部分が、不具合を起こしているのやもしれません。
削除してみて、動作を確認してみてください。

投稿2020/07/27 04:07