3 votes

Johan avatar

Faire fonctionner un lien li

Demandé el 24 de Mai, 2016
Quand la question a-t-elle été
87 affichage
Nombre de visites la question a
1 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je suis très novice en programmation et j'ai créé un menu pour mon site web, il a une fonction dropdown mais maintenant quand je clique sur un des liens dans le dropdown il ne fait rien mais disparaît. J'ai essayé pendant des jours mais je n'arrive pas à résoudre le problème. Je ne sais pas si vous pouvez m'aider.

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    <title>Travellikewedo | Travelguide</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="shortcut icon" type="image/x-icon" href="indeximg/favicon.ico">
</head>
        <body>

        <!-- Navigation -->

<header>
    <div class="wrapper">
        <nav>
            <a href="index.html"><h1 class="logo">travellikewedologo</h1></a>
            <div class="fb-like" data-href="https://www.facebook.com/kellyjohantravel" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <a class="burger-nav"></a>
            <h2>Main Navigation</h2>
        <ul>

        <li class="nav-item dropdown">
          <a href="#">Reizen +</a>
          <div class="dropdown-container">
            <div class="dropdown-inner">
              <ul class="dropdown-menu">
                <li class="dropdown-menu-item"><a href="#">Landen</a></li>
                <li class="dropdown-menu-item"><a href="#">Meenemen</a></li>
                <li class="dropdown-menu-item"><a href="#">Tips</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a href="#">Blog +</a>
          <div class="dropdown-container">
            <div class="dropdown-inner">
              <ul class="dropdown-menu">
                <li class="dropdown-menu-item"><a href="stackoverflow.com/blog/2016.html">2016</a></li>
              </ul>
            </div>
          </div>
        </li>  

            <li><a href="stackoverflow.com/overons.html">Over ons</a></li>
            <li><a href="stackoverflow.com/contact.html">Contact</a></li>
        </ul>
        </nav>
    </div>
</header>

        <!-- Content -->

    <div id="index-banner">
        <img src="indeximg/banner.jpg" alt="welkom" class="banner-image">
    </div>

 <div id="indexcontent">

    <div class="sideright">
        <h2>Advertenties</h2>
        <p>tekst met een W zodat we kunnen zien of Raleway werkt</p>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
    </div>

    <div> 
        <img class="imagesidebar" src="indeximg/banner.jpg">
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
    </div>

    <div class="sideright">
        <h2>Advertenties</h2>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
     </div>

    <div id="footer">
       <div id="social"> 

           <div class="socialthumb"><a href="https://www.facebook.com/kellyjohantravel/"> <img class="socialthumbimg" src="social/facebookicon.svg"></a>
            </div>

           <div class="socialthumb"><a href="https://www.instagram.com/travel_like_we_do/"><img class="socialthumbimg" src="social/instagramicon.svg"></a>
            </div>

           <div class="socialthumb"><a href="https://www.youtube.com/channel/UCLQ3Vq79f6CjnlOy1tjT9GQ"><img class="socialthumbimg" src="social/youtubeicon.svg"></a>
            </div>

       </div>
        <p>&copy TraveLlikewedo.com 2016</p>
     </div>

</div>

    </body>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="menu.js"></script>
</html>

@font-face{ 
    font-family: 'raleway';
    src: url('fonts/raleway.eot');
    src: url('fonts/raleway.eot?iefix') format('eot'),
         url('fonts/raleway.woff') format('woff'),
         url('fonts/raleway.ttf') format('truetype'),
         url('fonts/raleway.svg#webfont') format('svg');
}

body {
  font-family: "raleway", sans-serif;
  font-size: 1em;
  color: #4c4c4c;
  margin: 0;
  padding: 0;
  width: 100%;
}

p{
    color: #999;
}

/* ===== Navigation ===== */

.wrapper {
  width: 100%;
  max-width: 1180px;
  padding: 0;
  margin: 0;
}

.fb_iframe_widget {
  display: block;
  float: left;
  margin: 30px 0;
}

h1.logo {
  background-image: url(indeximg/logo602.png);
  background-repeat: no-repeat;
  width: 135px;
  height: 50px;
  text-indent: -10000px;
  float: left;
  margin: 15px;
}

