Alignment button inside the navigation bar-CodePudding

The following code transforms a set of data in JSON format into buttons within a navigation bar. The bar contains a logo on the left, the buttons that are generated in the middle and a logOut button on the left. Not really and very familiar with html and css so I'm just learning, so far I've tried using inline but it doesn't seem to work.

My question is how can I make the logout button not be located outside the bar.

I would appreciate any kind of guidance, thanks.

const info = '[\n  {\n    "name": "Dropdown 1",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 2",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 3",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 4",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 5",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  }\n]\n';

function LoadMenu(jsonStr) {
        const data = JSON.parse(jsonStr);
        $.each(data, function (i, option) {
          $("#menu").append(
            $("<li/>")
              .addClass("parent")
              .append($("<button/>").addClass("botones").append(option.name))
              .append(
                $("<div/>")
                  .addClass("wrapper")
                  .append(
                    $("<ul/>")
                      .attr("id", `dropdown-${i}`)
                      .addClass("dropdown__content")
                  )
              )
          );
          $.each(option.dropdown, function (j, link) {
            $(`#dropdown-${i}`).append(
              $("<li/>").append(
                $("<a/>").append(link.name).attr("href", link.link)
              )
            );
          });
        });
      }
      LoadMenu(info);

      $(function () {
        // whenever we hover over a menu item that has a submenu
        $("li.parent").on("mouseover", function () {
          var $menuItem = $(this),
            $submenuWrapper = $("> .wrapper", $menuItem);

          // grab the menu item's position relative to its positioned parent
          var menuItemPos = $menuItem.position();

          // place the submenu in the correct position relevant to the menu item
          $submenuWrapper.css({
            bottom: menuItemPos.bottom,
            left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0),
          });
        });
      });

     body {
  background-color: lightblue;
}
      
      .wrapper {
        position: relative;
      }

      .principal {
        display: flex;
        overflow-x: auto;
      }

      .dropdown__content {
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }

      .dropdown__content a {
        color: black;
        text-decoration: none;
        display: block;
      }

      .botones {
        background-color: white;
        border: none;
        color: #0b2971;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 15px;
        width: 170px;
        height: 50px;
      }
      
      .botones:hover{
        background-color: #0b2971;
        color: white;
      }
      
      ul {
        list-style: none;
      }
      li {
        position: static;
      }
      li .wrapper {
        position: absolute;
        z-index: 10;
        display: none;
      }

      li:hover > .wrapper {
        display: block;
      }
      
      .topnav {
        overflow: hidden;
        background-color: white;
        }
        
       .topnav a {
         float: left;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         }

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>
  <body>
  
  
  <div >
    <a  href="#home"><img src="https://security.arizona.edu/sites/default/files/World Wide Technology Horizontal Logo Full Color.png" height="50"></a>
    <ul  id="menu"></ul>
    <a id = logOut href="#"  style="float:right"><span ></span></a>
  </div>
  

    

  </body>
</html>

CodePudding user response：

Add the below property to the class topnav

display: flex;
justify-content: space-around;

const info = '[\n  {\n    "name": "Dropdown 1",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 2",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 3",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 4",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 5",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  }\n]\n';

function LoadMenu(jsonStr) {
  const data = JSON.parse(jsonStr);
  $.each(data, function(i, option) {
    $("#menu").append(
      $("<li/>")
      .addClass("parent")
      .append($("<button/>").addClass("botones").append(option.name))
      .append(
        $("<div/>")
        .addClass("wrapper")
        .append(
          $("<ul/>")
          .attr("id", `dropdown-${i}`)
          .addClass("dropdown__content")
        )
      )
    );
    $.each(option.dropdown, function(j, link) {
      $(`#dropdown-${i}`).append(
        $("<li/>").append(
          $("<a/>").append(link.name).attr("href", link.link)
        )
      );
    });
  });
}
LoadMenu(info);

$(function() {
  // whenever we hover over a menu item that has a submenu
  $("li.parent").on("mouseover", function() {
    var $menuItem = $(this),
      $submenuWrapper = $("> .wrapper", $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      bottom: menuItemPos.bottom,
      left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0),
    });
  });
});

