Welcome Guest Search | Active Topics | Sign In | Register

How to create semi-transparent menu Options
eo_support
Posted: Monday, March 29, 2010 8:08:44 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
The key to have a transparent menu is to apply transparency on the menu group's Style property. All the built-in menus have solid background color style. So they are not transparent. In order to make them transparent, you must remove the background color style attributes and add transparency attributes. For example, sub menu for the following menu is 50% transparent:

Code: CSS
.sub_menu
{
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.5;
    
    font-size: 9pt; 
    font-family: Verdana; 
    color: black; 
    cursor: hand; 
    border: #999999 1px solid; 
    padding: 2px; 
}


Code: HTML/ASPX
<eo:Menu runat="server" ID="Menu1" ControlSkinID="None" Width="360px">
    <LookItems>
        <eo:MenuItem 
            HoverStyle-CssText="background-color: #cccccc; border-right: #999999 1px solid; padding-right: 4px; border-top: #999999 1px solid; padding-top: 1px; border-left: #999999 1px solid; padding-left: 4px; border-bottom: #999999 1px solid; padding-bottom: 1px; "
            ItemID="_Default" NormalStyle-CssText="background-color: transparent; border-right-style: none; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; border-top-style: none; border-left-style: none; border-bottom-style: none; color: black"
            SelectedStyle-CssText="BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: white; ">
            <SubMenu ItemSpacing="3" LeftIconCellWidth="12" 
            Style-CssClass="sub_menu" ShadowDepth="0">
            </SubMenu>
        </eo:MenuItem>
    </LookItems>
    <TopGroup>
        <Items>
            <eo:MenuItem Text-Html="Download">
                <SubMenu>
                    <Items>
                        <eo:MenuItem Text-Html="Developer Downloads">
                        </eo:MenuItem>
                        <eo:MenuItem Text-Html="Subscriber Downloads">
                        </eo:MenuItem>
                        <eo:MenuItem Text-Html="Microsoft Download Center">
                        </eo:MenuItem>
                    </Items>
                </SubMenu>
            </eo:MenuItem>
        </Items>
    </TopGroup>
</eo:Menu>


Transparency is specified in CSS rule "sub_menu". This rule is then used by Menu -> LookItems -> _Default -> SubMenu -> Style-CssClass.

In order to use transparency, you will also need to set the sub menu's ShadowDepth to 0.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.