[CLOSED] Menu style as Microsoft Office 2010

  1. #1

    [CLOSED] Menu style as Microsoft Office 2010

    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?
    Last edited by geoffrey.mcgill; Feb 17, 2012 at 4:10 PM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    Ok... thanks a lot, Daniil

    This example will help a lot.

Similar Threads

  1. Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  2. Toolbar Menu css style properties
    By garag in forum 1.x Help
    Replies: 1
    Last Post: Sep 30, 2011, 12:58 PM
  3. [CLOSED] Export To Excell or Open office
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 15, 2011, 12:11 PM
  4. Replies: 3
    Last Post: Mar 04, 2011, 11:08 AM
  5. Replies: 0
    Last Post: Mar 04, 2011, 10:52 AM

Posting Permissions