Как создать панель навигации, как у Apple?

Как я могу создать панель навигации, как у Apple? Я попробовал, и вот что у меня есть: Как создать панель навигации, как у Apple?

Как видите, интервалы между кнопками немного сбиты. Для этого я использовал justify-content: space-around. Я пытался сделать интервал таким же, как на веб-сайте Apple, но безуспешно, и мне было интересно, может ли кто-нибудь мне помочь. Для справки, вот панель навигации на веб-сайте Apple.

Вот что я пробовал:

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class = "wrapper">
  <nav>
    <ul>
      <li><a href = "#"><i class = "fab fa-houzz"></i></a></li>
      <li><a href = "#">Ban</a></li>
      <li><a href = "#">Warn</a></li>
      <li><a href = "#">Gift</a></li>
      <li><a href = "#">User</a></li>
    </ul>
  </nav>
</div>

body{margin:0px}

— 09.07.2018 17:28

0 не имеет единиц измерения, поэтому 0px не нужен ... но это не решит проблему.

— 09.07.2018 17:28

Почему нельзя просто скопировать / вставить стиль от Apple?

— 09.07.2018 17:29

@DhavalJardosh Это уже сделал, забыл включить. Но боюсь, это не решит мою проблему.

— 09.07.2018 17:32

@OmarDajani, пожалуйста, проверьте ответ, и это именно то, что вам нужно для больших экранов. Для небольших экранов вам нужно будет добавить медиа-запросы, а также использовать что-то похожее на navbar-collapse

— 09.07.2018 18:03

html css flexbox

09.07.2018 17:23

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

6 193

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Несколько вещей:

Apple применяет «контейнер» с «максимальной шириной» для навигации. Это было добавлено ниже.
Я скорректировал некоторые стили, чтобы улучшить внешний вид. Комментарии в CSS ниже.
Если присмотреться, у Apple есть «мертвое пространство» между ссылками. Это также существует в этой разметке / макете.

Если это не решит вашу проблему, тогда посоветуйте, что вы имеете в виду под "интервал отключен" - конкретнее и ясно, иначе помочь невозможно .... :)

body {
margin: 0;
}

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center; /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px; /* change to desired width */
  /* removed height from here, apply to a elements */
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto; /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px; /* apply the height here, pushes the li / ul to be the correct height */
  line-height: 44px; /* to get vertical centering */
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class = "wrapper">
  <nav>
    <ul>
      <li><a href = "#"><i class = "fab fa-houzz"></i></a></li>
      <li><a href = "#">Ban</a></li>
      <li><a href = "#">Warn</a></li>
      <li><a href = "#">Gift</a></li>
      <li><a href = "#">User</a></li>
    </ul>
  </nav>
</div>

Ох, ладно. Вы частично ответили на мой вопрос. Я хотел бы, чтобы кнопки располагались по центру панели навигации и имели равные интервалы как с правой, так и с левой стороны панели. Или, другими словами, я хотел бы, чтобы пространство справа и слева от панели и кнопок было по центру. Я также хотел бы иметь возможность изменить расстояние между кнопками и сделать их одинаковыми. Спасибо за Ваш ответ! :)

— 09.07.2018 17:39

1. Чтобы управлять шириной (что повлияет на интервал) для отдельных кнопок, Apple фактически применяет определенную ширину к элементам. 2. На более широком экране расстояние от левого края экрана (и правого края экрана) до левого края навигации (и правого края навигации) равно ....

— 09.07.2018 17:44

09.07.2018 17:35

Если вы хотите оставить пространство между каждой кнопкой и кнопкой, вы должны использовать команду margin, чтобы сделать разрыв и расстояние между всеми кнопками одинаково. Поместите margin перед кнопкой, которую вы хотите сделать на равном расстоянии между ней и остальными кнопками, а затем определите его в стиле, задав расстояние, которое вы хотите между каждой кнопкой, и используйте команду margin и выберите направление, в котором вы хотите установить расстояние между и другую кнопку, если она левая или правая, например:

margin-right: 20px;

