Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Special Menu

2 Answers 54 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 21 Dec 2016, 07:04 PM
capture.jpg

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 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 22 Dec 2016, 08:58 AM
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 Dec 2016, 07:13 PM

Bozhidar,

That helps a lot

Thank you

Tags
General Discussions
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Bozhidar
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or