custom menus

2 posts, 0 answers
  1. Richard
    Richard avatar
    2 posts
    Member since:
    Apr 2018

    Posted 18 Jul 2018 Link to this post

    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)

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 19 Jul 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top