Горизонтальное меню навигации с иконками?

Question

[Oleg Front]

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

Answer 1

[Konstantin]

<div class="menu">
    <a class="menu-item-bank">Банки</a>
    <a class="menu-item-advice">Советы</a>
    <a class="menu-item-experience">Личный опыт</a>
    <a class="menu-item-expert">Эксперты</a>
    <a class="menu-item-forum">Форум</a>
    <a class="menu-item-news">Новости</a>
</div>

.menu{
   position:relative;
}
.menu-item-bank,
.menu-item-advice,
.menu-item-experience,
.menu-item-expert,
.menu-item-forum,
.menu-item-news{
   display:inline-block
   padding:4px 4px 4px 24px;
   background: transparent url("sprite.png");
   border-bottom-width:3px;
   border-bottom-style: solid;
}
.menu-item-bank{background-position:0 0;border-bottom-color:#001}
.menu-item-advice{background-position:-24px -24px;border-bottom-color:#002}
.menu-item-experience{background-position:-48px -48px;border-bottom-color:#003}
.menu-item-expert{background-position:-72px -72px;border-bottom-color:#004}
.menu-item-forum{background-position:-96px -96px;border-bottom-color:#005}
.menu-item-news{background-position:-120px -120px;border-bottom-color:#006}

можно как-то так :)

Answer 2

[Ilya Korablev]

<nav>
<div class="banki">
<img src="img/banki.png"/><a href="banki.html"></a>
</div>
</nav>

Не?

+Можно посмотреть исходник сайта, и посмотреть, как там это сделано
++Можно через нумерованный список. Тег <li>, если что

Comments

[Сергей Попов]

Иконку вставлять картинкой?) Вы с ума сошли) даже если так вы пропустили обязательные атрибуты тега img

Answer 3

[mr_dev1l]

Если сайт на WP, то там уже есть такая функция в настройках меню. Если же все руками, то лучше делать через background.

<ul id="top_menu">
<li class="menu_item1"><a href="/banki.html">Банки</a></li>
<li class="menu_item2"><a href="/soveti.html">Советы</a></li>
</ul>

и потом в css уже накидать свойства.

#top_menu {
width:100%;
position:relative;
display:block;
}
.menu_item1 {
 background:url("/img/banki.png") no-repeat left center;
padding:10px 0 10px 20px;//правый отступ под сам background
width:120px;// для каждого уже свой
border-bottom:3px solid цвет;
}

Comments

[jlekapb]

о какой функции wp речь?

Answer 4

[Сергей delphinpro]

как правильно

Делаем все иконки в svg, собираем в спрайт. Svg будет легко перекрашивать стилями.
Делаем простую разметку ul>li>svg+span

<ul>
  <li>
    <svg>...</svg>
    <span>title</span>
  </li>
</ul>

ul {
  display: flex;
}
li {
  display: flex;
}
svg {
  w16px;
  h16px;
  flex-shrink: 0;
}

Раскраску делаем либо отдельными классами, либо с помощью nth-child()