Share via

How to create bootstrap Tab Menu in top of the heading on ASP.NET Home page

BeUnique 2,112 Reputation points
2024-06-22T12:51:39.3366667+00:00

I have designed login page for my asp.net application.

when user logging the application, in the home page, user want to see the settings of their menu's like below.

On the top of the heading in right corner, user want to see the settings image.

when clicking on the settings image, it should show the below tab menu...

settings (on click)

------------------

Help

GoTo your menu

logout

Is it possible to create the above using bootstrap tab menu...?

below is my design code in ASP.NET

<div id="body" class="body"> 
  <div id="body" class="Header">
         <table style="width: 100%">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td align="center">
                            <table>
                                <tr>
                                    <td style="font-family: Arial; font-size: 20px; color: white; font-weight: bold;">Company Title
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <div>
                                <table>
                                    <tr>
                                        <td style="width: 100px;">
					    <img src="../images/Settings.png" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
              </table>
   <div>
<div>
.body {
    width: 99%;
    height:98%;
}
.Header {
    width: 100%;
    background-color: #Green;
    color: white;
}
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,510 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
11,026 questions
Accepted answer
  1. Lan Huang-MSFT 29,751 Reputation points Microsoft Vendor
    2024-06-24T05:34:55.3633333+00:00

    Hi @Gani_tpt,

    Based on your description, I think you want to achieve something like the following.

    User's image

    <html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .body {
            width: 99%;
            height: 98%;
        }
        .Header {
            width: 100%;
            background-color: Green;
            color: white;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="body" class="body">
            <div id="Header" class="Header">
                <table style="width: 100%">
                    <tr>
                        <td>&nbsp;
                        </td>
                        <td align="center" style="font-family: Arial; font-size: 20px; color: white; font-weight: bold;">Company Title
                        </td>
                        <td>
                            <ul class="nav nav-tabs navbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                        <img src="../images/Settings.png" width="20" height="20" /></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Help</a></li>
                                        <li><a class="dropdown-item" href="#">GoTo Your Menu</a></li>
                                        <li><a class="dropdown-item" href="#">Logout</a></li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="homemenu">
        </div>
        <div>
            <asp:ContentPlaceHolder ID="
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. AgaveJoe 28,536 Reputation points
    2024-06-22T15:49:21.0033333+00:00

    I modified the master page markup that comes with standard Web Forms with Identity template in Visual Studio using the openly published bootstrap 3.4 documentation. Replace the word "Settings" with your settings image.

    https://getbootstrap.com/docs/3.4/examples/navbar/

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebFormsIdentity.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        Settings
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">GoTo your menu</a></li>
                                        <li>
                                            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>
    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.