Sean James Sean James - 2 months ago 11
jQuery Question

Adding image (tab) below pop down nav bar

Hi is it possible to add the (image) tab below outside the red border and still be responsive when the cursor is over the tab.

What I'm trying to achieve is so the tab sticks out and when the mouse hovers over the tab the menu pops out.

Here is an example but with the tab under the navigation bar when moving the mouse cursor over or inside the red border. The issue is the tab is also hidden.



* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 110px;
border: 1px solid red;
background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png");
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;

}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}

<nav>

<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>

<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>




</ul>
</nav>




Answer

This should get you going in the right direction. If you want to handle this with CSS only (no javascript) and have it responsive especially if your height of your nav bar changes, I would set up media queries that specify a fixed height for your nav at each of whatever breakpoints you determine are best. Reason for using a fixed height is so that you can offset the menu to that exact dimension each time.

I moved your tab image into the HTML instead of using it as a background image. I noticed the image has a lot of whitespace around it. I would trim the image down and remove that to make positioning things in the css easier. I didn't alter that but if you do, you'll need to alter the css a bit to accommodate the new image size. I've kinda fudged it a bit to center it, but that extra white space kinda ruins the centering. You really want left: 50%, then a negative margin of half the width of the image to center it.

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
  position: relative;
  top: -70px;
  left: 0;
  right: 0;  
  height: 70px; 
  border: none;    
  background-repeat: no-repeat;
  background-position: center; 
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  z-index: 5;
  padding: 0;
  text-align:center;
}
#img-toggle {
  margin: 0 auto;
  padding: 0;
  position:absolute;
  top: -3px; /* fix this when you've trimmed your image */
  left: 32%; /* fix this when you've trimmed your image */
  }
nav:hover, nav.toggleNav {
  top: 0px;
}
ul {
  height: 70px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a137a7;
  font-family: 'Source Sans Pro', sans-serif;
 
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
  background-color: #732878;
}
.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family: 'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7;
}
<nav>

  <ul>
    <li>
     <a href="/"a target="_blank">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
      </a>
    </li>
  </ul>
  <img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/>
</nav>

Comments