custom menus

[Richard]

Designers are such a pain :) It is possible to have a menu item wrapped in a circle and spaced apart instead of butted up against each other( see attached)

 

 

[Marin Bratanov]

Hi Richard,

While it is, perhaps, possible to hack the RadMenu to look like this, I think it will be easier if you use a Repater or ListView to generate the items and write up the CSS from scratch.

Here's a basic example that can, I hope, get you started:

<style>
    .roundMenuItem {
        display: block;
        float: left;
        position: relative;
        width: 200px;
        height: 100px;
        border-radius: 100px;
        border: 2px solid black;
        background-color: gray;
        font-weight: 800;
        font-size: 26px;
        text-align: center;
        padding-top: 100px;
    }
    .textContent{

    }
</style>
<asp:Repeater runat="server" ID="Repeater1">
    <ItemTemplate>
        <a class="roundMenuItem" href="<%# Eval("Url") %>">
                <%# Eval("Text") %>
        </a>
    </ItemTemplate>
</asp:Repeater>

protected void Page_Load(object sender, EventArgs e)
{
    List<DataModel> items = new List<DataModel>();
    for (int i = 0; i < 5; i++)
    {
        items.Add(new DataModel { Text = "Item " + i, Url = i.ToString() });
    }
    Repeater1.DataSource = items;
    Repeater1.DataBind();
}

class DataModel
{
    public string Text { get; set; }
    public string Url { get; set; }
}

Regards,
Marin Bratanov
Progress Telerik