JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <h1 class="top">
          <img src="img/logo2.jpg" alt="logo"/> 
       </h1>
  <nav class="container" class="navi">
    <div class="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html">Home</a>
        </li>
        <li id="about"><a href="about.html">About</a>
        </li>
        <li><a href="data.html">Data</a>
        </li>
        <li><a href="visual.html">Visual</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<header class="header">
  <h1 class="top">
          <img src="img/logo2.jpg" alt="logo"/> 
       </h1>
  <nav class="container" class="navi">
    <div class="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html">Home</a>
        </li>
        <li id="about"><a href="about.html">About</a>
        </li>
        <li><a href="data.html">Data</a>
        </li>
        <li><a href="visual.html">Visual</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

JavaScript

//Create the dropdown base
$("<select class='drd'></select>").appendTo(".navbar");

//Create default option "Go to..."
$("<option></option>", {
  "selected": "selected",
  "value": "",
  "text": "Go to..."
}).appendTo(".drd");

//Populate dropdown with menu items
$(".navbar").each(function() {
  var sel = $(this).find(".drd");
  var lia = $(this).find("ul li a");

  lia.each(function() {
    var el = $(this);
    $("<option></option>", {
      "value": el.attr("href"),
      "text": el.text()
    }).appendTo(sel);
  });

});

//To make the dropdown menu actually work
$(".drd").change(function() {
  window.location = $(this).find("option:selected").val();
});