|
Apply a little imagination and you can get a lot more out of your investment in our extensions. This is just one example.
Lets take a look at two of our best-selling extensions - Neonix Toggle Content and Neonix TD Rollover. We'll create something very simple with both, combine the two, then gradually get something that looks more complicated. In the end you'll see that what makes this cool is not necessarily the functionality that the extensions bring - even though they play a key role - but how they are applied and how they are presented.
Lets Begin
Ok, lets say that we have a site that requires a column of navigation on the left side of the page and that it looks like this:
Also, each of the above links has sub navigation too, but since we don't have any pop-up menus or other forms of advanced navigation the user is forced to drill down into the site to find information. Functional but not the best-case scenario.
Use Neonix TD Rollover to Add a Rollover Effect
While the above table works, its not too pretty... lets start fixing this up by applying Neonix TD Rollover to the table cells:
Ok, that's a little better.... but lets not use HTML text... in fact, lets get away from those boxy corners and get rid of the table border. Lets use a GIF that has our text and lets round out our corners and do a fade rollover instead. The trick here is to use a transparent GIF.
Add Transparent GIF's
No we're talking! Our fade effect is appearing through the transparent portions of the GIF! Pretty cool huh? If we didn't use the fading rollovers then the above might as well be your everyday image rollover - instead we've got something unique and fun and that doesn't require Flash or Java!
Also, each one of the above images clocks in at under 1k. If the above were your regular everyday non-fading image rollovers we would also have the burden of loading each individual rollover state - in effect two images per rollover. We've cut everything in half and threw in a fade effect to boot. Not bad!
Add Sub Navigation
Ok - things are looking good - but how to address the sub navigation. You've probably already said to yourself that we should just put the sub nav under each main nav... fine, lets do that:
 |
|
 |
|
 |
- Mexico
- Honduras
- Costa Rica
|
 |
- Red Peaches
- Golden Peaches
- Peach Peaches
|
 |
- Green Grapes
- Red Grapes
- Seedless Grapes
- Sweet Grapes
|
That's a lot of stuff! Lets hide some of it!
Applying Neonix Toggle Content
Lets use Neonix Toggle Content to hide the sub nav so that the user can see all our main navigation at the same time instead of having to scroll up and down to see what there is.
Ok.... that's a little better but its kind of ugly and is still taking up too much space. What we want to do is to dump the bulleted list in favor of a table and have the sub nav expand when we click on each of the main navigation buttons.
Adjust the Toggle Items
What we're going to do here is use the code in the + Expand link and wrap it around each one of our GIF images. When we do this, the GIFs will activate the Toggle, like so:
As of version 1.4.5 of Neonix Toggle Content there is a new setting that lets us do the above - "Ignore Toggle Trigger". Checking this option means that the extension will ignore the link used to toggle our content and won't swap it out with the default text. In this case, it just ignores our GIF's yet still provides the toggle functionality!
Wrapping up the effect with more Neonix TD Rollovers
We're almost done here... lets jazz up the sub navigation links. I'm going to remove the bullets and insert a table for each subnav so that I can use Neonix TD Rollover to add rollover effects.
There you have it.... our finished navigation.... note that I also used some more little gifs so that I could get a nice curve along the left edge of the sub-navigation.
The key learning from all of this is that you shouldn't limit yourself only to what the extensions do. With a little creativity you can easily create something cool!
The extensions used to create this navigation:
|
California
