Breadcrumbs and cart display under navbar-CodePudding

Hello I would like to add two elements under my navbar. On the right side the cart of which you can see the content by clicking on it and on the other side, the breadcrumbs both alligned on a same row. cf. pic related

The whole thing would be dynamic also. I spent the whole day trying to find solutions without success. What would be the best way to do it? Flex display?

Thank you in advance for your help. Here is my code:

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.breadcrumbs ul{
    list-style-type: none;
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

<div >
    <div >
        <div >
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li>
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
    <div >
        <div >
        <button onclick="myFunction()" >Cart</button>
        <div id="myDropdown" >
            <span>Cart item</span>  
        </div>
        </div>
    </div>
</div>

CodePudding user response：

Two solutions come to mind.

Use margin: left on the button to push it to the further point available.
Use flex-grow: 1 or flex: 1 on the breadcrumb bar so that it uses all the available space except for that used by your button.

Working Codepen example here

CodePudding user response：

Well, you are already doing it correctly, you just have to replace the <span>Cart Item</span> with your actual items, as of the formatting you don't really need to use flex since every item will be block scoped div here's what you will have to do to generate the dynamic content:

<div >
    <div >
    <button onclick="myFunction()" >Cart</button>
    <div id="myDropdown" >
        <?php
            foreach($items as $item) {
        ?>
           <div>
                <?php $item['name'].' '.$item['quantity'].'x'; ?>
           </div>
        <?php
            }
        ?>
    </div>
    </div>
</div>

and similarly you can add the total amount and go to cart button after the loop ends.

UPDATE

I think I got the question wrong, you want your cart button to go extreme right and let the right side take whole space, here's what you should do:

<div >
    <div >
        ...
    </div>
    <div >
        ...
    </div>
</div>

Add ``flex-grow``` property to your stylesheet as:

.flex-grow-1 {
    flex-grow:1;
}

and change the existing styles:

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
}

UPDATE <800px

Simply make your .flex-container block scoped and it will center automatically:

@media (max-width: 800px) {
  .flex-container {
    display:block;
   }

Working Code Snippet

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.breadcrumbs ul{
    list-style-type: none;
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
}
.flex-grow-1{
    flex-grow:1;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    display:block;
  }
}

<div >
    <div >
        <div >
            <ul>
                <li>
                    <a href="index.php">Home</a>
                </li>
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
    <div >
        <div >
        <button onclick="myFunction()" >Cart</button>
        <div id="myDropdown" >
            <span>Cart item</span>  
        </div>
        </div>
    </div>
</div>