如何修复导航菜单上的悬停和过渡？

Question

我正在构建一个垂直标签式导航菜单。

当我将鼠标悬停在选项卡上时遇到两个问题。

首先，应该只展开悬停的选项卡。但实际发生的是多个选项卡展开。

其次，展开过渡不流畅。这非常生涩和烦人。

我已经检查了我的代码，但无法弄清楚。我错过了什么？

悬停时每个选项卡都应该平滑地自行展开。

如有任何反馈，我们将不胜感激。

实时站点：http://gearbags.com/store/shop/

HTML:

<!-- First Tab --> 

<div id="slideout">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />


    <div id="slideout_inner">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">ACCESSORIES</a></h4><br />
      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXFB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXGC-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXFGS</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXFGS-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>

<!-- Second Tab --> 

<div id="slideout-fire">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_fire">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">FIREFIGHTER</a></h4><br />
      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXFB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXGC-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXFGS</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXFGS-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>


<!-- Third Tab --> 


<div id="slideout-medical">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_medical">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">MEDICAL</a></h4><br />

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMB5-HP</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXMB15</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXMB20</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXMB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXMB35</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMB40</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMB50</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMB65</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>

<!-- Fourth Tab --> 


<div id="slideout-tactical">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_tactical">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">TACTICAL</a></h4><br />

      <h4><a href="http://gearbags.com/store/product-category/tactical/lxpb10/">LXPB10</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/tactical/lxpb40/">LXPB40</a></h4>


    </div>
  </div>

CSS

/* ---------- First Tab ---------- */


#slideout {
  position: fixed;
  top: 40px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout img {
  position: relative;
    left: 75px;
  /* margin-left: -860px; */
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner {
  position: fixed;
  top: 70px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner a {
  text-decoration: none;
  color: #5a5683;
}

#slideout:hover {
  /*left: 320px;*/
  /* left: 380px; */
    left: -155px;
}

#slideout:hover #slideout_inner {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner a:hover {
  color: #FF6824;
}



/* ---------- Second Tab ---------- */


#slideout-fire {
  position: fixed;
  top: 220px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-fire img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_fire {
  position: fixed;
  top: 250px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_fire a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-fire:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-fire:hover #slideout_inner_fire {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_fire a:hover {
  color: #FF6824;
}



/* ---------- Third Tab ---------- */


#slideout-medical {
  position: fixed;
  top: 400px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-medical img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_medical {
  position: fixed;
  top: 430px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_medical a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-medical:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-medical:hover #slideout_inner_medical {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_medical a:hover {
  color: #FF6824;
}


/* ---------- Fourth Tab ---------- */


#slideout-tactical {
  position: fixed;
  top: 580px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-tactical img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_tactical {
  position: fixed;
  top: 600px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_tactical a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-tactical:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-tactical:hover #slideout_inner_tactical {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_tactical a:hover {
  color: #FF6824;
}

Answer 1

关于你的transition；您正在使用 transition-duration 属性而未设置实际的 transition。将此 shorthand 属性添加到您的选项卡，它应该可以解决您的问题： transition:all 0.5s ease-in-out; 侧面导航的功能很时髦，因为您的 transforms 保持 450 像素的宽度并覆盖相邻的标签。

旁注：如果您不熟悉 Chrome Dev Tools，这里是寻找问题（如这些）答案的好地方。

Answer 2

看起来只有一个悬停时导致多个选项卡展开的原因是主选项卡容器的所有四个 #slideout_inner-... div 子项上的 width: 400px 声明（#slideout-...).

这个宽度覆盖的区域比它所属的选项卡大得多；它与其他选项卡重叠。在 Chrome 中的测试中，如果您只是删除此宽度，重叠部分就会消失，并且宽度只会扩展到足以填充其内容。

因此，第一步：删除上面提到的所有 div 个子项的 width: 400px。这似乎解决了悬停问题。过渡现在很顺利。但是内容现在从视图中消失了。

要解决此问题，您需要调整相同的四个 slideout_inner-... div 个子项的位置。

尝试将 margin-left: 175px 添加到每个规则。

您可能仍需要稍微调整一下位置，以使文本与您的喜好对齐。但是我认为上面的调整解决了你问题中提出的两个问题。

演示：http://jsfiddle.net/wf0658ko/1/

如何修复导航菜单上的悬停和过渡？

How can I fix the hover and transition on my nav menu?

html

css

navigation

hover

css-transitions