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!
Hi abbeygilmore. Welcome to the forums.
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=”menuitem”><a href=”link-to-special-offer”></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