Dreamweaver Extensions
 

Inspiration << Back

Creating Cool Menus Using Neonix.net, LLC Extensions

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:

Oranges
Grapefruit
Bananas
Peaches
Grapes

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:

Oranges
Grapefruit
Bananas
Peaches
Grapes

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

Our new menu with some images thrown in
Screen capture from Photoshop

Click here to see the settings I used when I exported this GIF

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:

  • California
  • Florida
  • By the bag
  • By the crate
  • 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.

+ Expand

  • California
  • Florida

+ Expand

  • By the bag
  • By the crate

+ Expand

  • Mexico
  • Honduras
  • Costa Rica

+ Expand

  • Red Peaches
  • Golden Peaches
  • Peach Peaches

+ Expand

  • Green Grapes
  • Red Grapes
  • Seedless Grapes
  • Sweet Grapes

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:

Our new adjusted navigation... click on one!
A screen Capture of Neonix Toggle Content - note that "Ignore Toggle Trigger" is checked.
  • California
  • Florida
  • By the bag
  • By the crate
  • Mexico
  • Honduras
  • Costa Rica
  • Red Peaches
  • Golden Peaches
  • Peach Peaches
  • Green Grapes
  • Red Grapes
  • Seedless Grapes
  • Sweet Grapes

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.

Our new adjusted navigation... click on one!

Screen Capture of Neonix TD Rollover

California
Florida
By the Bag
By The Crate
Mexico
Honduras
Costa Rica
Red Peaches
Golden Peaches
Peach Peaches
Green Grapes
Red Grapes
Seedless Grapes
Sweet Grapes

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:

 

 

© 2001-2004 Neonix.net, LLC. All rights reserved

Privacy Statement // Terms/Conditions/License