+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / convert menu to RadMenu

convert menu to RadMenu

2 posts, 0 answered
  1. xander
    xander avatar
    1 posts
    Registered:
    21 Jun 2007
    18 Sep 2007
    Link to this post
    I have a menu made of <ul> and <li> that is static that I want to make dynamic by using a RadMenu instead.  I also want the RadMenu to look exactly like the current menu if all items are the same... her is the code for the menu:

    .master file::
    ***************
                  <div id="menu">
                    <ul class="center">
                      <li><a id="A1" href="~/default.aspx" runat="server">Home</a></li>
                      <li><a id="A2" href="~/about.aspx" runat="server">About</a></li>
                      <li><a id="A3" href="~/news.aspx" runat="server">News &amp; Events</a>
                        <ul>
                            <li><a id="A4" href="~/news/blog.aspx" runat="server">Blog</a></li>
                        </ul>
                      </li>
                      <li><a id="A5" href="~/partners.aspx" runat="server">Partners</a></li>
                      <li><a id="A6" href="~/services.aspx" runat="server">Services</a></li>
                      <li><a id="A7" href="~/projects.aspx" runat="server">Projects</a></li>
                      <li><a id="A8" href="~/process.aspx" runat="server">Process</a></li>
                      <li><a id="A9" href="~/resources.aspx" runat="server">Resources</a>
                        <ul>
                            <li><a id="A10" href="~/resources/whitepapers.aspx" runat="server">White Papers</a></li>
                            <li><a id="A11" href="~/resources/downloads.aspx" runat="server">Downloads</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>

    CSS file::
    ***************
            #menu {
                background:#d7d7d7 url(img/Menu-Background.gif) repeat-x center left;
                border-bottom:#cacaca 1px solid;
            }
                #menu ul {
                    list-style:none;
                    padding:10px 0;
                }
                #menu li {
                    display:inline;
                    position: relative;
                }
                    #menu li a {
                        background:url(img/Menu-Separator.gif) no-repeat center left;
                        color:#9e9e9e;
                        color:#333;
                        font-size:11pt;
                        padding:0 20px 0 22px;
                        text-transform: uppercase;
                    }
                        #menu li:first-child a {
                            background:none;
                            padding:0 20px 0 0;
                        }
                        #menu li a:hover, #menu li.selected a {
                            color:#176aa9;
                        }
            /* submenu */
                    #menu li ul {
                        left:-5000px;
                        margin:0 0 0 15px;
                        padding:13px 0 0 0;
                        position:absolute;
                        top:13px;
                    }
                        #menu li:hover ul {
                            display:block;
                            left:0;
                            width:120px;
                        }
                        #menu li li {
                            background:#333;
                            border-bottom:#4A4A4A 1px solid;
                            display:block;
                            float:left;
                        }
                        #menu li li a {
                            background:none !important;
                            color:#FFF;
                            display:block !important;
                            font-size:9pt;
                            padding:5px 10px !important;
                            width:100px;
                        }



    I want to make a skin for the RadMenu, and I looked at the CSS files for previous skins, but couldn't figure it out.  Anyone know how I could convert this into a RadMenu skin?

  2. Sean
    Sean avatar
    271 posts
    Registered:
    31 May 2006
    19 Sep 2007
    Link to this post
    Hi xander,

    Have you looked at the radmenu online help on the Telerik site, specifically the "controlling the visual appearance" section which gives you all the documentation you need to get yourself going.

    Hope that helps.
    Sean



2 posts, 0 answered