This is a migrated thread and some comments may be shown as answers.

Special Menu

2 Answers 77 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

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

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.