SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Online Dating Guru rawnet's Avatar
    Join Date
    Jan 2002
    Location
    Windsor, UK
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent background on drop-down menus

    Hello,

    I've seen a very cool effect on some drop-down menus (eg. http://www.virginradio.co.uk or http://webfx.eae.net/)

    Obviously, each menu script varies (I'm using the one from http://www.opencube.com), but we can usually set the background colour - how the hell does one make it semi-transparent though?

    Any ideas guys?

    Ross
    Ross Williams from WhiteLabelDating.com
    Webmasters - Add a dating channel to your website in minutes
    Earn 50% of all revenue generated - FREE SETUP

  2. #2
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think they way i've seen it done is to take a dithered gif file and set one of the pixel colors to transparent. put this in the background of the cell or layer. it gives the appearance of tansparency since the what is beneath shows through in the open holes. i'm not sure if that is what the examples did or not.

    added: nice site!
    Last edited by bbolte; Jan 26, 2002 at 14:53.

  3. #3
    SitePoint Enthusiast Mr ilind's Avatar
    Join Date
    Jan 2002
    Location
    Belgium
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey
    you can find some examples of such menu
    the site below. Maybe you can find something
    there.

    greetz
    http://www.w3schools.com/dhtml/dhtml_examples.asp
    Don't blame me, I'm not perfect. giwdesign.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like the old IE transparency filter at work again. In your CSS apply this class to the menu:

    .trans {background-color:#00ff00; filter:(alpha:opacity=60);}

    Change the colour to get different shades, and the opacity governs the transparency effect. Have fun!

    (Note: only works in IE, NS6.0 and maybe others.)

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah...

    Some hting like that is definitely done with the filter.

    To test, take a look at the page using a Netscape browser 4.75 or older.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (Note: only works in IE, NS6.0 and maybe others.)
    Regarding IE, I think it only works on version 5.5+.

    Mac doesn't support it (yet) (latest version = 5.1)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    Online Dating Guru rawnet's Avatar
    Join Date
    Jan 2002
    Location
    Windsor, UK
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm currently using the DHTML menu from http://www.opencube.com so can't set within CSS itself. Have emailed their support to ask how I can implement in this case - shall let you know when I have a response. At present my configuration is limited to these kind of settings :

    /*-------------------------------------------
    Required menu Settings
    --------------------------------------------*/

    DQM_sub_menu_width = 130;

    DQM_urltarget = "_self"

    DQM_onload_statement = ""
    DQM_codebase = "scripts/"

    DQM_border_color = "#000000";

    DQM_menu_bgcolor = "#c8c8c1";
    DQM_hl_bgcolor = "C2BCA7";

    DQM_sub_xy = "0,0";
    DQM_border_width = 1;
    DQM_divider_height = 1;



    /*---IE5-MAC Offset Fix - The following two
    -----parameters correct a position reporting
    -----bug in IE5 on the Mac platform. Adjust
    -----the offsets below untill the first level
    -----sub menus pop up in the correct location.*/

    DQM_ie5mac_offset_X = 10
    DQM_ie5mac_offset_Y = 12


    /*-------------------------------------------
    Required font Settings
    --------------------------------------------*/


    DQM_textcolor = "#333333"
    DQM_fontfamily = "Verdana"
    DQM_fontsize = 11
    DQM_fontsize_ie4 = 9
    DQM_textdecoration = "normal"
    DQM_fontweight = "normal"
    DQM_fontstyle = "normal"
    DQM_hl_textcolor = "#000000"
    DQM_hl_textdecoration = "normal"

    DQM_margin_top = 3
    DQM_margin_bottom = 3
    DQM_margin_left = 5
    Ross Williams from WhiteLabelDating.com
    Webmasters - Add a dating channel to your website in minutes
    Earn 50% of all revenue generated - FREE SETUP

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nonsense...

    If this menu creates the code for you then you can edit it. YOu just have to know where to look. It might take some time but you can find it.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Online Dating Guru rawnet's Avatar
    Join Date
    Jan 2002
    Location
    Windsor, UK
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole,

    You are a confident, condescending chap aren't you!!



    The only way to configure the script is through those settings - please feel free to download the demo yourself to prove me wrong.

    I'm not being lazy - had paid a fair amount to Opencube and it's just a shame I can't implement the settings like that,

    Cheers,

    Ross
    Ross Williams from WhiteLabelDating.com
    Webmasters - Add a dating channel to your website in minutes
    Earn 50% of all revenue generated - FREE SETUP

  10. #10
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He wasn't being condescending at all, he was right. Javascript is an interpreted, client-side language, and therefore it's impossible to create a script that can't be modified. In this case, for example, he uses simple obfuscation techniques that you can easily reverse-engineer if you know javascript. However, you don't even need to do so in this case. Just change your DQM_menu_bgcolor variable to this: "#c8c8c1; filter:alpha(opacity=60)"
    ck :: bringing chris to the masses.

  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rawnet...

    Didn't mean to be "condescending". I was being literal. It just takes a little time to know where to look as well as figure out what needs to be changed. I have a piece of software that does much the same thing. It's called dHTML Menu Builder. All it does is produce compliant, cross-browser javascript based on information that I feed it. However, as Javascript is client-side technology and is text-based, I can edit it to my hearts content.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Out of curiousity, the menu who's code you posted above is not the menu you're using on your site is it? If it is then OpenCube has some 'splaining to do. This line appears at the top of the code:

    * Copyright 2000 by Mike Hall. *
    * Web address: http://www.brainjar.com *

    That means that unless OpenCube is owned by Mike Hall, they're using copyrighted material to create their codebase.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    It's called dHTML Menu Builder.
    Creole, where can this be found?

  14. #14
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right here:
    http://software.xfx.net/utilities/dmbuilder/

    Very cheap, very good, very fast.

    Tell Xavier I said hi.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  15. #15
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, looks interesting...

  16. #16
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by rawnet
    I'm currently using the DHTML menu from http://www.opencube.com so can't set within CSS itself. Have emailed their support to ask how I can implement in this case - shall let you know when I have a response. At present my configuration is limited to these kind of settings :

    /*-------------------------------------------
    Required menu Settings
    --------------------------------------------*/

    DQM_sub_menu_width = 130;

    DQM_urltarget = "_self"

    DQM_onload_statement = ""
    DQM_codebase = "scripts/"

    DQM_border_color = "#000000";

    DQM_menu_bgcolor = "#c8c8c1";
    DQM_hl_bgcolor = "C2BCA7";

    DQM_sub_xy = "0,0";
    DQM_border_width = 1;
    DQM_divider_height = 1;



    /*---IE5-MAC Offset Fix - The following two
    -----parameters correct a position reporting
    -----bug in IE5 on the Mac platform. Adjust
    -----the offsets below untill the first level
    -----sub menus pop up in the correct location.*/

    DQM_ie5mac_offset_X = 10
    DQM_ie5mac_offset_Y = 12


    /*-------------------------------------------
    Required font Settings
    --------------------------------------------*/


    DQM_textcolor = "#333333"
    DQM_fontfamily = "Verdana"
    DQM_fontsize = 11
    DQM_fontsize_ie4 = 9
    DQM_textdecoration = "normal"
    DQM_fontweight = "normal"
    DQM_fontstyle = "normal"
    DQM_hl_textcolor = "#000000"
    DQM_hl_textdecoration = "normal"

    DQM_margin_top = 3
    DQM_margin_bottom = 3
    DQM_margin_left = 5
    Hey Rawnet

    I'm using the same menu, I can't get the transparency thing to work either. I've edited the background properties, but it doesn't see to like the style.

    Let me know if you get it to work.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •