如何在导航菜单上修复悬停和转换？

时间：2015-09-16 01:37:36

标签： html css navigation hover css-transitions

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

当我将鼠标悬停在标签上时，我遇到了两个问题。

首先，只有悬停的标签应该展开。但实际发生的是多个标签扩展。

其次，扩张过渡并不顺利。它非常生涩和讨厌。

我已经完成了我的代码，但无法理解。我错过了什么？

每个标签应该在悬停时顺畅地展开。

任何反馈都将不胜感激。

直播网站：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;
}

2 个答案:

答案 0 :(得分：1)

在主要标签容器（width: 400px的所有四个#slideout_inner-... div子项上#slideout-...声明时，看起来导致多个标签扩展的情况是什么？ ）。

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

所以，第一步：删除上面引用的所有div子节点上的width: 400px。这似乎解决了悬停问题。过渡现在很顺利。但是现在内容已经消失了。

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

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

您可能仍需要稍微调整位置，以便将文字与您的偏好对齐。但我认为上述调整可以解决您提出的问题。

DEMO：http://jsfiddle.net/wf0658ko/1/

答案 1 :(得分：0)

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

旁注：如果您不熟悉Chrome Dev Tools，那么这是找到问题答案的好地方（如下）。

相关问题
最新问题