Showing/hiding navigation bar with smooth animation

I’m currently developing a site which is www.printingshoppers.com and I want to animate the navigation bar “Member Discounts” that slides out and slides back when not clicked.I was thinking, if that would be a good idea to make the site more catchy.Can you help me? Thanks!:slight_smile:

Hi abbeygilmore. Welcome to the forums. :slight_smile:

One thing you could do, for a simple little effect, is change the HTML to this:

<div [COLOR="#FF0000"]class="butt"[/COLOR]>
  <a href="http://www.printingshoppers.com/?page_id=574"> 
    <img src="http://www.printingshoppers.com/wp-content/uploads/2013/02/MemberDiscountButton.png">  
  </a>
</div>

and then add this to your CSS:

.butt {
 position:absolute; 
 right:-88px;
 top:200px;
 width:84px;
 height:226px; 
 z-index:960;
}

.butt a:hover img {
 padding-left: 6px;
}

.butt img {
 -webkit-transition: all linear .3s; 
 -moz-transition: all linear .3s; 
 -o-transition: all linear .3s; 
 -ms-transition: all linear .3s; transition: all .3s;
}

Abbeygilmore,

You could use CCS3 with pseudo classes. Using this code, when someone hovers over the button, a pop appears that is generated completely by CSS3. Note, I just included some arbitrary colors and transparency settings. You can change those to whatever you wish.

So your menu item could be

<span class=&#8221;menuitem&#8221;><a href=&#8221;link-to-special-offer&#8221;></a></span>

And your corresponding CSS could be

.menuitem a{
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 2px;
    outline: none;
    background: transparent url(../your-button-img.jpg) no-repeat top left;
    position: relative;
}
		
		.menuitem a{
    background-position: 0px 0px;
}		
.menuitem a span {
	width: 200px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	left: 50%;
	margin-left: -64px;
	font-family: 'Century Gothic', Georgia, serif;
	font-weight: 600;	
	font-style: bold;
	font-size: 14px;
	color: #000000;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: left;
	border: 2px solid #719DAB;
	background: #FFFFFF;
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	visibility: hidden;
}

.menuitem a span:before,
.menuitem a span:after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
	visibility: visible;
}
.menuitem a span:after {
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #719DAB;
	visibility: visible;
}
.menuitem a:hover span {
	opacity: 0.9;
	bottom: 70px;
	visibility: visible;
}

Hope that helps,

Shawn

Hi ralph.m and smanaher,

Thank you for your help! Here I updated my site http://www.printingshoppers.com/ tell me if it’s fine.

Abbey

It just may not work for some people, such as those on smaller screens. It’s possible that the button itself won’t be seen, but a lot of smaller screens won’t see that popup (it will be off screen). Perhaps you should put the popup on the left instead.

Hi Ralph,

That’s a good idea! I’ll update you soon I finished updating the site. Thank you.

Abbey