header nav {
  position: fixed;
  width: 100%;
  height: 80px;
  float: right;
  background: #fff;
  border-bottom: 3px solid #bcbcbc;
  z-index: 10;
  top: 0;
}

header nav h2 {
  text-indent: -10000px;
  height: 0;
  margin: 0;
}

header nav li {
  float: left;
  list-style-type: none;
  margin: 10px 20px;
}

header nav li a {
  text-decoration: none;
  color: #4c4c4c;
  font-size: 1em;
}

header nav ul {
  float: right;
  margin: 19.5px 0;
  padding: 0;
}

header nav li a:hover {
  text-decoration: underline;
}

.dropdown a:focus {
  color: #bcbcbc;
}

.dropdown a:focus ~ .dropdown-container {
  max-height: 500px;
  transition:max-height 0.5s ease-in;
  -webkit-transition:max-height 0.5s ease-in;
  -moz-transition:max-height 0.5s ease-in;
}

.dropdown-container {
  position: absolute;
  top: 83px;
  max-height: 0;
  overflow: hidden;
  background: #fff;
}

.dropdown-menu {
  margin: 0;
  padding: 10px;
}

.dropdown-menu li a {
  padding: 10px; 
  display: inline-block;
}

.dropdown-menu-item{
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ===== Index banner ===== */

.banner-image {
  position: fixed;
  width: 100%;
  height: auto;
  top: 80px;
}

/* ===== Content ===== */

#indexcontent{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    top: 600px;
    z-index: 1;
    background-color: #eee;
}

.main{
    margin-top: 10px;
    margin-right: 320px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 20px;
    background-color: #e5e3e3;
}

.sideright{
    padding: 20px;
    margin: 10px;
    background-color: #e5e3e3;
    float: right;
    width: 260px;
    clear: right;
}
.imagesidebar{
    margin: 10px;
    float: right;
    width: 300px;
    clear: right;
}

/* ===== Reizen banner ===== */

.reizenbanner-image {
  position: fixed;
  width: 100%;
  height: 220px;
  top: 80px;
}

h1.bannertext{
    position: fixed;
    font-size: 400%;
    border: solid 3px #fff;
    padding: 0 20px;
    margin: 90px 0 0 15px;
    color: #fff;
    text-shadow: 1px 1px #bcbcbc;
}

/* ===== Subpage Content ===== */

#subpage-content{
    position: relative;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    height: auto;
    top: 302px;
    background-color: #eee;
}

.subpage-main{
    margin: 1%;
    padding: 2%;
    width: 44%;
    float: left;
}

.subpage-sideright{
    margin: 1%;
    padding: 2%;
    width: 44%;
    float: right;
    clear: right;
}
.subpage-imagesidebar {
    margin: 3%;
    width: 44%;
    float: right;
    clear: right;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.personal-info {
    margin: 1%;
    padding: 2%;
    width: 64%;
    float: left;
}

.personal-image {
    margin-top: 6%;
    margin-bottom: 3%;
    margin-left: 0;
    margin-right: 3%;
    width: 27%;
    float: right;
    clear: right;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    border-bottom: 50px solid #fff;
}

/* ===== Contact =====*/

.contact-banner-image {
  position: fixed;
  width: 100%;
  height: 220px;
  top: 83px;
}

#contact-content{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    top: 303px;
    z-index: 1;
    background-color: #eee;
}

#contact {
    position: relative;
    display: block;
    height: 250px;
    width: 100%;
    text-align: center;
}

.form-control {
    font-family: "raleway";
    font-size: 1.1em;
    height: 25px;
    width: 50%;
    border: 1px solid #bcbcbc;
    padding: 0;
    margin: 0;
}
#message.form-control {
    height: 70px;
}

/* ===== Footer ===== */

#footer{
    padding-top: 30px;
    background-color: #eee;
    height: 150px;
    clear: both;
    text-align: center;
}

#social{
    position: relative;
    width: 100%;
    height: 90px;
}

.socialthumbimg{
    width: 70px;
    height: 70px;
}

.socialthumb{
    width: 70px;
    height: 70px;
    margin: 10px 5%;
    display: inline-block;
}

/* ===== mobiles and tablets =====*/

