How can I get drop shadows?

Forums › Forums › Menus › How can I get drop shadows?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 26, 2009 at 10:27 am #717
    Phartog
    Member

    I just subscribed to the premium features, but I still don’t know how I can get a drop shadow under my drop down menu’s? Can somebody please help

    March 27, 2009 at 9:08 am #5756
    Phartog
    Member

    What I want to accomplish is a menu like the image I attached. I used the css generator to generate code for the multi-navigational-plugin for wordpress. There are a couple of things I don’t know how to change:
    – Only a border around the drop down, no inner borders
    – A drop shadow under the drop down
    – I want to change the opacity of the top-level hover,

    Can somebody please help, I need to finish this in about a week! Here is the code from the generator:
    [code:3ec8uhqh]#suckerfishnav {
        background:#67982D url("../multi-level-navigation-plugin/images/buttonbalk_2.gif") repeat-x;
        font-size:12px;
        font-family:verdana,sans-serif;
        font-weight:bold;
        width:100%;
        }
    #suckerfishnav, #suckerfishnav ul {
        float:left;
        list-style:none;
        line-height:35px;
        padding:0;
        border:0px solid #bbb;
        margin:0;
        width:100%;
        }
    #suckerfishnav a {
        display:block;
        color:#FFF;
        text-decoration:none;
        padding:0px 25px;
        }
    #suckerfishnav li {
        float:left;
        padding:0;
        }
    #suckerfishnav ul {
        position:absolute;
        left:-999em;
        height:auto;
        width:176px;
        font-weight:normal;
        margin:0;
        line-height:1;
        -moz-opacity:0.8;
        opacity:0.8;
        khtml-opacity:0.8;
        border:0;
        border-top:1px solid #323232;
        }
    #suckerfishnav li li {
        width:174px;
        border-bottom:1px solid #323232;
        border-left:1px solid #323232;
        border-right:1px solid #323232;
        font-weight:normal;
        font-family:verdana,sans-serif;
        }
    #suckerfishnav li li a {
        padding:3px 10px;
        width:125px;
        font-size:10px;
        color:#323232;
        }
    #suckerfishnav li ul ul {
        margin:-17px 0 0 175px;
        }
    #suckerfishnav li li:hover {
        background:#FFF;
        }
    #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
        color:#67982D;
        }
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
        color:#323232;
        }
    #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
        color:#323232;
        }
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
        left:-999em;
        }
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
        left:auto;
        background:#FFF;
        }
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {
        background:#FFFFFF;
        }
    #suckerfishnav .current_page_parent, #suckerfishnav .current_page_ancestor, #suckerfishnav .current-cat-parent {
        background:#FFF;
        }
    #suckerfishnav .current-cat, #suckerfishnav .current_page_item {
        background:#FFFFFF;
        }
    #suckerfishnav .current_page_ancestor a:after, #suckerfishnav .current_page_ancestor li a:after, #suckerfishnav .current_page_ancestor li li a:after, #suckerfishnav .current_page_ancestor li li li a:after, #suckerfishnav .current_page_ancestor li li li li a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav .current-cat-parent li a:after, #suckerfishnav .current-cat-parent li li a:after, #suckerfishnav .current-cat-parent li li li a:after, #suckerfishnav .current-cat-parent li li li li a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav .current_page_parent li a:after, #suckerfishnav .current_page_parent li li a:after, #suckerfishnav .current_page_parent li li li a:after, #suckerfishnav .current_page_parent li li li li a:after {
        content:"";
        }
    #suckerfishnav .current_page_ancestor a:after, #suckerfishnav li .current_page_ancestor a:after, #suckerfishnav li li .current_page_ancestor a:after, #suckerfishnav li li li .current_page_ancestor a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav li .current-cat-parent a:after, #suckerfishnav li li .current-cat-parent a:after, #suckerfishnav li li li .current-cat-parent a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav li .current_page_parent a:after, #suckerfishnav li li .current_page_parent a:after, #suckerfishnav li li li .current_page_parent a:after {
        color:#000000;
        content:"";
        }
    #suckerfishnav .current-cat a:after, #suckerfishnav li .current-cat a:after, #suckerfishnav li li .current-cat a:after, #suckerfishnav li li li .current-cat a:after, #suckerfishnav li li li li .current-cat a:after, #suckerfishnav .current_page_item a:after, #suckerfishnav li .current_page_item a:after, #suckerfishnav li li .current_page_item a:after, #suckerfishnav li li li .current_page_item a:after, #suckerfishnav li li li li .current_page_item a:after {
        color:#000000;
        content:"";
        }[/code:3ec8uhqh]

    March 29, 2009 at 12:33 am #5757
    imported_Ryan
    Member

    Hi,
    The premium CSS generator does not support drop shadows.

    The template generator however does. Eventually the code which powers the template generator menus will be ported to the menu CSS generator but development of that has been slowed considerably lately as I’m too busy. In the mean time, what you could do (this is a little awkward though), is to export a WordPress theme from the template generator which has a dropshadow, then grab the CSS for the menu from the themes CSS file and add the image urls in where appropriate. That should work I think, if it doesn’t then post a link here to an example of it not working and I’ll figure out where the problem is coming from for you.

    March 29, 2009 at 1:36 am #5758
    imported_Ryan
    Member

    There are various ways to change the ‘opacity’ of the top-level hover, but they all require customisation of the CSS, which is a service we don’t provide for free sorry.

    If you would like me to provide the CSS for you (to do the shadow effect and ‘opacity’), then you could sign up for our premium support service … https://geek.hellyer.kiwi/premium_support/

    March 29, 2009 at 1:12 pm #5759
    Phartog
    Member

    I would really like that, I want to get premium support. But this menu has to be finished in about a week (I am doing volunteer work on this website for just a short period). If you make the custom css would it be finished in a week , if this is possible I will most definitely sign up for premium support, let me know and I will do it, thanks.

    March 31, 2009 at 7:37 am #5760
    imported_Ryan
    Member

    Hi,
    If you need it within a week then I’ll do it within a week. I’m a little erratic at checking the forum lately, but if you leave a message in the premium support forum I’ll see that very quickly and get the CSS to you as quickly as possible.

    April 2, 2009 at 1:33 pm #5761
    Phartog
    Member

    Ryan, I just subscribed to premium support. I would really like you to make the custom css of the idea I showed earlier in the post (an image of the idea I wanted to create). Actually I should finish the website coming Tuesday, I am not sure if the css can be finished then? Already thank you very much for the help!!!

    So the following things I really want in this menu, I cannot get it to work myself:
    – shadows under my drop down
    – A transparent hover on the main menu (I use a background image for the main menu beam, so I need a transparent hover to see the background image threw)
    –  The drop down shouldn’t be transparent

    You maybe need the css I have right now (pasted in the multi-navigational-plugin window):

    [code:rh8jsy03]#suckerfishnav {
        background:url("../multi-level-navigation-plugin/images/buttonbalk_2.gif") repeat-x;
        font-size:12px;
        font-family:verdana,sans-serif;
        font-weight:bold;
        width:100%;

        }
    #suckerfishnav, #suckerfishnav ul {
        float:left;
        list-style:none;
        line-height:35px;
        padding:0;
        border:none;
        margin:0;
        width:100%;
    z-index: 1000;
        }
    #suckerfishnav a {
        display:block;
        color:#FFF;
        text-decoration:none;
        padding:0px 25px;
        }
    #suckerfishnav li {
        float:left;
        padding:0;
        }
    #suckerfishnav ul {
        position:absolute;
        left:-999em;
        height:auto;
        width:176px;
        font-weight:normal;
        margin:0;
        line-height:1;
        -moz-opacity:0.8;
        opacity:1;
        khtml-opacity:0.8;
        border:0;
        border-top:1px solid #323232;
        }
    #suckerfishnav li li {
        width:174px;
        border-bottom:1px solid #323232;
        border-left:1px solid #323232;
        border-right:1px solid #323232;
        font-weight:normal;
        font-family:verdana,sans-serif;
        }
    #suckerfishnav li li a {
        padding:3px 10px;
        width:125px;
        font-size:10px;
        color:#323232;
        }
    #suckerfishnav li ul ul {
        margin:-17px 0 0 175px;
        }
    #suckerfishnav li li:hover {
        background:#FFF;

        }
    #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
        color:#67982D;
        }
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
        color:#323232;
        }
    #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
        color:#323232;
        }
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
        left:-999em;
        }
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
        left:auto;
        background:#FFF;
        }
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {
        background:#FFFFFF;
        }
    #suckerfishnav .current_page_parent, #suckerfishnav .current_page_ancestor, #suckerfishnav .current-cat-parent {
        background:#FFF;
        }
    #suckerfishnav .current-cat, #suckerfishnav .current_page_item {
        background:#FFFFFF;
        }
    #suckerfishnav .current_page_ancestor a:after, #suckerfishnav .current_page_ancestor li a:after, #suckerfishnav .current_page_ancestor li li a:after, #suckerfishnav .current_page_ancestor li li li a:after, #suckerfishnav .current_page_ancestor li li li li a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav .current-cat-parent li a:after, #suckerfishnav .current-cat-parent li li a:after, #suckerfishnav .current-cat-parent li li li a:after, #suckerfishnav .current-cat-parent li li li li a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav .current_page_parent li a:after, #suckerfishnav .current_page_parent li li a:after, #suckerfishnav .current_page_parent li li li a:after, #suckerfishnav .current_page_parent li li li li a:after {
        content:"";
        }
    #suckerfishnav .current_page_ancestor a:after, #suckerfishnav li .current_page_ancestor a:after, #suckerfishnav li li .current_page_ancestor a:after, #suckerfishnav li li li .current_page_ancestor a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav li .current-cat-parent a:after, #suckerfishnav li li .current-cat-parent a:after, #suckerfishnav li li li .current-cat-parent a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav li .current_page_parent a:after, #suckerfishnav li li .current_page_parent a:after, #suckerfishnav li li li .current_page_parent a:after {
        color:#000000;
        content:"";
        }
    #suckerfishnav .current-cat a:after, #suckerfishnav li .current-cat a:after, #suckerfishnav li li .current-cat a:after, #suckerfishnav li li li .current-cat a:after, #suckerfishnav li li li li .current-cat a:after, #suckerfishnav .current_page_item a:after, #suckerfishnav li .current_page_item a:after, #suckerfishnav li li .current_page_item a:after, #suckerfishnav li li li .current_page_item a:after, #suckerfishnav li li li li .current_page_item a:after {
        color:#000000;
        content:"";
        }[/code:rh8jsy03]

    April 5, 2009 at 8:01 am #5762
    imported_Ryan
    Member

    Answers to these questions are being dealt with in the premium support forum.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.