CODEWITHSUNDEEP
htmlcss
Johan
Johan

Reputation: 31

Make a li link work

I'm very new to programming and I made a menu for my website, it has a dropdown function but now when I click 1 of the links in the dropdown it doesn't do anything but disapear. I have been trying for days now but I can't seem to be able to fix it. Can someone help?

    <!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="/blog/2016.html">2016</a></li>
              </ul>
            </div>
          </div>
        </li>  


            <li><a href="/overons.html">Over ons</a></li>
            <li><a href="/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'));

Upvotes: 3

Views: 97

Answers (1)

ilai
ilai

Reputation: 126

Your mistake is that when you click on a menu item the focus is lost and the menu disappears before the link could be activated.

you can see that if the menu stays open the link works by removing the :focus like this:

.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;
}

try adding an animation for when the focus is lost,

or maybe find a better solution then .dropdown a:focus ~ .dropdown-container {

here is an example: HTML: travellikewedologo 

    <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="/blog/2016.html">2016</a></li>
          </ul>
        </div>
      </div>
    </li>  


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

notice a added <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;
}

merge this with your corrent css

Upvotes: 1

Related Questions