Не удалось заставить горизонтальное меню прокрутки работать в HTML - PullRequest
Новая
       7

Не удалось заставить горизонтальное меню прокрутки работать в HTML

0 голосов
/ 30 сентября 2018

В настоящее время я пытаюсь добиться чего-то подобного

enter image description here

, но я не смог сделать так, чтобы мои предметы были в горизонтальном расположении.

enter image description here

я пробовал много вещей, таких как пробельный подход, когда вы устанавливаете дочерний элемент для отображения: inline -block, но безрезультатно, вот мой код моегонедавняя попытка использовать flex. 

* {
  /* margin: 0;
  padding: 0;
  top:0; */
  box-sizing: border-box;
}

body {
  background: black;
}

.logo div {
  height: 55%;
  background: #C40514;
}

.logo div img {
  height: 90%;
  margin-left: 10%;
  margin-top: 0.625%;
}

#mainNav {
  position: sticky;
  top: 0;
  z-index: 1;
}

#mainNav a {
  color: white;
  background: #C40514;
  display: block;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-weight: bold;
  transition: background 0.4s;
}

#mainNav a:hover {
  background: black;
  color: white;
}

#mainNav ul {
  list-style: none;
  display: flex;
}

#mainNav li {
  width: 100%;
  text-align: center;
  position: relative;
}

#mainNav li:hover .subMenu>li {
  display: block;
  top: 0px;
}

.subMenu li {
  display: none;
  position: absolute;
  top: 0px;
  background-color: #C40514;
  color: white;
  text-align: right;
}

.subMenu li a {
  text-align: right;
  margin-top: 2%;
}

.subMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 200%;
  margin-top: 80.5%;
}

.menuTitle {
  display: flex;
  width: 100%;
  height: 100%;
  background: white;
  margin-top: -6%;
  text-align: center;
}

.menuTitle p {
  margin-left: 15%;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 150%;
  font-weight: bold;
}

.itemImage {
  width: 80%;
  height: 80%;
  object-fit: contain;
  object-position: left;
  padding-top: 4%;
  padding-left: 2%;
  float: left;
  position: absolute;
  left: 0;
}

.itemName {
  color: red;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 150%;
  font-weight: bold;
  margin-left: 40%;
  margin-top: 4%;
}

.itemPrice {
  color: black;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 110%;
  margin-left: 41%;
  margin-top: 15%;
  position: absolute;
  bottom: 25%;
}

.singleItem {
  width: 48%;
  background-color: #e0dede;
  border: 1px solid red;
  height: 150px;
  position: relative;
}

.rowItem {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2%;
  height: 150px;
  margin-top: 1%;
}

.listItems {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  /* margin-top: 130px ; */
}

.orderButtonDiv {
  display: inline;
  border: 2px solid red;
  position: relative;
  right: -50%;
  margin-top: 15%;
}

