Showing/hiding navigation bar with smooth animation

I’m currently developing a site which is 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=""> 
    <img src="">  

and then add this to your CSS:

.butt {

.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;


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,


Hi ralph.m and smanaher,

Thank you for your help! Here I updated my site tell me if it’s fine.


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.