FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


HTML/CSS menu replacement





ChunkyBustout
Hello all,

Would anyone be so kind as to help me convert my existing navigation menu from javascript to HTML/CSS? Currently, the images don't always load properly and, from what I've been reading, CSS would be about to do the same thing without an issue. I've been to several tutorials on this but none of them use images for the button's initial state and mouseover. I want it to do exactly what it's doing now just want do it without javascript.

Thanks.
jasperlevink
I'd think you'll still need JavaScript?
Jiltedcitizen
Here is a css menu generator
http://www.webmaster-toolkit.com/css-menu-generator.shtml
http://www.meyerweb.com/eric/css/edge/menus/demo.html
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml
or tons of stuff on google
http://www.google.com/search?sourceid=navclient&ie=UTF-8&rls=GGLG,GGLG:2005-20,GGLG:en&q=css+menu
carriage_return
Dear ChunkyBustout:

Glad to see you again in this parts. I was reading through your post, trying to get a feel of your problem, but the fact is that I don't know what kind of menu are you trying to mimic. First of all, I would need to look at it, and I can't see any links to your site in your sig or anything of the sort. Second, while I'm not by far a professional in this matters, I would be glad to do it; quite frankly I have fun trying to tackle this things.

I have also seen that Jiltedcitizen posted a few utilities that could come in handy, whether you use them or not, I'd love to see how it went. And of course, if you need my help, just say so.

carriage_return
ChunkyBustout
Jiltedcitizen wrote:
Here is a css menu generator
http://www.webmaster-toolkit.com/css-menu-generator.shtml
http://www.meyerweb.com/eric/css/edge/menus/demo.html
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml
or tons of stuff on google
http://www.google.com/search?sourceid=navclient&ie=UTF-8&rls=GGLG,GGLG:2005-20,GGLG:en&q=css+menu


None of these show how to do the menu with images. Thank you, though.
Jiltedcitizen
Yes they do, check harder. 3rd one uses images.
ChunkyBustout
carriage_return wrote:
Dear ChunkyBustout:

Glad to see you again in this parts. I was reading through your post, trying to get a feel of your problem, but the fact is that I don't know what kind of menu are you trying to mimic. First of all, I would need to look at it, and I can't see any links to your site in your sig or anything of the sort. Second, while I'm not by far a professional in this matters, I would be glad to do it; quite frankly I have fun trying to tackle this things.

I have also seen that Jiltedcitizen posted a few utilities that could come in handy, whether you use them or not, I'd love to see how it went. And of course, if you need my help, just say so.

carriage_return


Under my sig is a little button with a house and "www" on it. That will show the menu I want to mimic. At http://thecbp.150m.com is the new converted menu I'm testing but the images are getting misnamed and some aren't showing at all! I think I have the coding part ok but I can't figure out what is causing the image filename mixup.

After further testing, on Frihost this time, I see that I have the solution. The other server I'm testing it on is just crappy Laughing

The converted menu can be seen here:
http://www.chunkybustout.com/frihost_menu.html

Thanks all!
ammonkc
I really like the tutorials by 'a list apart'. they have a bunch of them about making menus usng css. however, I don't think that you will be able to drop javascript altogether. most of the css navigation menus that I have seen still use javascript to make it cross browser compatible. but the css does the bulk of the work.
nathan99
In my opinion, when you make a html based web site you should run it like this.

Have a html page with a SET format
Use CSS to set colours, widths, styles, padding, formats etc..
and jave script to load in menus.

This is because then when you want to add to the menu it is easy Very Happy and you only have to add to that javascript, and then the styles are apart and dont get confused.

Also, i think the menus should be run in js so all you need to do is set up arrays and then utilise the "for" code to generate you links and identifierss in 3 lines!! plus the arrays of course. lol, just my thoughts
ChunkyBustout
Update - I have managed to get away from using Javascript for my menu and the only thing I use it for now is my news scroller and the date/time block in the corner. It (the page) comes up a lot faster now and the images don't need to be preloaded! Completely in HTML/CSS!

Yes, I am a happy camper and now I can focus on the content!
digibluez
css makes wonders, looks much better with div:hover. Good that you finnaly got the result you wanted.
ChunkyBustout
I have to admit it's not exactly what I wanted but it'll evolve into what I want soon. Smile

What do you mean about the div:hover to make it look better? What could it do that's better?
Related topics
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.