質問編集履歴

swiper.min.cssに記述されている　position:relativeの部分を削除したところ手のひらツールは出なくなりましたが、リンク（内部、外部共）については解決していません。

2020/08/01 06:09

投稿

cht

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,7 +2,7 @@
-前回の質問に続き、サンプルコードを組み合わせたところ、スライドする際、送り・戻りボタンが表示されるとスライダー下の左半分にマウスポインタ―の「手のひらツール」が現れることと、内部及び外部リンクができない。
+前回の質問に続き、ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
@@ -12,8 +12,6 @@
 ```
-スライダー全体とスライダー下の左半分に手のひらツールが現れる
 内部及び外部リンクができない
 ```
@@ -238,23 +236,75 @@
 ```
-```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-"] {
+```css
+* {
+  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;
@@ -264,231 +314,337 @@
+.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);
+}
-*, *:before, *:after {
+.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 {
-  box-sizing: border-box;
+  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);
-}
+}
-body {
+.hidden_menu ul li {
-    background-color: #888;
+  position: relative;
+  display: table;
+  width: 20%;
+  height: 100%;
-    clear: both;
+  float: left;
+  font-size: 13px;
-}
+}
-.swiper-container {
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
   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;
+  z-index: 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);
+  background-size: cover;
-          transform: scale(1);
+  background-attachment: fixed;
-}
-.swiper-slide {
   background-position: center;
-  background-size: cover;
+  background-image:;
-  -webkit-perspective: 1600px;
-          perspective: 1600px;
-}
+}
-.swiper-slide.swiper-slide-active {
+.container::before {
-  z-index: 2;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0);
-}
+}
-.swiper-slide .entity-img {
-  display: none;
-}
-.swiper-slide .content {
+.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;
-}
+  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);
+  }
@@ -496,8 +652,6 @@
 ### 補足情報（FW/ツールのバージョンなど）

タイトルの追加

2020/08/01 06:09

投稿

cht

スコア10

test CHANGED Viewed

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

test CHANGED Viewed

File without changes