Search code examples
jquerycsstransitionslidedown

Adding slide down to the navbar on hover

I want the content of class=dropdown to be sliding down slowly when hover on class=header__nav-item--drobdownButton (PRODUKT) but I am not sure how to add it to my code in CSS. I tried to add transition:max-height .8s ease-in; but id doesnt work,and I am quite sure I can do it inn CSs without changing my code too much, or maybe I can solve this with jquery... If someone could point me in the right direction that would be graet.

function highlightButtonOnDropdownActive() {
	var activeClass = 'header__nav-item--active';
	var dropdownButtonSelector = '.header__nav-item--dropdownButton'

	$(dropdownButtonSelector).on('mouseenter', function(){
		$(this).addClass(activeClass);
	});

	$('.header__nav-item:not(' + dropdownButtonSelector + ')').on('mouseenter', function(){
		$(dropdownButtonSelector).removeClass(activeClass);
	});

	$('.dropdown').on('mouseleave', function() {
		$(dropdownButtonSelector).removeClass(activeClass);
	});
}


$().ready(function(){
	highlightButtonOnDropdownActive();
});
html, body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.flex-container {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 320px;
  padding: 0 10px;
}

.header {
  background-color: #333;
}

.header__nav {
  height: 60px;
  letter-spacing: 2.6px;
  line-height: 60px;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.header__nav-item {
  display: block;
  float: left;
}

.header__nav-item a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 400;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s linear;
}

.header__nav-item--active a {
  background-color: #ffffff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item a:hover {
  background-color: #ffffff;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item--dropdownButton {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-decoration: none;
  text-transform: uppercase;
}

.header__nav-item--contact {
  float:right;
}

.header__nav-item--dropdownButton:hover ~ .dropdown {
  display: block;
}

.jumbotron {
  background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center;
  background-size: cover;
  height: 300px;
}


.dropdown:hover {
  display: block;
}


.dropdown {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: none;
  left: 290px;
  position: absolute;
  top: 60px;
  width: 160px;
  z-index: 1;
}

.dropdown__link {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown__link:hover {
  background-color: #f1f1f1
}
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet">
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type='text/javascript' src='js/script.js'></script>
    <title>Smart-Home</title>
  </head>
<body>
  <nav class="header">
    <div class="flex-container">
      <ul class="header__nav">
        <li class="header__nav-item header__nav-item--active">
          <a href="index.html">Strona Glowna</a>
        </li>
        <li class="header__nav-item">
          <a href="contact.html">O firmie</a>
        </li>
        <li class="header__nav-item header__nav-item--dropdownButton">
          <a href="contact.html">Produkty</a>
        </li>
        <li class="header__nav-item">
          <a href="contact.html">Nasi partnerzy</a>
        </li>
        <li class="header__nav-item header__nav-item--contact">
          <a href="contact.html">Kontakt</a>
        </li>
        <div class="dropdown">
          <a class="dropdown__link" href="#">Link 1</a>
          <a class="dropdown__link" href="#">Link 2</a>
          <a class="dropdown__link" href="#">Link 3</a>
        </div>
      </ul>
    </div>
  </nav>
  </body>
</html>

Solution

  • You shouldn't use div inside ul. It messes with the whole purpose of list elements.

    Since you're using jQuery here's a modified version using hover() and slideToggle():

    $('.header__nav > li ').hover(function(){
  $(this).find('ul').slideToggle();
})
    html,
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.flex-container {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 320px;
  padding: 0 10px;
}

.header {
  background-color: #333;
}

.header__nav {
  height: 60px;
  letter-spacing: 2.6px;
  line-height: 60px;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.header__nav-item {
  display: block;
  float: left;
}

.header__nav-item a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 400;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s linear;
}

.header__nav-item--active a {
  background-color: #ffffff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item a:hover {
  background-color: #ffffff;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item--dropdownButton {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-decoration: none;
  text-transform: uppercase;
}

.header__nav-item--contact {
  float: right;
}

.header__nav-item--dropdownButton:hover~.dropdown {
  display: block;
}

.jumbotron {
  background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center;
  background-size: cover;
  height: 300px;
}

.dropdown:hover {
  display: block;
}

.dropdown {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
  left: 290px;
  position: absolute;
  top: 60px;
  width: 160px;
  z-index: 1;
  padding: 0;
  margin: 0;
}

.header__nav-item .dropdown__link {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.header__nav-item .dropdown__link:hover {
  background-color: #f1f1f1
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header">
  <div class="flex-container">
    <ul class="header__nav">
      <li class="header__nav-item header__nav-item--active">
        <a href="index.html">Strona Glowna</a>
      </li>
      <li class="header__nav-item">
        <a href="contact.html">O firmie</a>
      </li>
      <li class="header__nav-item header__nav-item--dropdownButton">
        <a href="contact.html">Produkty</a>
        <ul class='dropdown'>
          <li><a class="dropdown__link" href="#">Link 1</a></li>
          <li><a class="dropdown__link" href="#">Link 2</a></li>
          <li><a class="dropdown__link" href="#">Link 3</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <a href="contact.html">Nasi partnerzy</a>
      </li>
      <li class="header__nav-item header__nav-item--contact">
        <a href="contact.html">Kontakt</a>
      </li>

    </ul>
  </div>
</nav>