ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。
.container {
position: relative;
}
現状のソースコード
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);
(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;
}
<!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>