What is the way to integrate custom html,css,js dropdown to phtml file

magento.stackexchange https://magento.stackexchange.com/questions/331334

Question

I am created a dropdown design using html, css and js.

<!doctype html>
<html lang="en">

<head>
  <style>
    .dropdown-menu {
      max-width: max-content;
      width: 400px;

    }

    .popupmenu-body {
      max-width: max-content;
      width: 400px;
    }

    .location-label {
      font-size: 16px;
      color: #545454;

    }

    .location-name {
      font: normal normal bold 19px Laca;
      letter-spacing: 0px;
      color: #545454;
    }

    .location-change {
      font: 17px Laca;
      letter-spacing: 0px;
      color: #F1592A;
      cursor: pointer;

    }

    .nearest-store-title {
      font: normal normal bold 21px Laca;
      letter-spacing: 0px;
      color: #545454;
    }



    .btn-view-all-store {
      display: inline-block;
      width: 360px;
      height: 50px;
      padding: 0px 30px;
      background-color: #F1592A;
      border-radius: 4px;
      border: 0;
      color: #FFFFFF;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      cursor: pointer;

    }

    .btn-view-all-store:hover {
      color: #FFFFFF;
      background-color: #f1582aad;
    }

    .btn-update {
      display: inline-block;
      padding: 0px 30px;
      background-color: #fff;
      border-radius: 4px;
      border-width: 1px;
      border-color: #F1592A;
      color: #F1592A;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      cursor: pointer;


    }

    .btn-update:hover {}

    .location-change-data {
      font: 17px Laca;
      letter-spacing: 0px;
      color: #F1592A;
      cursor: pointer;

    }

    .location-name {
      font: normal normal bold 18px Laca;
      color: #545454;
    }

    .location-address {
      font: normal normal normal 17px Laca;
      color: #545454;
    }

    .location-distance {
      font: normal normal normal 14px Laca;
      color: #545454;
    }

    .location-btn {
      font: normal normal medium 1 15px Laca;
      color: #F1592A;
      cursor: pointer;

    }

    .location-btn:hover {
      color: #a52600;
    }
  </style>

  <meta charset="utf-8">
  <title>Popoversample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
  <script>
    var carName = "Volvo";
  </script>
</head>

<body>

  <div class="dropdown show">
    <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      Click Me
    </a>

    <div class="dropdown-menu popupmenu-body" aria-labelledby="dropdownMenuLink" (click)="$event.stopPropagation()">

      <p>hi</p>
      
    </div>
  </div>
</body>
</html>

I have a custom link on the header,

<div class="my-custom-link">
....
....
....
</div>

If click this div i want to show my dropdown.

I am using a custom theme, app\design\frontend\Zero\my_theme\Magento_Theme\templates\custom_link.phtml

How to add my custom dropdown to this phtml file

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top