在悬停时向下添加向下滑动到导航栏

时间：2017-02-27 11:49:05

标签： jquery css transition slidedown

我希望class=dropdown的内容在悬停在class=header__nav-item--drobdownButton（PRODUKT）时缓慢滑落，但我不确定如何将其添加到我的CSS代码中。 我试图添加transition:max-height .8s ease-in;但是id不起作用，我很确定我可以在不改变我的代码的情况下在CS中做到这一点，或者我可以用jquery解决这个问题... 如果有人可以指出我正在朝着正确的方向发展。

＆＃13;
＆＃13; 
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();
});
＆＃13; 
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
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

你不应该在div内使用ul。它与列表元素的整个目的混淆。

由于您在这里使用jQuery是使用hover()和slideToggle()修改后的版本：

＆＃13;
＆＃13; 
$('.header__nav > li ').hover(function(){
  $(this).find('ul').slideToggle();
})
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题