Abas com CSS

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > ASP Controls >

Abas com CSS

Previous pageReturn to chapter overviewNext page

CSS

 

.tag

{

  margin-left: 15px;

}

 

.item

{

  background-color: Blue;

  color: White;

  text-transform: capitalize;

  padding: 5px;  

}

 

.selectedTab

{

  font-size: 12px;

  font-weight: bold;

  font-style: italic;

  font-family: Calibri;

  background-color: Yellow;

}

 

.tab a:hover

{

  text-decoration: underline;

  background-color: Red;

}

 

.conteudo

{

  border: 1px solid black;

  margin-bottom: 10px;

}

 

 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!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></title>

  <link href="Estilo.css" rel="stylesheet" type="text/css" />  <------------

</head>

<body>

  <form id="form1" runat="server">

  <div>

      <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">

          <Items>

              <asp:MenuItem Text="Tab 1" Value="T1"></asp:MenuItem>

              <asp:MenuItem Text="Tab 2" Value="T2"></asp:MenuItem>

          </Items>

          <StaticMenuStyle CssClass="tab" />

          <StaticMenuItemStyle CssClass="item" />

          <StaticSelectedStyle CssClass="selectedTag" />

      </asp:Menu>

  </div>

  <div class="conteudo">

      <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

          <asp:View ID="View1" runat="server">

               TAB 11

          </asp:View>

          <br>

              <br></br>

              <asp:View ID="View2" runat="server">

                   TAB 2

              </asp:View>

          </br>

      </asp:MultiView>

  </div>

  </form>

</body>

</html>

 

Default.aspx.cs

 

using System;

using System.Web.UI.WebControls;

 

public partial class _Default : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

   {

   }

 

  protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

   {

      switch (e.Item.Value)

       {

          case "T1":

               MultiView1.ActiveViewIndex = 0;

              break;

          case "T2":

               MultiView1.ActiveViewIndex = 1;

              break;

       }

   }

}