Special Menu

3 posts, 0 answers
  1. David
    David avatar
    286 posts
    Member since:
    Mar 2014

    Posted 21 Dec 2016 Link to this post

    I would like to implement special menu as here: http://decisionlens.com/customers.

    Meaning tab functionality with transparent background and highlighting on the bottom

    I need only top level, so no submenu necessary

    Any recommendations?

    Thank you

  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 22 Dec 2016 Link to this post

    Hi,

    You can use as a start base the following code and to rework in a way to achieve exactly what you want:

    <head runat="server">
        <title></title>
        <style>
            body {
                font-size: 14px;
                background-image: url(http://decisionlens.com/assets/img/hd-customers.jpg);
                background-repeat: no-repeat;
                background-position: 50% 0;
                background-size: 100% auto;
            }
     
            div.RadMenu .rmRootGroup {
                background-color: transparent;
                background-image: none;
                border-color: transparent;
            }
     
            div.RadMenu .rmRootGroup.rmHorizontal .rmItem {
                border-width: 0 0 5px 0;
                border-color: transparent transparent #272727 transparent;
            }
     
            div.RadMenu .rmRootGroup.rmHorizontal .rmItem:hover {
                border-color: transparent transparent #fff transparent;
            }
     
            div.RadMenu .rmRootGroup.rmHorizontal .rmItem.rmFocused,
            div.RadMenu .rmRootGroup.rmHorizontal .rmItem.rmSelected {
                border-color: transparent transparent #f68f20 transparent;
            }
     
            div.RadMenu .rmItem .rmLink {
                padding: 4px 10px 10px 10px;
                font-family: "proxima-nova-1",​"proxim...2",​"Arial",​"sans-serif";
                font-weight: 600;
                color: #fff;
                text-transform: uppercase;
                opacity: .7;
            }
     
            div.RadMenu li.rmItem .rmLink:hover {
                color: #fff;
                background-color: transparent;
                background-image: none;
                opacity: 1;
            }
     
            div.RadMenu .rmItem.rmFocused .rmLink,
            div.RadMenu .rmItem.rmSelected .rmLink {
                color: #fff;
                background-color: transparent;
                background-image: none;
                opacity: .7;
                box-shadow: none;
            }
     
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
            <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" RenderMode="Lightweight">
                <Items>
                    <telerik:RadMenuItem Text="Solutions" />
                    <telerik:RadMenuItem Text="Secret Sauce" />
                    <telerik:RadMenuItem Text="Customers" />
                    <telerik:RadMenuItem Text="About" />
                    <telerik:RadMenuItem Text="News & Events" />
                </Items>
            </telerik:RadMenu>
        </form>
    </body>
    </html>

    Note for example, that if you want to use the specified fonts: font-family: "proxima-nova-1",​"proxim...2",​"Arial",​"sans-serif"; - you will need to download it and put them in your project and then to load it.

    However, I gave you the styles for almost everything about that menu: transparency, border-bottom states etc.

    Regards,
    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    286 posts
    Member since:
    Mar 2014

    Posted 22 Dec 2016 in reply to Bozhidar Link to this post

    Bozhidar,

    That helps a lot

    Thank you

Back to Top