body {
  background-color: lightblue;
}

.wrapper {
  position: relative;
}

.principal {
  display: flex;
  overflow-x: auto;
}

.dropdown__content {
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown__content a {
  color: black;
  text-decoration: none;
  display: block;
}

.botones {
  background-color: white;
  border: none;
  color: #0b2971;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
  width: 170px;
  height: 50px;
}

.botones:hover {
  background-color: #0b2971;
  color: white;
}

ul {
  list-style: none;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: block;
}

.topnav {
  overflow: hidden;
  background-color: white;
  display: flex;
  justify-content: space-around;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


  <div >
    <a  href="#home"><img src="https://security.arizona.edu/sites/default/files/World Wide Technology Horizontal Logo Full Color.png" height="50"></a>
    <ul  id="menu"></ul>
    <a id=l ogOut href="#"  style="float:right"><span ></span></a>
  </div>




</body>

</html>

CodePudding user response：

added display: flex;flex-wrap: nowrap in below css

.topnav {
    overflow: hidden;
    background-color: white;
    display: flex;
    flex-wrap: nowrap
    }

const info = '[\n  {\n    "name": "Dropdown 1",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 2",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 3",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 4",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  },\n  {\n    "name": "Dropdown 5",\n    "dropdown": [\n      {\n        "name": "Google",\n        "link": "www.google.com"\n      },\n      {\n        "name": "Coin Market Cap",\n        "link": "www.coinmarketcap.com"\n      }\n    ]\n  }\n]\n';

function LoadMenu(jsonStr) {
        const data = JSON.parse(jsonStr);
        $.each(data, function (i, option) {
          $("#menu").append(
            $("<li/>")
              .addClass("parent")
              .append($("<button/>").addClass("botones").append(option.name))
              .append(
                $("<div/>")
                  .addClass("wrapper")
                  .append(
                    $("<ul/>")
                      .attr("id", `dropdown-${i}`)
                      .addClass("dropdown__content")
                  )
              )
          );
          $.each(option.dropdown, function (j, link) {
            $(`#dropdown-${i}`).append(
              $("<li/>").append(
                $("<a/>").append(link.name).attr("href", link.link)
              )
            );
          });
        });
      }
      LoadMenu(info);

      $(function () {
        // whenever we hover over a menu item that has a submenu
        $("li.parent").on("mouseover", function () {
          var $menuItem = $(this),
            $submenuWrapper = $("> .wrapper", $menuItem);

          // grab the menu item's position relative to its positioned parent
          var menuItemPos = $menuItem.position();

          // place the submenu in the correct position relevant to the menu item
          $submenuWrapper.css({
            bottom: menuItemPos.bottom,
            left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0),
          });
        });
      });

body {
  background-color: lightblue;
}
      
      .wrapper {
        position: relative;
      }

      .principal {
        display: flex;
        overflow-x: auto;
      }

      .dropdown__content {
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }

      .dropdown__content a {
        color: black;
        text-decoration: none;
        display: block;
      }

      .botones {
        background-color: white;
        border: none;
        color: #0b2971;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 15px;
        width: 170px;
        height: 50px;
      }
      
      .botones:hover{
        background-color: #0b2971;
        color: white;
      }
      
      ul {
        list-style: none;
      }
      li {
        position: static;
      }
      li .wrapper {
        position: absolute;
        z-index: 10;
        display: none;
      }

      li:hover > .wrapper {
        display: block;
      }
      
      .topnav {
        overflow: hidden;
        background-color: white;
        display: flex;
        flex-wrap: nowrap
        }
        
       .topnav a {
         float: left;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         }

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>
  <body>
  
  
  <div >
    <a  href="#home"><img src="https://security.arizona.edu/sites/default/files/World Wide Technology Horizontal Logo Full Color.png" height="50"></a>
    <ul  id="menu"></ul>
    <a id = logOut href="#"  style="float:right"><span ></span></a>
  </div>
  

    

  </body>
</html>