Alt Visions

I recently finished Gary Vaynerchuk’s book “Crush It” and one the things he covered was the need for some kind of call to action button on your website as a way to create return visitors and further their interaction with your brand, among other things. These buttons don’t have to just be about buying products such as a book, they can also be links to your social networks or anything that will further engage your audience. It seems like such an obvious idea after reading it but for some reason I had completely left anything like this off of my own website. To remedy this, I decided to add a follow me tab with drop down links to my main social networking sites and my rss feeds.

This is where I get the part that I want to share with everyone. While trying to figure out how to implement this new button, I stumbled upon a new way to create drop down menus with out the use of javascript. Now I’m sure someone else has figured this out as well but I was excited that I managed to do it on my own and thought someone else might find it useful as well. If you would like to see an example of what I am going to describe, just hover over the “follow me” button on the left side of this site.

Before you read on, I want to preface this section by letting everyone know this is my first attempt at writing a technical code explanation so if something doesn’t make sense or I got anything wrong, let me know in the comments and I will do my best to clarify. So, Let’s get down to it and take a look at the code. The html is nothing more than a unordered list made up of the various links you want to display:

<ul id="call-to-action">
  <li><a href="http://twitter.com/patrickrhill/">Twitter</a></li>
  <li><a href="http://www.flickr.com/photos/patrickrhill/">Flickr</a></li>
  <li><a href="http://feeds.feedburner.com/AltVisionsDesign">RSS</a></li>
</ul>

The magic happens when you add the CSS. Basically all that is happening here is the content of the unordered list is being hidden and replaced with an image of text saying “follow me”. When someone hovers over this, the image is removed and the list full of your links is allowed to expand. You can then style the links however you see fit. Keep in mind though that if you want all of the links to remain symmetrical and line up correctly, you will need to display them as block elements.

#call-to-action {
		min-width: 30px;
		position: absolute;
		left: 0px;
		height: 120px;
		top: 457px;
		text-indent: -3000px;
		min-height: 50px;
		background: black url('images/follow-me.png') no-repeat center center;
}

#call-to-action:hover {
		text-indent: 0px;
		height: auto;
		background: black none;
}

#call-to-action a {
		display: block;
		padding: 5px 10px;
		margin: 10px 0px;
		color: white;
}

#call-to-action a:hover {
		padding: 5px 10px;
		margin: 10px 0px;
		background: white;
		color: black;
}

To finish up, remember that this technique doesn’t have to be used solely in this way; you can apply it to any type of navigation you like. I’m currently experimenting with some new ways to utilize this and I hope to share them soon. Well, that’s all I can think up for this post. I hope someone finds this useful!