Instructions for creating a dropdown menu button that can also act as a link button

I'm struggling with my HTML code and can't seem to get the button to work as a link. Even after inserting an anchor tag with a link inside, clicking on the button does nothing.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0719071b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a849a86">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Week 8 Homepage</title>
        <script src="homepage.js"></script>
    </head>
    <body>
        <div class="top flex">
          <span><a href="index.html" style="text-decoration: none"><h1 class="icon">Ron's Clothes</h1></a></span>

          <span>
            <div class="dropdown link1">
              <a href="link1.html" style="text-decoration: none;">
                <button class="btn btn-secondary btn-clr dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Shop
                </button>
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="link1.html">Tops</a></li>
                <li><a class="dropdown-item" href="link1.html">Pants</a></li>
                <li><a class="dropdown-item" href="link1.html">Outerwear</a></li>
              </ul>
              <a href="link1.html" style="text-decoration: none;"></a>
            </div>
          </span>

        </div>

        <img class="image" src="Screenshot (27).png" alt="clothes image">

        <h1 class="featured">Featured Items</h1>

        <div class="featuredimg">
            <div class="column position1">
              <a href="link1.html" style="text-decoration: none;">
                <img src="shirt1.jpeg" alt="featured1" style="width: 75%">
                <p>Early 90s Brine for Major Soccer<br>League Tee<br><strong>$38.58</strong></p>
              </a>
            </div>
            <div class="column position2">
              <img src="shirt2.jpeg" alt="featured2" style="width: 75%">
              <p>90s Nike 'There Is No Finish Line'<br>Windbreaker<br><strong>$75.32</strong></p>
            </div>
            <div class="column position3">
              <img src="shirt3.jpeg" alt="featured3" style="width: 75%">
              <p>1992/1993 Manchester United F.C.<br>Training Tee<br><strong>$68.64</strong></p>
            </div>
            <div class="column position4">
              <img src="shirt4.jpeg" alt="featured4" style="width: 75%">
              <p>1995 Houston Rockets x Looney Tunes<br>'Daffy Duck' Tee<br><strong>$43.93</strong></p>
            </div>
          </div>
    </body>
</html>

I've tried rearranging the anchor tag without success, sometimes causing issues with the dropdown menu as well. I attempted using JavaScript by assigning an ID to the button and adding an event listener, but that hasn't solved the problem either. I'm seeking assistance as I've run out of ideas.

javascripthtmlcssbootstrap-5cs50

Answer №1

  1. You can achieve the button style for an anchor element in Bootstrap without the need for a separate button element.

  2. If you want the page to change instead of the dropdown opening, make sure to remove the data-bs-toggle="dropdown" attribute that triggers the dropdown functionality.

<!DOCTYPE html>

<html lang="en>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Week 8 Homepage</title>
        <script src="homepage.js"></script>
    </head>
    <body>
        <div class="top flex">
          <span><a href="index.html" style="text-decoration: none"><h1 class="icon">Ron's Clothes</h1></a></span>

          <span>
            <div class="dropdown link1">
              <a href="link1.html" class="btn btn-secondary btn-clr dropdown-toggle" type="button" aria-expanded="false">
                Shop
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="link1.html">Tops</a></li>
                <li><a class="dropdown-item" href="link1.html">Pants</a></li>
                <li><a class="dropdown-item" href="link1.html">Outerwear</a></li>
              </ul>
              <a href="link1.html" style="text-decoration: none;"></a>
            </div>
          </span>

        </div>

        <img class="image" src="Screenshot (27).png" alt="clothes image">

        <h1 class="featured">Featured Items</h1>

        <div class="featuredimg">
            <div class="column position1">
              <a href="link1.html" style="text-decoration: none;">
                <img src="shirt1.jpeg" alt="featured1" style="width: 75%">
                <p>Early 90s Brine for Major Soccer<br>League Tee<br><strong>$38.58</strong></p>
              </a>
            </div>
            <div class="column position2">
              <img src="shirt2.jpeg" alt="featured2" style="width: 75%">
              <p>90s Nike 'There Is No Finish Line'<br>Windbreaker<br><strong>$75.32</strong></p>
            </div>
            <div class="column position3">
              <img src="shirt3.jpeg" alt="featured3" style="width: 75%">
              <p>1992/1993 Manchester United F.C.<br>Training Tee<br><strong>$68.64</strong></p>
            </div>
            <div class="column position4">
              <img src="shirt4.jpeg" alt="featured4" style="width: 75%">
              <p>1995 Houston Rockets x Looney Tunes<br>'Daffy Duck' Tee<br><strong>$43.93</strong></p>
            </div>
          </div>
    </body>
</html>

If you decide to convert the dropdown button into a link, consider eliminating the dropdown entirely.

Answer №2

You need to make a change to your code by moving the anchor tag inside the button instead of below it. Here is the updated code snippet:

<!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
   <span>
        <div class="dropdown link1">
          <button class="btn btn-secondary btn-clr dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <a href="link1.html" style="text-decoration: none;">Shop</a>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="link1.html">Tops</a></li>
            <li><a class="dropdown-item" href="link1.html">Pants</a></li>
            <li><a class="dropdown-item" href="link1.html">Outerwear</a></li>
          </ul>
        </div>
      </span>

    </div>

    <img class="image" src="Screenshot (27).png" alt="clothes image">

    <h1 class="featured">Featured Items</h1>

    <div class="featuredimg">
        <div class="column position1">
          <a href="link1.html" style="text-decoration: none;">
            <img src="shirt1.jpeg" alt="featured1" style="width: 75%">
            <p>Early 90s Brine for Major Soccer<br>League Tee<br><strong>$38.58</strong></p>
          </a>
        </div>
        <div class="column position2">
          <img src="shirt2.jpeg" alt="featured2" style="width: 75%">
          <p>90s Nike 'There Is No Finish Line'<br>Windbreaker<br><strong>$75.32</strong></p>
        </div>
        <div class="column position3">
          <img src="shirt3.jpeg" alt="featured3" style="width: 75%">
          <p>1992/1993 Manchester United F.C.<br>Training Tee<br><strong>$68.64</strong></p>
        </div>
        <div class="column position4">
          <img src="shirt4.jpeg" alt="featured4" style="width: 75%">
          <p>1995 Houston Rockets x Looney Tunes<br>'Daffy Duck' Tee<br><strong>$43.93</strong></p>
        </div>
      </div>
</body>L editor updates the webview automatically in real-time as you write code.
  </p>
  <script src="script.js"></script>
</body>

</html>

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

Calculate the total of the temporary information entered into the input field

I'm totally new to all of this and definitely not an expert, but there's something that really bothers me. I found a website where you have to complete a captcha to log in. It goes like this: <input type="text" class="form-contr ...

javascripthtmltampermonkey

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

How to refresh a specific component or page in Angular without causing the entire page to reload

Is there a way to make the selected file visible without having to reload the entire page? I want to find a cleaner method for displaying the uploaded document. public onFileSelected(event): void { console.log(this.fileId) const file = event.targe ...

javascriptangulartypescriptroutesangular2-routing

Once you address a block using jQuery

$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...

javascriptjquerycss

Encounter the error message "Socket closure detected" upon running JSReport in the background on a RHEL system

I'm encountering an issue with JSReport at www.jsreport.net. When I run npm start --production in the background, everything seems to be working fine. But as soon as I close this session, an error pops up: Error occurred - This socket is closed. Sta ...

javascriptnode.jssocket.ionpmjsreport

recognizing a specific attribute of a website

Apologies for the unclear heading. I am on the lookout for a specific feature that has become a common sight on numerous websites lately. It's an animation used by freelancers when showcasing "projects worked on" or "hours spent coding". A counter s ...

htmlcss

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

javascriptjquery

Handling scroll events in a functional component using React

I'm having trouble understanding why the onScroll function isn't triggering the console.log statement. <table className="table" onScroll={()=>{console.log("Works")}> The console.log just doesn't seem to be exec ...

javascriptreactjsonscroll

Displaying AJAX data in Django using an HTML table

My Django template currently has the following AJAX script running: function create_table() { $.ajax({ method: "GET", url: "/api/data/", success: function(data){ console.log('button clicked') ...

javascriptjqueryhtmlajaxdjango

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

javascripthtmlcsssvg

Are you encountering difficulties while managing back pressure as anticipated when applying node request or axios in combination with streams for downloading and extracting files?

We have encountered a peculiar problem while trying to download and decompress a large file of approximately 6 GB (which decompresses to around 64 GB) using the HTTP protocol. To achieve this, we are utilizing either Node.js' request library or axios. ...

javascriptnode.jsrequestaxioszlib

Looking to attach a listener to an element within a modal once it has finished rendering?

Upon clicking a button, a modal window appears. The controller assigned to the modal contains a list of element IDs that need listeners assigned. However, when the controller initializes, the modal has not yet rendered, causing the elements requiring liste ...

javascriptangularjsbootstrap-modal

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

javascriptphphtml

Tips for optimizing AJAX content for Google indexing

As I begin the process of developing a public website that utilizes client-side rendering with AngularJS, I have come across information suggesting that dynamically generated content may not be properly indexed by Google. This raises concerns about the imp ...

javascriptajaxangularjsseoclient-side

What is the method for utilizing AngularJS to access the HTML input FileUpload FileList object?

I am looking to retrieve the values of a FileList object after selecting files using an HTML input FileUpload element. Although I can see the FileList object in the console window when I console.log it, I am facing challenges accessing the values using Ang ...

javascriptangularjsfile-upload

Navigating to a particular value in Vue: A step-by-step guide

In my Vue application, I have a basic table structure: <tbody> <tr v-for="(item, index) in items"> <td> ... </td> </tr> </tbody> The items are dynamically added using the unsh ...

javascriptjqueryscrollvue.jsvuejs2

What is the best way to handle images overflowing a div

I am currently working on creating a carousel using React, where the content images are aligned horizontally. If I have 3 image tags within a div with a width of 1200px, how can I effectively control these images to ensure they fit within the container div ...

cssreactjscarousel

"There seems to be an issue with the KeyListener function in

The error I'm encountering is: index.html:12 Uncaught TypeError: Cannot read property 'addEventListener' of null I'm unsure about what went wrong. The intention behind the code was to store the result of the selected radio button into a ...

javascripthtml

An illustration using Bootstrap 5: Cover page design featuring a fixed-top navigation bar and smoothly scrolling content

Struggling with customizing the bootstrap 5 cover page example. I really love the design, especially the header and footer (without toggle, brand staying on a single line, etc.). Want a page with more content scrolling in the middle, while keeping the nav ...

htmlcssbootstrap-5

How to prevent links from being affected by the Gooey effect in D3

Issue: When applying the Gooey effect, the links are also affected, resulting in a teardrop shape instead of a circle. The code snippet includes a dragged() function that allows users to detach node 1 from node 0 and reconnect them by dragging. The code s ...

javascriptd3.js