SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member abbeygilmore's Avatar
    Join Date
    Mar 2013
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face 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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi abbeygilmore. Welcome to the forums.

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

    Code:
    <div class="butt">
      <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:

    Code:
    .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;
    }

  3. #3
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <span class=”menuitem”><a href=”link-to-special-offer”></a></span>
    And your corresponding CSS could be

    Code:
    .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

  4. #4
    SitePoint Member abbeygilmore's Avatar
    Join Date
    Mar 2013
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by abbeygilmore View Post
    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.

  6. #6
    SitePoint Member abbeygilmore's Avatar
    Join Date
    Mar 2013
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

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

    Abbey


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •