PDA

View Full Version : [CLOSED] Menu style as Microsoft Office 2010



supera
Feb 17, 2012, 1:00 PM
Hi!

I really like the menu styles of Microsoft Office 2010...

I'd like to have these menus in my web application.

It seems just a TabPanel without borders. When the mouse is over the tab, the borders are rendered.

I can do this with ext.net? I suspect it is something in the css file ...

Any help?

Daniil
Feb 17, 2012, 3:14 PM
Hi,

I think it's possible and yes, you are right, via CSS.

Hope the following example helps you to start.

Inspecting the HTML elements and its CSS using IE, Chrome Developer Tools, FireFox FireBug will help you as well.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.my-tabpanel .x-tab-default-top {
background-image: none;
background-color: transparent;
box-shadow: none;
border: none;
border-bottom-width: 0px !important;
}

.my-tabpanel .x-tab-active {
background-color: red;
}

.my-tabpanel .x-tab-over {
background-color: red;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TabPanel runat="server" Cls="my-tabpanel">
<Items>
<ext:Panel runat="server" Title="Tab 1" Html="Tab 1" />
<ext:Panel runat="server" Title="Tab 2" Html="Tab 2" />
<ext:Panel runat="server" Title="Tab 3" Html="Tab 3" />
</Items>
</ext:TabPanel>
</form>
</body>
</html>

supera
Feb 17, 2012, 3:58 PM
Ok... thanks a lot, Daniil

This example will help a lot.