@media screen and (max-width: 768px) {

/* ===== Navigation ===== */

 .fb_iframe_widget {
    display: block;
    float: left;
    margin: 20px 0;
  }

  h1.logo{
    margin: 5px;
  }

  header nav {
    position: fixed;
    width: 100%;
    height: 60px;
  }

  .burger-nav {
    display: inline-block;
    margin: 10px 20px;
    height: 40px;
    width: 40px;
    background: url(indeximg/hamburger.png) no-repeat 85% center;
    float: right;
  }

  header nav ul {
    overflow: hidden;
    background: #fff;
    height: 0;
  }

  header nav ul.open {
    position: relative;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
  }

  header nav ul li a {
    padding: 10px;
    border-bottom: 1px solid #bcbcbc;
    display: block;
    margin: 0;
}

.dropdown-container {
    position: static;
      }

.dropdown-menu li a {
    display: block;
    text-indent: 20px;
}

/* ===== Banner ===== */

  #index-banner img {
    position: fixed;
    width: 200%;
    height: 600px;
    left: -50%;
    top: 60px;
  }

/* ===== Content ===== */

.main{
    margin: 1%;
    padding: 2%;
    width: 94%;
    background-color: #e5e3e3;
    float: left;
}

.sideright{
    margin: 1%;
    padding: 2%;
    width: 94%;
    background-color: #e5e3e3;
    float: right;
    clear: right;
}
.imagesidebar{
    margin: 1%;
    width: 98%;
    float: right;
    clear: right;
}  

/* ===== Reizen banner ===== */

.reizenbanner-image {
  position: fixed;
  width: 200%;
  height: 220px;
  left: -50%;
  top: 60px;
}

/* ===== Subpage Content ===== */

#subpage-content{
    top: 283px;
}

.subpage-main{
    width: 94%;
}

.subpage-sideright{
    width: 94%;
}

.subpage-imagesidebar {
    width: 94%;
}

.personal-info {
    width: 94%;
}

.personal-image {
    margin: 3%;
    width: 94%;
}

/* ===== Contact ===== */

.form-control {
    width: 80%;
}
#message.form-control {
    width: 80%;
}
.contact-banner-image {
    top: 63px;
}   
#contact-content{
    top: 280px;
} 

}

$(document).ready(function(){

      $(".burger-nav").on("click", function(){

        $("header nav ul").toggleClass("open"); 

      });
});

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Demandé el 24 de Mai, 2016 par Johan

Réponse

Trop de publicités?

1voto

ilai avatar
ilai Points 136

L'erreur est que lorsque vous cliquez sur un élément de menu, le focus est perdu et le menu disparaît avant que le lien ne puisse être activé.

vous pouvez voir que si le menu reste ouvert, le lien fonctionne en supprimant l'élément :focus comme ceci :

.dropdown a ~ .dropdown-container {
  max-height: 500px;
  transition:max-height 0.5s ease-in;
  -webkit-transition:max-height 0.5s ease-in;
  -moz-transition:max-height 0.5s ease-in;
}

essayez d'ajouter une animation lorsque le focus est perdu,

ou peut-être trouver une meilleure solution .dropdown a:focus ~ .dropdown-container {

Voici un exemple : HTML : travellikewedol

    <a class="burger-nav"></a>
        <h2>Main Navigation</h2>
    <ul>

    <li class="nav-item dropdown">
      <a href="#">Reizen +</a>
      <div class="dropdown-container">
        <div class="dropdown-inner">
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item"><a href="#">Landen</a></li>
            <li class="dropdown-menu-item"><a href="#">Meenemen</a></li>
            <li class="dropdown-menu-item"><a href="#">Tips</a></li>
          </ul>
        </div>
      </div>
    </li>

    <li class="nav-item dropdown">
      <a href="#">Blog +</a>
      <div class="dropdown-container">
        <div class="dropdown-inner">
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item"><a href="http://stackoverflow.com/blog/2016.html">2016</a></li>
          </ul>
        </div>
      </div>
    </li>  

        <li><a href="http://stackoverflow.com/overons.html">Over ons</a></li>
        <li><a href="http://stackoverflow.com/contact.html">Contact</a></li>
    </ul>
    </nav>

avis a ajouté <nav class="nav">

css :

.nav li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
}
.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
.nav ul > li:hover ul li {
    height:36px;
}

fusionnez ceci avec votre css actuel

Répondu el 24 de Mai, 2016 par ilai (136 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X