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

Question

I'm building a vertical tabbed navigation menu.
I'm having two problems when I hover over the tabs.
First, only the tab that is hovered is supposed to expand. But what actually happens is multiple tabs expand.
Second, the expand transition is not smooth. It's very jerky and annoying.
I've gone through my code but can't figure it out. What am I missing?
Each tab should expand smoothly and by itself when hovered.
Any feedback would be appreciated.
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>ACCESSORIES</h4><br />
<h4>LXFB30</h4>
<h4>LXGC-HD</h4>
<h4>LXFGS</h4>
<h4>LXFGS-HD</h4>
<h4>LXMK-A</h4>
<h4>LXMK-B</h4>
<h4>LXMK-C</h4>
<h4>LXMK-D</h4>
<h4>LXMK-E</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>FIREFIGHTER</h4><br />
<h4>LXFB30</h4>
<h4>LXGC-HD</h4>
<h4>LXFGS</h4>
<h4>LXFGS-HD</h4>
<h4>LXMK-A</h4>
<h4>LXMK-B</h4>
<h4>LXMK-C</h4>
<h4>LXMK-D</h4>
<h4>LXMK-E</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>MEDICAL</h4><br />
<h4>LXMB5-HP</h4>
<h4>LXMB15</h4>
<h4>LXMB20</h4>
<h4>LXMB30</h4>
<h4>LXMB35</h4>
<h4>LXMB40</h4>
<h4>LXMB50</h4>
<h4>LXMB65</h4>
<h4>LXMK-A</h4>
<h4>LXMK-B</h4>
<h4>LXMK-C</h4>
<h4>LXMK-D</h4>
<h4>LXMK-E</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>TACTICAL</h4><br />
<h4>LXPB10</h4>
<h4>LXPB40</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

It looks like what's causing multiple tabs to expand when only one is hovered is the width: 400px declaration on all four #slideout_inner-... div children of the main tab container (#slideout-...).
This width is covering an area much greater than the tab it belongs to; it's overlapping other tabs. In testing in Chrome, if you just remove this width, the overlapping disappears and the width expands only enough to fill its content.
So, step one: remove width: 400px on all div children referenced above. This seems to fix the hover issue. The transitions are now smooth. BUT the content is now gone from view.
To fix this, you need to adjust the positioning in the same four slideout_inner-... div children.
Try adding margin-left: 175px to each rule.
You may still need to tweak positioning a bit in order to align the text to your preferences. But I think the adjustments above solve both problems raised in your question.
DEMO: http://jsfiddle.net/wf0658ko/1/

Answer 2

Regarding your transition; you are using the transition-duration property without setting an actual transition.
Add this shorthand property to your tabs and it should solve your problem:
transition:all 0.5s ease-in-out;
The function on the side navigation is funky because your transforms maintain 450px of width and are covering the adjacent tabs.
Side note: if you aren't familiar with Chrome Dev Tools, it's a good place to find answers to your problems (like these).