Results 1 to 5 of 5

Thread: Need help with jQuery Multi Level CSS Menu #2 tweaks

  1. #1
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Need help with jQuery Multi Level CSS Menu #2 tweaks

    1) Script Title: jQuery Multi Level CSS Menu #2

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    3) Describe problem: I am trying to configure the menu so the dropdowns have a 70% Black Opacity and the top-level menu buttons have a non-transparent background-image that repeats x. Is there a way to configure this to work that way with CSS? Thanks for your help in advance!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Well, regarding the background part, try first giving the top level menu links (A element) the desired background image in your CSS:

    Code:
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: url(test.gif) top left repeat-x;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    Then further down the CSS, for the sub menu links (A element again), overwrite that for those links:

    Code:
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    background: #414141;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    nivek516 (01-24-2009)

  4. #3
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks! That was easy! Now, the only problem is that I have set the following transparency:
    Code:
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Arial;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0px;
    border-bottom: 1px;
    border-bottom-color: #13365C;
    background: #000000;
    filter:alpha(opacity=80);
    	-moz-opacity:0.8;
    	-khtml-opacity: 0.8;
    	opacity: 0.8;
    }
    The transparency works great with the dropdowns except that the text becomes transparent too. Is there a way to avoid this? I want the text color white (#FFFFFF)

  5. #4
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    That's the tricky part actually with giving the sub menus a transparency filter- it affects the foreground text as well. The way around it is to add another layer on top of all the sub menus, with the background layer carrying the opacity, and the foreground layer not. As you can imagine, that's a rather tricky/ complicated process as well.

    Why not just give the sub menus a background image as well, one that is semi transparent to begin with, using Photoshop for example?
    DD Admin

  6. #5
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yes, I thought the background image would be the best way to do it. The only problem is that the semi-transparency of the .png image won't show. It will show if I add it as a regular image on an html page, but won't on the menu. I was wondering how to work around that. I see that as the best option...as long as it works!

    Thanks for your help!

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
  •