Shorten Navigation - Post ID 217262

User 243515 Photo


Registered User
508 posts

I was handed this website when I got too nosy and asked why it wasn't up to date. It is for the Tacoma Highland Games in Tacoma, Washington, http://www.tacomagames.org

I got my answers when I looked inside. The thing that hit me first was the unmanageable Navigation panel. My predecessor had created an image and then used coordinates to delineate the links. I edited the image by making a template of each option, then used HTML and CSS to create a little more control and ease of maintenance (I did other stuff but that's another story).

I want to shorten the nav panel by converting it to a vertical "fly-out" menu using the image templates. I have been searching Google for several days now and I can only find the flat menu design listed. Does anyone know where I could find a tutorial on CSS designed flyout menus using images?

User 187934 Photo


Senior Advisor
20,266 posts

You use the same css you would for any other css menu but you use background images instead.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 38401 Photo


Senior Advisor
10,951 posts

Do you have the HTML Editor (paid version)? If so then you should also have a CSS menu builder right in there. Coffeecup is also working on their CSS Menu Maker too, although it's not released yet, but should be soon I'm thinking. There are also a handful of programs out there to design CSS3 menus with, which are imageless for the most part or you can use images with them too. http://css3menu.com should show you the basics of it, not sure if they have a free version, but if not you may want to hold off until CC releases theirs. Check out the menu builder in the HTML Editor to help you at least get started with creating one that you can build on as you go for now too. hope that helps :)
User 122279 Photo


Senior Advisor
14,615 posts
Online Now

Yeah Greg, I recognise that menu as a product of Xara Menu Maker. It was all based on js. I've used it myself in 'the old days', but it is so much easier to use css menus. Follow the advice given by Eric and Jo Ann, and you can use the images as the button background. Good luck.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 243515 Photo


Registered User
508 posts

Eric Rohloff wrote:
You use the same css you would for any other css menu but you use background images instead.


I had thought about that but at first couldn't get the thing to work, then forgot about it, thanks for joggin' my memory Eric!

User 243515 Photo


Registered User
508 posts

Jo Ann wrote:
Do you have the HTML Editor (paid version)? If so then you should also have a CSS menu builder right in there. Coffeecup is also working on their CSS Menu Maker too, although it's not released yet, but should be soon I'm thinking. There are also a handful of programs out there to design CSS3 menus with, which are imageless for the most part or you can use images with them too. http://css3menu.com should show you the basics of it, not sure if they have a free version, but if not you may want to hold off until CC releases theirs. Check out the menu builder in the HTML Editor to help you at least get started with creating one that you can build on as you go for now too. hope that helps :)


I am using the most current CC HTML Editor and as far as CSS goes, I have Style Master, however, I can't get it loaded to Windows 7 so I've been using NotePad++ and the HTML Editor and trying to get my "brain housing group" to remember the many commands ... fun:P
I checked out that CSS Menu website ... I didn't have much time last night, so I'll spend more time today, thanks Jo Ann.
User 243515 Photo


Registered User
508 posts

Inger wrote:
Yeah Greg, I recognise that menu as a product of Xara Menu Maker. It was all based on js. I've used it myself in 'the old days', but it is so much easier to use css menus. Follow the advice given by Eric and Jo Ann, and you can use the images as the button background. Good luck.


Hi Inger,

Yep, I thought someone would. I cringed when I saw it, immediately stripped the code and edited the image to make individual images so I could use them in an unordered list. I saw it when I first used the Xara Image editor (which I still use).

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.