Ссылки CSS не работают над кликом

Question

Я работаю над меню наложения, и у меня есть 2 меню, один отображается, когда наложение скрыто, а второе - на этом оверлее (другое скрыто, когда вы нажимаете на гамбургер и активируете оверлей). Моя проблема в том, что когда вы нажимаете на ссылки (я пытался поместить www.google.com в href), ничего не происходит, оно просто обновляет его, как будто в href есть «#». В моей накладке У меня также есть часть с социальными связями и что ссылки работают, но не из ссылок в меню есть (не классическая или наложение ссылки меню не работает)

$(document).ready(function() { 
 
    $(".button a").click(function() { 
 
    $(".overlay").fadeToggle(200); 
 
    $(this).toggleClass('btn-open').toggleClass('btn-close'); 
 
    }); 
 
}); 
 
$('.overlay').on('click', function() { 
 
    $(".overlay").fadeToggle(200); 
 
    $(".button a").toggleClass('btn-open').toggleClass('btn-close'); 
 
    open = false; 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav { 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
    height: auto; 
 
    overflow: hidden; 
 
    background: none; 
 
} 
 
nav ul { 
 
    text-align: center; 
 
    z-index: 999; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    z-index: 999; 
 
} 
 
nav ul li a { 
 
    color: #333; 
 
    display: inline-block; 
 
    padding: 1em 3em; 
 
    text-decoration: none; 
 
    border-bottom: 2px solid #fff; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    font-size: 16px; 
 
    z-index: 999; 
 
} 
 
nav ul li a:hover { 
 
    color: #34B484; 
 
} 
 
/*styling open close button*/ 
 

 
.button { 
 
    display: inline; 
 
    position: absolute; 
 
    right: 50px; 
 
    top: 6px; 
 
    z-index: 999; 
 
    font-size: 30px; 
 
} 
 
.button a { 
 
    text-decoration: none; 
 
} 
 
.btn-open:after { 
 
    color: #333; 
 
    content: "\f0c9"; 
 
    font-family: "FontAwesome"; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.btn-open:hover:after { 
 
    color: #34B484; 
 
} 
 
.btn-close:after { 
 
    color: #fff; 
 
    content: "\f00d"; 
 
    font-family: "FontAwesome"; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.btn-close:hover:after { 
 
    color: #34B484; 
 
} 
 
/*overlay*/ 
 

 
.overlay { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #333; 
 
    overflow: auto; 
 
    z-index: 99; 
 
} 
 
.wrap { 
 
    color: #e9e9e9; 
 
    text-align: center; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.wrap ul.wrap-nav { 
 
    border-bottom: 1px solid #575757; 
 
    text-transform: capitalize; 
 
    padding: 150px 0px 100px; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 24%; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li a { 
 
    color: #34B484; 
 
    display: block; 
 
    padding: 8px 0; 
 
    text-decoration: none; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li a:hover { 
 
    color: #f0f0f0; 
 
} 
 
.wrap ul.wrap-nav ul { 
 
    padding: 20px 0; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li { 
 
    display: block; 
 
    font-size: 13px; 
 
    width: 100%; 
 
    color: #e9e9e9; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li a { 
 
    color: #f0f0f0; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li a:hover { 
 
    color: #34B484; 
 
} 
 
.social { 
 
    font-size: 25px; 
 
    padding: 20px; 
 
} 
 
.social p { 
 
    margin: 0; 
 
    padding: 20px 0 5px 0; 
 
    line-height: 30px; 
 
    font-size: 13px; 
 
} 
 
.social p a { 
 
    color: #34B484; 
 
} 
 
.social-icon { 
 
    width: 80px; 
 
    height: 50px; 
 
    background: #e9e9e9; 
 
    color: #333; 
 
    display: inline-block; 
 
    margin: 0 20px; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.social-icon:hover { 
 
    background: #34B484; 
 
    color: #f0f0f0; 
 
} 
 
.social-icon i { 
 
    margin-top: 12px; 
 
} 
 
@media screen and (max-width: 48em) { 
 
    .wrap ul.wrap-nav > li { 
 
    width: 100%; 
 
    padding: 20px 0; 
 
    border-bottom: 1px solid #575757; 
 
    } 
 
    .wrap ul.wrap-nav { 
 
    padding: 30px 0px 0px; 
 
    } 
 
    nav ul { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    } 
 
    .social { 
 
    color: #c1c1c1; 
 
    font-size: 25px; 
 
    padding: 15px 0; 
 
    } 
 
    .social-icon { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    color: #333; 
 
    display: block; 
 
    margin: 5px 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="http://facebook.com">Company</a> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    </li> 
 
    <li><a href="#">Social</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
    <div class="button"> 
 
    <a class="btn-open" href="#"></a> 
 
    </div> 
 
</nav> 
 

 
<div class="overlay"> 
 
    <div class="wrap"> 
 
    <ul class="wrap-nav"> 
 
     <li><a href="#">Company</a> 
 
     <ul> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Blog</a> 
 
      </li> 
 
      <li><a href="#">Workplace</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="https://www.google.hr/">Web Design</a> 
 
      </li> 
 
      <li><a href="#">Consultanct</a> 
 
      </li> 
 
      <li><a href="#">Products</a> 
 
      </li> 
 
      <li><a href="#">Centers</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Social</a> 
 
     <ul> 
 
      <li><a href="#">Facebook</a> 
 
      </li> 
 
      <li><a href="#">Twitter</a> 
 
      </li> 
 
      <li><a href="#">Google Plus</a> 
 
      </li> 
 
      <li><a href="#">LinkedIn</a> 
 
      </li> 
 
      <li><a href="#">WhatsApp</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     <ul> 
 
      <li><a href="#">Address</a> 
 
      </li> 
 
      <li><a href="#">Phone</a> 
 
      </li> 
 
      <li><a href="#">Email</a> 
 
      </li> 
 
      <li><a href="#">Map</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 

 
    <div class="social"> 
 
     <a href="http://mario-loncarek.from.hr/"> 
 
     <div class="social-icon"><i class="fa fa-facebook"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-twitter"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-codepen"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-behance"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-dribbble"></i> 
 
     </div> 
 
     </a> 
 
     <p>From: Zagreb, Croatia 
 
     <br>Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Интегрированная интегрированная среда разработки, которую вы используете, не позволяет вам направлять вашу страницу на внешний URL (в ваш текущий проект).

Консоль показывает следующее сообщение при нажатии на ссылку на facebook.com: Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'DENY'.

Вы, вероятно, нужно будет использовать редактор не в Интернете (например, Sublime Text) и протестировать веб-страницы локально.