Designing a Dynamic Navigation Dropdown Menu Bar using ASP.NET and C# with asp LinkButtons

Here is the primary code snippet

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Website1.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <meta charset = "UTF-8" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="bootstrap/js/bootstrap.js"></script>
    // Remaining HTML content...

Below you will find the corresponding CSS file related to the main code

 .footerlinks {
    color: #ffffff;
    text-decoration: none !important;
}
// More CSS rules...

The main code includes this line: <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">View Books</asp:LinkButton>

I am inquiring about creating a dropdown menu with responsive buttons labeled A, B, C when hovering over "View Book". I have experience doing this in regular HTML but face challenges with ASP.net buttons.

Is there an approach to implement a dropdown menu using ASP buttons?

Your insights are greatly appreciated!

Answer №1

I find it puzzling why there is confusion between asp.net controls like a button or link button compared to html markup.

I fail to see the connection between these two issues and the initial question.

You mentioned having a bootstrap menu.

So, the main query here is how can I make a dropdown trigger automatically on hover instead of requiring a click on the menu?

Take this menu for example:

(I skipped some parts of the menu, but you get the idea).

This snippet includes a typical Bootstrap dropdown menu structure where a hover event triggers the dropdown:

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

        <li id="mAdmin" runat="server" class="dropdown"  ClientIDMode="Static">
            <a runat="server"  href="#" data-toggle="dropdown" 
                class="dropdown-toggle"
                >Auto Buttons Dropdown Test<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a runat="server" href="~/SiteAdmin/Messages">Manage Portal Email Messages</a></li>
                <li><a runat="server" href="~/Staff/CurrentUsersS">Show Logged on users</a></li>
                <li><a runat="server" href="~/SiteAdmin/OneMonth">Month Logon Summary</a></li>

                <li><a runat="server" href="~/SiteAdmin/EditChoices">Change/Edit Issue tracker choices</a></li>
                <li><a runat="server" href="~/SiteAdmin/SetUp">Developer site settings</a></li>
                <li><a onclick="hasproof()">My Proofs - testing</a></li>
                <li><a runat="server" href="~/SiteAdmin/Issues">Issues Tracker and to-do list</a></li>
                <li><asp:LinkButton ID="LinkButton1" runat="server">LinkButton Test</asp:LinkButton></li>
            </ul>
        </li>

    </ul>
</div>

The final choice in the menu is a common example of a dropdown in a Bootstrap menu bar that requires a click.

https://i.sstatic.net/HH1YI.gif

However, you can modify the menu to display the dropdown on hover without the need for a click.

Simply add this style to your page:

<style>
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* remove the gap so it doesn't close */
    }
</style>

Now, hovering over the menu item will automatically expand the dropdown:

https://i.sstatic.net/7JyBi.gif

Your markup already includes some link buttons with click events which appear well-integrated. Using a link button rather than a standard button improves the menu's appearance. The key goal remains making the dropdown menu expand on hover, regardless of whether it's an "a" link or a link button.

To achieve the desired behavior, apply the provided style to trigger the automatic expansion of the dropdown menu upon hover action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting Documents Together

I'm looking to learn how to link files together, specifically creating a button that when clicked takes you to another site or the next page of reading. I apologize if this is a simple question, as I am new to coding and only familiar with password-ba ...

Parsing data from a text document to generate a chart

Recently, I wrote a code snippet that reads from a file in VBScript. 'Open a file for reading 'Get a StreamReader class that can be used to read the file Dim objStreamReader As StreamReader Dim variableArray(20) As String objStreamReader = File. ...

Safari 15.6.1 does not support background video playback in Next.js

Currently using Safari version 15.6.1 for a small website project, I have encountered an issue where the video appears frozen with an arrow in the middle. Oddly enough, this problem only occurs on Safari as both Chrome and Firefox display the code correctl ...

Can you demonstrate how to display the chosen toggle button within Angular 4 alongside the remaining options?

I have created a custom toggle button component in Angular that I can reuse in different parts of my application. However, I am facing an issue that I need help resolving. I want to display only the selected toggle button and hide the others. When I click ...

How can I make rows appear dynamically when the user clicks a button?

I am trying to add rows dynamically when the user clicks on a button. I have created a script for this purpose, but unfortunately, it is not working as expected. Can someone please assist me with fixing it? <script> var i; i = 2; function AddR ...

swap out the CSS class for my own class dynamically

When I display HTML code like this <div class="btn btn-pagination"> <i class="fa fa-angle-right"></i> </div> and want to replace fa fa-angle-right with myClass when the page loads. I attempted: $(document).ready(function () { ...

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

Tips for Establishing Communication between a WinForms Application and a WebForm Page

As I begin my research on this topic, I want to acknowledge that some might consider this approach as poor programming practice. However, let me first outline my current situation and perhaps it is not as severe as it seems. The code for this project is be ...

Develop a stylish contact form using a mixture of HTML5, Bootstrap, and Php

On my website, I have created a contact us form using HTML, Bootstrap, and PHP. The form functions correctly, and messages are successfully received. However, the issue is that upon clicking the submit button, a new page opens up displaying a "Thank you me ...

Retrieving initial data set using C# Linq from XML

When dealing with the XML below, my goal is to extract the Name attribute values from the First NameList. However, I am having trouble achieving the desired output using the code provided. My expected result should look something like: Expected Output: S ...

Is it possible to build an AngularJS application without utilizing HTML5?

Having created an AngularJS application, I have noticed that it functions smoothly on modern browsers. However, some of my devices run on old browsers that do not support html5. Unfortunately, I am unable to upgrade these browsers. Is there a method to ope ...

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

Saving text to the clipboard with the click of an ASP.NET button

Looking for assistance on how to copy text into clipboard upon a button click in asp.net. The goal is to have the text copied directly to the client's clipboard when the button is clicked. Appreciate any help, AnkiReddy ...

Limiting keyboard input with a phone number in a gridcolumn tag: A step-by-step guide

I have a query regarding a code line that is used to input a phone number into a designated box. <GridColumn field="phoneNumber" title="Phone Number" editor="text"/> Currently, I am able to enter any text using the key ...

Is there a way to pause the execution of code and prompt for confirmation before continuing?

Typically, I utilize the following code snippet in the backend of my application to display a pop-up message to the user after a successful entry has been saved: ScriptManager.RegisterStartupScript(this, this.GetType(), "pop", "<script>alert('C ...

Achieving Full Height and Width of Tab Panel with Bootstrap 4.3

I recently upgraded to bootstrap 4.3 and discovered the handy sizing classes m-* and w-* for setting element height and width. After successfully achieving 100% height and width for the container, I'm now looking to apply these dimensions to the tab-p ...

Is there a way to replace the entire div using page.replace_html instead of just

One issue I'm facing with my website is that the navigation is housed within my <%= render 'layouts/header' %>. I am interested in incorporating ajax so that when a user clicks on a navigation link, only the div with id="content" refre ...

JSON retrieved images are failing to appear in a grid layout

Hey there, I'm facing an issue with the layout of images on my website. I am fetching data from a JSON file to create a grid of images, but unfortunately, all the images are displaying in a single column instead of a grid. I am aiming for a 4 wide ima ...

Double-triggering of Application_Start() observed in MVC 5 application hosted on IIS7.5

After transferring all my solutions to a new machine, I have encountered a strange issue with my MVC 5 web applications. When I build the application in Visual Studio 2013, the web code is regenerated and IIS restarts when the next page loads. However, now ...