文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将幻灯片向下添加到悬停时的导航栏

问将幻灯片向下添加到悬停时的导航栏
EN

Stack Overflow用户
提问于 2017-02-27 19:49:05
回答 1查看 1.1K关注 0票数 1

我希望当鼠标悬停在class=header__nav-item--drobdownButton上时，class=dropdown的内容会慢慢滑下来，但我不确定如何将它添加到我的代码中。我尝试添加transition:max-height .8s ease-in;，但id不起作用，我非常确定我可以在CSs中完成，而不需要太多修改代码，或者我可以用jquery来解决这个问题……如果有人能给我指出正确的方向，那就是格雷特。

​

代码语言：javascript
复制
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();
});
代码语言：javascript
复制
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
}
代码语言：javascript
复制
<!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>

​

transition
slidedown
jquery
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-27 19:56:04

您不应该在ul中使用div。它打乱了列表元素的整个用途。

由于您使用的是jQuery，因此这里有一个使用hover()和slideToggle()的修改版本

​

代码语言：javascript
复制
$('.header__nav > li ').hover(function(){
  $(this).find('ul').slideToggle();
})
代码语言：javascript
复制
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
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42485061

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档