Streamline your menu

I had a request today for a way to better display the side menu, especially when there are a lot of sub sections. I have developed a method to hide any submenu sections (.menuLevel2 - menuLevel9) that are below the top level (.menuLevel1) and then have them shown when someone passes their mouse over the top level.

Check out this example to get a feel for what I mean:

http://www.printfection.com/teeplates

Sections 1 and 2 have sub menu sections that only show on hover and then dissappear again when the mouse goes away.

To implement this to your store, all you have to do is add the following lines to your base HTML. If you have used any of my other tricky type things, you will probably already have the line in red, so no need to add it again, just make sure compact.js code goes after it.


 <script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"></script>
 <script src="http://www.australele.com/usw/js/compact.js" type="text/javascript"></script>

You can also see this in action at a few stores inclding:

Comments (0) 15.11.2007. 13:41

Adding a "Send to a friend" link on your product pages

Many online stores have a link on their product pages that allow a
shopper to send an email link to a friend to let them know about the
product. Unfortunately, Printfection does not have this feature built
in to the storefront - until now!!

Continue reading Comments (0) 15.09.2007. 13:05

Adding a Slide Show

I have had a couple of requests for a product slide show type of thing for people's stores. If this is something you would also like, you might like to give this one a try:

http://www.printfection.com/ukulele#slideshow

Step 1: Script - Add the following to the bottom of your Base HTML


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"></script>
<script src="http://www.australele.com/usw/js/jq-if.js" type="text/javascript"></script>
<script src="http://www.australele.com/usw/js/sshow.js" type="text/javascript"></script>
<script type="text/javascript">
var ssSpeed = "slow";
var ssTimeout = 4000;
var ssHeight = "180px";
</script>

The three variables can be set as follows. ssSpeed controls the speed of transition and can be set to slow, normal or fast. ssTimeout is the time in milliseconds that each image is shown for. ssHeight is the height of the slideshow.

If you have used any of my other code based tricks, you will not need the line in Red.

Step 2: CSS - Not a huge amount of CSS required for this one, you will need to have these two lines:


#sshow {visibility: hidden}
#sshow img {border:none}


Step 3: HTML - Finanly You will need to put in some HTML at the point on your page that you wish the slideshow to be. This can be put anywhere. You will of course want to use your images and links.

 


<div id="sshow">
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
<p><a href="http://yourlink"><img src="http://yourimage"/></a></p>
</div>



The slide show will treat each <p></p> as a seperate slide and will fade in and out of each one. The example I have here is using images, however you can have text, images or both.

Hopefully this is useful to some of you out there. If you do use it, let me know and I will link you on the blog.

Comments (0) 15.08.2007. 14:30

<< First < Previous [4 / 5] Next > Last >>