Привет, Далал! Спасибо, что присоединились к StackOverflow и предложили свою помощь! Могу я предложить вам прочитать Как ответить, а также - не публиковать несколько подобных ответов. Это действительно должны быть комментарии - я знаю, что у вас еще нет представителя, который мог бы добавлять комментарии, но вы скоро ...

— 09.07.2018 18:26

09.07.2018 17:45

Расположите перед кнопкой, которую вы хотите сделать на равном расстоянии между ней и остальными кнопками, а затем определите ее в стайле, установив расстояние, которое вы хотите между каждой кнопкой, и используйте команду и выберите направление, в котором вы хотите установить расстояние между и другой кнопка, если слева или справа, например

09.07.2018 17:52

Ответ принят как подходящий

Вам нужно будет добавить дополнительную оболочку к ul, скажем, "appleNav"

Добавьте следующие свойства в appleNav

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  height: 100vh;
}

body {
  margin: 0;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

<div class = "wrapper">
  <nav>
    <div class = "appleNav">
      <ul>
        <li>
          <a href = "#"><img src = "https://www.iconsdb.com/icons/preview/white/apple-xxl.png" height = "20"></a>
        </li>
        <li><a href = "#">Mac</a></li>
        <li><a href = "#">iPad</a></li>
        <li><a href = "#">iPhone</a></li>
        <li><a href = "#">Watch</a></li>
        <li><a href = "#">TV</a></li>
        <li><a href = "#">Music</a></li>
        <li><a href = "#">Support</a></li>
        <li>
          <a href = "#"><img src = "https://www.iconsdb.com/icons/preview/white/search-3-xxl.png" height = "20"></a>
        </li>
        <li><a href = "#">User</a></li>
      </ul>
    </div>
  </nav>
</div>

Попался! Это сработало! Большое спасибо, это сработало отлично! Но что, если я захочу изменить расстояние между каждой кнопкой?

— 09.07.2018 19:15

вы можете настроить его, нажав эту конкретную кнопку. Пожалуйста, проверьте выбор nth-child. Вам следует использовать что-то вроде li:nth-child(4).

— 09.07.2018 20:26

09.07.2018 17:53

Вот их код в этой кодовой ручке: https://codepen.io/anon/pen/aRKjzz

<nav id = "ac-globalnav" class = "js no-touch" role = "navigation" aria-label = "Global" data-hires = "false" data-analytics-region = "global nav" lang = "en-US" dir = "ltr" data-store-locale = "us" data-store-api = "/[storefront]/shop/bag/status" data-search-locale = "en_US" data-search-api = "/search-services/suggestions/">
<div class = "ac-gn-content">
    <ul class = "ac-gn-header">
        <li class = "ac-gn-item ac-gn-menuicon">
            <label class = "ac-gn-menuicon-label" for = "ac-gn-menustate" aria-hidden = "true">
                <span class = "ac-gn-menuicon-bread ac-gn-menuicon-bread-top">
                    <span class = "ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span>
                </span>
                <span class = "ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom">
                    <span class = "ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span>
                </span>
            </label>
            <a href = "#ac-gn-menustate" class = "ac-gn-menuanchor ac-gn-menuanchor-open" id = "ac-gn-menuanchor-open">
                <span class = "ac-gn-menuanchor-label">Open Menu</span>
            </a>
            <a href = "#" class = "ac-gn-menuanchor ac-gn-menuanchor-close" id = "ac-gn-menuanchor-close">
                <span class = "ac-gn-menuanchor-label">Close Menu</span>
            </a>
        </li>
        <li class = "ac-gn-item ac-gn-apple">
            <a class = "ac-gn-link ac-gn-link-apple" href = "/" data-analytics-title = "apple home" id = "ac-gn-firstfocus-small">
                <span class = "ac-gn-link-text">Apple</span>
            </a>
        </li>
        <li class = "ac-gn-item ac-gn-bag ac-gn-bag-small" id = "ac-gn-bag-small">
            <a class = "ac-gn-link ac-gn-link-bag" href = "/us/shop/goto/bag" data-analytics-title = "bag" data-analytics-click = "bag" aria-label = "Shopping Bag" data-string-badge = "Shopping Bag with Items" role = "button" aria-haspopup = "true" aria-expanded = "false" aria-controls = "ac-gn-bagview-content">
                <span class = "ac-gn-link-text">Shopping Bag</span>
                <span class = "ac-gn-bag-badge"></span>
            </a>
            <span class = "ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <div class = "ac-gn-search-placeholder-container" role = "search">
        <div class = "ac-gn-search ac-gn-search-small">
            <a id = "ac-gn-link-search-small" class = "ac-gn-link" href = "/us/search" data-analytics-title = "search" data-analytics-click = "search" data-analytics-intrapage-link = "" aria-label = "Search apple.com" role = "button" aria-haspopup = "true">
                <div class = "ac-gn-search-placeholder-bar">
                    <div class = "ac-gn-search-placeholder-input">
                        <div class = "ac-gn-search-placeholder-input-text" aria-hidden = "true">
                            <div class = "ac-gn-link-search ac-gn-search-placeholder-input-icon"></div>
                            <span class = "ac-gn-search-placeholder">Search apple.com</span>
                        </div>
                    </div>
                    <div class = "ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close">
                        <span class = "ac-gn-searchview-close-cancel" aria-hidden = "true">Cancel</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <ul class = "ac-gn-list">
        <li class = "ac-gn-item ac-gn-apple">
            <a class = "ac-gn-link ac-gn-link-apple" href = "/" data-analytics-title = "apple home" id = "ac-gn-firstfocus">
                    <span class = "ac-gn-link-text">Apple</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-mac">
            <a class = "ac-gn-link ac-gn-link-mac" href = "/mac/" data-analytics-title = "mac">
                    <span class = "ac-gn-link-text">Mac</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-ipad">
            <a class = "ac-gn-link ac-gn-link-ipad" href = "/ipad/" data-analytics-title = "ipad">
                    <span class = "ac-gn-link-text">iPad</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-iphone">
            <a class = "ac-gn-link ac-gn-link-iphone" href = "/iphone/" data-analytics-title = "iphone">
                    <span class = "ac-gn-link-text">iPhone</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-watch">
            <a class = "ac-gn-link ac-gn-link-watch" href = "/watch/" data-analytics-title = "watch">
                    <span class = "ac-gn-link-text">Watch</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-tv">
            <a class = "ac-gn-link ac-gn-link-tv" href = "/tv/" data-analytics-title = "tv">
                    <span class = "ac-gn-link-text">TV</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-music">
            <a class = "ac-gn-link ac-gn-link-music" href = "/music/" data-analytics-title = "music">
                    <span class = "ac-gn-link-text">Music</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-support">
            <a class = "ac-gn-link ac-gn-link-support" href = "https://support.apple.com" data-analytics-title = "support">
                    <span class = "ac-gn-link-text">Support</span>
                </a>
        </li>
        <li class = "ac-gn-item ac-gn-item-menu ac-gn-search" role = "search">
            <a id = "ac-gn-link-search" class = "ac-gn-link ac-gn-link-search" href = "/us/search" data-analytics-title = "search" data-analytics-click = "search" data-analytics-intrapage-link = "" aria-label = "Search apple.com" role = "button" aria-haspopup = "true"></a>
        </li>
        <li class = "ac-gn-item ac-gn-bag" id = "ac-gn-bag">
            <a class = "ac-gn-link ac-gn-link-bag" href = "/us/shop/goto/bag" data-analytics-title = "bag" data-analytics-click = "bag" aria-label = "Shopping Bag" data-string-badge = "Shopping Bag with Items" role = "button" aria-haspopup = "true" aria-expanded = "false" aria-controls = "ac-gn-bagview-content">
                    <span class = "ac-gn-link-text">Shopping Bag</span>
                    <span class = "ac-gn-bag-badge" aria-hidden = "true"></span>
                </a>
            <span class = "ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <aside id = "ac-gn-searchview" class = "ac-gn-searchview" role = "search" data-analytics-region = "search">
        <div class = "ac-gn-searchview-content">
            <div class = "ac-gn-searchview-bar">
                <div class = "ac-gn-searchview-bar-wrapper">
                    <form id = "ac-gn-searchform" class = "ac-gn-searchform" action = "/us/search" method = "get">
                        <div class = "ac-gn-searchform-wrapper">
                            <input id = "ac-gn-searchform-input" class = "ac-gn-searchform-input" type = "text" aria-label = "Search apple.com" placeholder = "Search apple.com" autocorrect = "off" autocapitalize = "off" autocomplete = "off" spellcheck = "false">
                            <input id = "ac-gn-searchform-src" type = "hidden" name = "src" value = "globalnav">
                            <button id = "ac-gn-searchform-submit" class = "ac-gn-searchform-submit" type = "submit" disabled = "" aria-label = "Submit Search"></button>
                            <button id = "ac-gn-searchform-reset" class = "ac-gn-searchform-reset" type = "reset" disabled = "" aria-label = "Clear Search">
                                    <span class = "ac-gn-searchform-reset-background"></span>
                                </button>
                        </div>
                    </form>
                    <button id = "ac-gn-searchview-close-small" class = "ac-gn-searchview-close ac-gn-searchview-close-small" aria-label = "Cancel Search">
                            <span class = "ac-gn-searchview-close-cancel" aria-hidden = "true">
                                Cancel
                            </span>
                        </button>
                </div>
            </div>
            <aside id = "ac-gn-searchresults" class = "ac-gn-searchresults" data-string-quicklinks = "Quick Links" data-string-suggestions = "Suggested Searches" data-string-noresults = ""> <section class = "ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks" data-analytics-region = "defaultlinks search">
    <div class = "ac-gn-searchresults-section-wrapper">
        <h3 class = "ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3>
        <ul class = "ac-gn-searchresults-list">
            <li class = "ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href = "https://www.apple.com/retail/" class = "ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query = "no keyword" data-section = "defaultlinks" data-items = "5" data-index = "0" data-label = "Find a Store" data-analytics-click = "eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Find a Store</a>
            </li>
            <li class = "ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href = "https://www.apple.com/us/shop/goto/accessories/apple_accessories" class = "ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query = "no keyword" data-section = "defaultlinks" data-items = "5" data-index = "1" data-label = "Accessories" data-analytics-click = "eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Accessories</a>
            </li>
            <li class = "ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href = "https://www.apple.com/ipod/" class = "ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query = "no keyword" data-section = "defaultlinks" data-items = "5" data-index = "2" data-label = "iPod" data-analytics-click = "eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iPod</a>
            </li>
            <li class = "ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href = "https://www.apple.com/ios/" class = "ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query = "no keyword" data-section = "defaultlinks" data-items = "5" data-index = "3" data-label = "iOS" data-analytics-click = "eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iOS</a>
            </li>
            <li class = "ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href = "https://www.apple.com/us/shop/goto/giftcards" class = "ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query = "no keyword" data-section = "defaultlinks" data-items = "5" data-index = "4" data-label = "Gift Cards" data-analytics-click = "eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Gift Cards</a>
            </li>
        </ul>
    </div>
</section>

CSS слишком велик, чтобы включать его сюда.

20.10.2018 23:37

.wrapper {
  height: 100vh;
}

body {
  margin: 0;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

<div class = "wrapper">
  <nav>
    <div class = "appleNav">
      <ul>
        <li>
          <a href = "#"><img src = "https://www.iconsdb.com/icons/preview/white/apple-xxl.png" height = "20"></a>
        </li>
        <li><a href = "#">Mac</a></li>
        <li><a href = "#">iPad</a></li>
        <li><a href = "#">iPhone</a></li>
        <li><a href = "#">Watch</a></li>
        <li><a href = "#">TV</a></li>
        <li><a href = "#">Music</a></li>
        <li><a href = "#">Support</a></li>
        <li>
          <a href = "#"><img src = "https://www.iconsdb.com/icons/preview/white/search-3-xxl.png" height = "20"></a>
        </li>
        <li><a href = "#">User</a></li>

      </ul>
    </div>
  </nav>
</div>

Пожалуйста, добавьте контекст к вашему ответу, объяснив код, который вы публикуете.

— 26.12.2019 22:05

26.12.2019 21:33