Important Notice from AspDotNetStorefront
It is with dismay that we report that we have been forced, through the action of hackers, to shut off write-access to this forum. We are keen to leave the wealth of material available to you for research. We have opened a new forum from which our community of users can seek help, support and advice from us and from each other. To post a new question to our community, please visit: http://forums.vortx.com
Results 1 to 3 of 3

Thread: How to add rounded corners to top menu

  1. #1
    designer is offline Junior Member
    Join Date
    Aug 2010
    Posts
    2

    Default How to add rounded corners to top menu

    I am currently trying to change the css look of my top menu. I want the top menu to have rounded corners, the sliding door technique with images. I need to have them wrap in a span. I am not sure how I would do this. The drop down menu is fine the way it is generated.

    <ComponentArt:Menu id="PageMenu"
    ClientScriptLocation="skins/componentart_webui_client/"
    ImagesBaseUrl="skins/skin_1/skins/Skin_(!SKINID!)/images/mcf/"
    ScrollingEnabled="true"
    ScrollUpLookId="ScrollUpItemLook"
    ScrollDownLookId="ScrollDownItemLook"
    Orientation="horizontal"
    CssClass="TopMenuGroup"
    DefaultGroupCssClass="MenuGroup"
    DefaultItemLookID="DefaultItemLook"
    DefaultGroupItemSpacing="2"
    ExpandDelay="0"
    ExpandDuration="0"
    ExpandSlide ="None"
    ExpandTransition="None"
    CascadeCollapse="false"
    CollapseDelay="0"
    CollapseSlide="None"
    CollapseTransition="None"
    EnableViewState="false"
    runat="server">

    <ItemLooks>
    <ComponentArt:ItemLook LookId="DefaultItemLook" HoverCssClass="MenuItemHover" LabelPaddingTop="2px" ActiveCssClass="MenuItemDown" LabelPaddingRight="15px" LabelPaddingBottom="2px" ExpandedCssClass="MenuItemDown" LabelPaddingLeft="5px" CssClass="MenuItem" />
    <ComponentArt:ItemLook LookId="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" LabelPaddingLeft="4" LabelPaddingRight="4" LabelPaddingTop="2" LabelPaddingBottom="2" />
    <ComponentArt:ItemLook LookID="ScrollUpItemLook" ImageUrl="skins/Skin_(!SKINID!)/images/scroll_up.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA" />
    <ComponentArt:ItemLook LookID="ScrollDownItemLook" ImageUrl="skins/Skin_(!SKINID!)/images/scroll_down.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA" />
    <ComponentArt:ItemLook LookID="BreakItem" ImageUrl="skins/Skin_(!SKINID!)/images/break.gif" ImageHeight="1" ImageWidth="100%" />
    </ItemLooks>
    </ComponentArt:Menu></div>

    Here is my original code.

    CSS
    .slidetabsmenu{
    float:left;
    width:100%;
    font-size: 12px;
    line-height:normal;
    }

    * html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
    margin-bottom: 1em;
    }

    .slidetabsmenu ul{
    list-style-type: none;
    margin:0;
    padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; float:right; margin-top:-25px; margin-bottom:10px
    }

    .slidetabsmenu li{
    display:inline;
    margin:0;
    padding:0;
    }

    .slidetabsmenu a{
    float:left;
    background:url(images/slide-left.gif) no-repeat left top;
    margin:0;
    margin-right: 5px;
    padding:0 0 0 9px;
    text-decoration:none;
    }

    .slidetabsmenu a span {
    float:left;
    display:block;
    background:url(images/slide-right.gif) no-repeat right top;
    padding:7px 13px 7px 4px;
    font-weight:bold;
    color:#fff;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .slidetabsmenu a span {float:none;}
    /* End IE5-Mac hack */

    .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
    color: white;
    }

    .slidetabsmenu a:hover, .slidetabsmenu li.selected a{
    background-position:0% -30px;
    }

    .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
    background-position:100% -30px;
    }

    html>/**/body .IEonlybr{ /*None IE browsers hack*/
    display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
    }





    HTML>

    <div id="slidemenu" class="slidetabsmenu">
    <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#" rel="dropmenu1_c"><span>Manufacturers</span></a></li>
    <li><a href="#" rel="dropmenu2_c"><span>Customer Service</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
    </div>

    <br style="clear: left;" />
    <br class="IEonlybr" />


    <div id="dropmenu1_c" class="dropmenudiv_c">
    <a href="">Item List</a>
    <a href="">Item List</a>
    <a href="">Item List</a>
    <a href="">Item List</a>

    </div>

  2. #2
    jeremy84ponting is offline Junior Member
    Join Date
    Aug 2010
    Location
    USA
    Posts
    1

    Default Hello...

    Thanks for the coding .... I really needed it !

  3. #3
    dragon is offline Member
    Join Date
    Feb 2009
    Posts
    66

    Default

    Did you ever figure out how to make the corners rounded on the top nav menu?
    Need Halloween Costumes?
    Don't let your party be a bust because you didn't shop with us!
    HalloweenAndCostumes.com