18 replies [Last post]
SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 10 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Hey there....

In short, I'm trying to make a picky drop down menu thats image friendly.

The first one I coded was based on the Sons of Suckerfish tutorial, which is mainly text based. Turns out I can't use text due to them wanting a certain font - blah!

So now I have to make a navbar that is image based, with a rollover image (so far I've used dreamweavers Swap_Images behaviour ), and it brings up a drop down menu.

The drop down menu, I've found a nice javascript based one here:
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

And that works well. However, It plays havoc with Dreamweavers Swap_Images behaviour, and I can have one or the other!

In short:
Is there another way I can change the image on highlight (css-background's been ruled out)
A drop down menu that will play nice with dreamweaver.

At this point I'm ripping my hair out pretty much, having already had a working text based version and needing to go from the ground up.

cressaid.brettjamesonline.com/albins/dropdownsr1.html (avoiding link whoring)
Is what im working on, although because its multiple dropdowns and a mix of styles of doing it in the one file, its hell to debug Tongue More after suggestions of what to do

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Sounds likee this might

Sounds like this might cover what you're after.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 10 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Thank you tyssen, The

Thank you tyssen, The working example looks good and I'll set on recoding it all for a proper menu .

One small question though, its related to targeting:

.nav { list-style: none; } .nav li { float: left; padding-bottom: 10px; } .nav li, .nav li em { width: 147px; height: 27px; } Now, the html its referring to is:


  • Submenu 1.1

  • Submenu 1.2

  • Submenu 1.3



  • About Us


    • Submenu 2.1

    • Submenu 2.2

    • Submenu 2.3



    *edit* looks like it literally takes the code!
    There is a class, and then inside the class is a < . em . > tag. (i put dots in the middle because it made the post go italic!)

    Notice how there is a < . em . > tag for each item in the list.

    Currently with
    .nav li, .nav li em { width: 147px; height: 27px; }
    Its setting every top list item to have a width of 147px, and he suggests to target each one individually to put in your own widths.
    How can I do that?

    I've tried:
    .nav li home em {width:190px; height: 27px;}
    To test it, but it doesn't appear to work that way... any thoughts about targeting it correctly?

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 7 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    SuperRoach wrote:.nav li

    SuperRoach wrote:
    .nav li home em {width:190px; height: 27px;}

    It should be .nav li.home em { .... } or if you used IDs instead, .nav li#home em.

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    thanks for the tip re:

    thanks for the tip re: placing code in a readable form.

    I just clicked on that the original tutorial was from your site - thanks for writing it, its excellent!!

    The test I've done is here:

    http://cressaid.brettjamesonline.com/albins/navbarR2.html

    I've tried your method of targeting, and it worked in dreamweaver! Smile when I preview in firefox at least though, the images are collapsed.

    Heres a screenshot with the code I tried:

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 7 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    You've got to apply the

    You've got to apply the width to the em and to the container, so:

    .nav li.home, .nav li.home em {width: 76px; height: 25px; } .nav li.aboutus, .nav li.aboutus em {width: 88px; height: 25px; } nav li.link3, .nav li.link3 em {width: 128px; height: 25px; }

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    Ah, I see. Now I understand

    Ah, I see. Now I understand the reason you had the , in your original tute.

    Tyssons code works!:
    http://cressaid.brettjamesonline.com/albins/navbarR3.html
    Appears to work brilliant in firefox.

    However, I think a sideeffect is that I've broken all Internet explorer support Sad I'll look into it to see I'm missing anything.

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    Well, I'm stumped. I can't

    Well, I'm stumped. I can't seem to get around this problem for the moment.

    I have an idea what might be wrong though - ty's example page works in IE6:
    http://www.tyssendesign.com.au/examples/IR-navbar.html

    But if I save it, and update the css to point to the right image, no dice. Maybe I'm missing an external file somehow when I save it, but it looks Like i've got a carbon copy...

    Such a powerful navbar though! can't wait to fully learn this method.

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 7 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    It seems that IE6 needs the

    It seems that IE6 needs the width specified on .nav li, even if you override later with different widths for the different list items:

    .nav li, .nav li em {width: 128px; height: 25px; } li.home, li.home em {width: 76px; } li.aboutus, li.aboutus em {width: 88px; } li.link3, li.link3 em {width: 128px; }

    You've also left off:

    body { margin: 1em; font: 83%/140% Verdana,Arial,Helvetica,sans-serif; behavior: url(hover.htc); }

    You can either use the javascript found in the original Suckerfish article or you need to use the hover.htc which you can get from: http://www.xs4all.nl/~peterned/csshover.html

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    It seems that IE6 needs the

    It seems that IE6 needs the width specified on .nav li, Oh no Sad Does that mean I won't be able to use a variable width method for IE then?

    *edit*
    I added the body {} code and the hover htc you mentioned, worked a charm then.

    http://cressaid.brettjamesonline.com/albins/navbarR3bare.html appears to half work now. Custom widths and all. I'm most impressed that the rollovers work!!

    The drop down is only half functional though - still looking into that part

    *edit2*
    Updated the link above to have the bare amount of li in the html to try and isolate whats wrong.
    Picture shows that dropdowns do work, however it looks like a set isn't hiding somehow..

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    Sorry for double posting,

    Sorry for double posting, but so far I've got it to work, woohoo! *jumps*
    cressaid.brettjamesonline.com/albins/my-navbar.html
    behaves the same in ie and ff.

    I'll go through the code and see if I need to strip anything out, but oh. my. god. You have no idea how much of a relief it is to get something as awesome as this working.

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 7 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    I've realised what was going

    I've realised what was going wrong with the widths before: .nav li refers to both the top level list items and the submenu list items. The submenu list items need a width to stop them going crazy in IE6, so you could probably do away with the width on .nav li and instead add a width to .nav li li.

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    You are right, and I was

    You are right, and I was working on that when you posted actually.
    You can target a specific dropdown in the list too, for example:
    .nav li.Products li {width:267px;}

    At some point I think I broke the code while working on it, but it works completely in firefox now, heres a work in progress page:

    http://cressaid.brettjamesonline.com/albins/contactusWORKING.html
    *edit* I got it working again!
    Dropdowns appear to work in IE, however the navigation bar expands itself from 24px to 34px! It does this in Firefox too, but appears fine in Safari. Weird!

    deviantz
    Offline
    Regular
    philippines
    Last seen: 13 years 2 weeks ago
    philippines
    Joined: 2007-04-12
    Posts: 25
    Points: 0

    Hi guys, my drop down menu

    Hi guys, my drop down menu similar of what you guys talking about.. but i have a problem because opcaity not valid css, ang i want to get rid the grey bottom line.. can you help me? i already post a new topic, with CSS Drop down problem subject. http://www.iczalazar.com, thanks!

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    You should have made a new

    You should have made a new topic for it then..

    Explain it better in a new thing. Basicly, the grey area is too tall, without looking into it further. Maybe instead of the grey border, you could use a png and transperancy hacks... but if it doesn't work in even firefox, somethings wrong i guess.

    Is anyone able to pin point why the code above with tyssens style dropdowns pads out extra space in Firefox and internet explorer? it works fine in Safari, talk about crazy

    *edit* FOUND IT!!

    .nav li { float: left; padding-bottom: 0px; }
    ^---- the padding-bottom was 10px in the original, fixed.

    Wow, working code, im so happy.

    Your code rocks tyssen

    deviantz
    Offline
    Regular
    philippines
    Last seen: 13 years 2 weeks ago
    philippines
    Joined: 2007-04-12
    Posts: 25
    Points: 0

    Sir, can you give me the

    Sir, can you give me the working sample link of you drop down..

    thanks!

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    Sure! http://cressaid.brettja

    Sure!
    http://cressaid.brettjamesonline.com/albins/contactus.html

    Transperant menus are thanks to a iepngfix script.

    Have a pick at it and see if you can find any other bugs, but as it is you can:

    Set the width of each drop down
    Set the width of each button

    It is a tad complex to set the first buttons up, but I wouldn't really do it any other way - its very customizable.

    deviantz
    Offline
    Regular
    philippines
    Last seen: 13 years 2 weeks ago
    philippines
    Joined: 2007-04-12
    Posts: 25
    Points: 0

    I like you drop down menu

    I like you drop down menu sir.. can use it?

    if not, can you help me of myu drop down can give me the exact code?

    thanks!

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 10 years 12 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    it would be a lot better if

    it would be a lot better if you learnt how to do it yourself.... I recommend you follow through tyssons original tute, as if you have trouble you can go back a step and trouble shoot it.

    If you try to copy this one verbatim I can guarrantee you'll have bugs of some sort