.orderButtonDiv a {
  text-decoration: none;
  color: red;
  width: 100%;
  height: 100%;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 90%;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer {
  display: flex;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 10px;
}

.footer div a {
  color: white;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ", sans-serif;
  font-size: 80%;
}

.footer div {
  margin-right: 10px;
}

.footer div a:hover {
  text-decoration: underline;
}

.social_media {
  display: flex;
  position: relative;
  bottom: 0;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  margin-bottom: 1%;
  margin-top: 3%;
}

.social_media div {
  margin-right: 30px;
}

.social_media div a {
  color: white;
}

.social_media div a:hover {
  color: yellow;
}

.purchaseWrapper {
  height: 2rem;
  background-color: white;
}

.drinkDisplay {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Vertical alignment */
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.itemy {
  flex: 1 0 25%;
  /* Adjusted. Do not allow the items to shrink */
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="newstyle.css">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <nav id="mainNav">

    <ul>
      <div class="logo">
        <div><img src="Logos/logo.png" alt="dog"></div>
      </div>
      <li><a href="#">Menu</a>
        <ul class="subMenu">
          <li><a href="menu.php?category=Burgers"> Burgers</a></li>
          <li><a href="menu.php?category=Chicken and Platter">Chicken and Platter</a></li>
          <li><a href="menu.php?category=Spicy Chicken Mcdo">Spicy Chicken McDo</a></li>
          <li><a href="menu.php?category=McSaver Meals">McSaver Meals</a></li>
          <li><a href="menu.php?category=Breakfast">Breakfast</a></li>
          <li><a href="menu.php?category=Fries 'N McFloat Combos">Fries 'N McFloat Combos</a></li>
          <li><a href="menu.php?category=Desserts">Desserts</a></li>
          <li><a href="menu.php?category=A la carte">A la carte</a></li>
          <li><a href="menu.php?category=Add Ons">Add Ons</a></li>
          <li><a href="menu.php?category=Drinks">Drinks</a></li>
        </ul>
      </li>

      <li><a href="#">My Bag</a></li>
      <li><a href="#">My Favorites</a></li>
      <li><a href="#">Order Tracker</a></li>
      <li><a href="#">My Account</a></li>
      <li>
        <a href="logout.php">
          <?php
                session_start();
                if(isset($_SESSION['username'])){
                  $name = $_SESSION['username'];
                  $name = strtoupper($name);
                  echo $name;
                }
                else {
                  echo "Login";
                }
              ?>
        </a>
      </li>


    </ul>
  </nav>



  <div class="purchaseWrapper">
    <!-- <img src="<?php echo $arr3 ?>" alt="item Image">
        <div class="nameDiv"><p><?php echo $arr1 ?></p></div>
        <div class="priceDiv"><p><?php echo $arr2 ?></p></div> -->

    <div class="drinkDisplay">
      <div class="itemy"> Menu1</div>
      <div class="itemy"> Menu2</div>
      <div class="itemy"> Menu3</div>
      <div class="itemy"> Menu4</div>
      <div class="itemy"> Menu5</div>
      <div class="itemy"> Menu6</div>
      <div class="itemy"> Menu7</div>
      <div class="itemy"> Menu8</div>
    </div>

  </div>



  <div class="social_media">
    <div><a target="_blank" rel="noopener" href="https://www.facebook.com/McDo.ph/"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i></a></div>
    <div><a target="_blank" rel="noopener" href="https://instagram.com/mcdo_ph/?hl=en"><i class="fa fa-instagram fa-3x"></i></a></div>
    <div><a target="_blank" rel="noopener" href="https://twitter.com/mcdo_ph"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a></div>
  </div>


  <div class="footer">
    <div><a href="">ABOUT</a></div>
    <div><a href="">CHARITY</a></div>
    <div><a href="">CAREERS</a></div>
    <div><a href="">PRESS CENTRE</a></div>
    <div><a href="">GALLERY</a></div>
    <div><a href="">BUSINESS OPPORTUNITY</a></div>
    <div><a href="">CUSTOMER CARE</a></div>
    <div><a href="">NEWSLETTER</a></div>
    <div><a href="">TERMS AND CONDITION</a></div>
    <div><a href="">PRIVACY POLICY</a></div>
  </div>




</body>

</html>

Спасибо!

Я бы предпочел это только в html и css, но я открыт для других способов :)

edit:

Что-то не так с браузером (chrome)Я попытался с помощью Microsoft край, и он отлично работает там.но я почти уверен, что flex работает на chrome, даже если элементы страницы используют flex и они отображаются нормально.

1 Ответ

0 голосов
/ 30 сентября 2018

Я включил в свой пост только соответствующий CSS и задокументировал изменения в CSS.Надеюсь, это поможет. 

* {
  /* margin: 0;
  padding: 0;
  top: 0; Do never position all elements at top */ 
  box-sizing: border-box;
}

body {
  background: black;
}

.purchaseWrapper {
  /* height: 150%; It takes 150% of the parent, which is not set */
  height: 2rem; /* Added */
  background: white;
  /* margin-top: -3%; Removed */
}

.drinkDisplay {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; /* Vertical alignment */
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.itemy {
  flex: 1 0 25%; /* Adjusted. Do not allow the items to shrink */
}
<div class="purchaseWrapper">
  <div class="drinkDisplay">
    <div class="itemy"> Menu1</div>
    <div class="itemy"> Menu2</div>
    <div class="itemy"> Menu3</div>
    <div class="itemy"> Menu4</div>
    <div class="itemy"> Menu5</div>
    <div class="itemy"> Menu6</div>
    <div class="itemy"> Menu7</div>
    <div class="itemy"> Menu8</div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...