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

Question

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

当我把鼠标悬停在标签上时，我有两个问题。

首先，只有被悬停的选项卡应该展开。但实际情况是多个选项卡展开。

第二，扩张过渡不顺利。这东西又干又烦。

我已经把代码看了一遍，但还是看不懂。我错过了什么?

当鼠标悬停时，每个选项卡都应该平滑地展开。

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

Live site: 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

看起来，当只有一个标签被悬停时，导致多个标签展开的原因是主标签容器(#slideout-...)的所有四个#slideout_inner-...div子元素上的width: 400px声明。

这个宽度覆盖的区域比它所属的标签页大得多;它与其他标签重叠。在Chrome测试中，如果你只是删除这个宽度，重叠就会消失，宽度只扩展到足以填充其内容。

那么，第一步:删除上面引用的所有div子元素上的width: 400px。这似乎解决了悬停问题。现在转换很平滑。但是现在内容已经从视图中消失了。

要解决这个问题，您需要在相同的四个slideout_inner-...div子元素中调整定位。

尝试在每条规则中添加margin-left: 175px。

您可能仍然需要稍微调整一下定位，以便将文本与您的偏好对齐。但我认为上述调整解决了你问题中提出的两个问题。

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

Answer 2

关于你的transition;您正在使用transition-duration属性而没有设置实际的transition。将这个速记属性添加到制表符中，它应该可以解决您的问题:transition:all 0.5s ease-in-out;侧边导航的功能是时髦的，因为你的transforms保持450像素的宽度，并覆盖相邻的选项卡。

旁注:如果你不熟悉Chrome开发工具，这是一个很好的地方找到你的问题的答案(像这些)。