0

Какой раз я сталкиваюсь с проблемой: если в одном месте вставишь элемент (рисунок, текст), то в каком-то другом месте происходит выталкивание других элементов. Как обойти эту проблему в коде, для того чтобы рисунки (иконки) располагались слева от пунктов меню Каталог товаров (и чтобы пункты меню типа Бытовая техника для кухни, Бытовая техника для дома располагались по центру блоков) вот так:

введите сюда описание изображения

.menu {
  position: relative;
  width: 370px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0.5em 0 0.5em 0.3em;
  cursor: pointer;
}

ul.level1 {
  border: 1px solid thistle;
}

ul.level1>li {
  background-color: #fff;
  border-bottom: 1px solid thistle;
}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: -35px;
  left: 100%;
  max-width: 559px;
  max-height: 1010px;
  padding: 0.5em 0.3em 0.5em 0.3em;
  background-color: #fff;
  border: 1px solid thistle;
  visibility: hidden;
  white-space: nowrap;
  column-count: 2;
}

ul.level2>li {
  padding: 0;
  border-bottom: 1px solid #fff;
}

ul.level2>ul>li {
  padding: 0;
}

ul.level2>li>ul>li {
  padding: 0;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.alignblock {
  text-align: center;
  vertical-align: middle;
}

.submenu__title {
  margin-bottom: 5px;
}

.submenu__title a {
  display: block;
  color: black;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  /* line-height: 1.5; */
  text-decoration: none;
  padding: 3px 5px;
}

.submenu__item {
  /* margin-bottom: 0px; */
}

.submenu__item a {
  display: block;
  color: gray;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  text-decoration: none;
  padding: 3px 5px;
}
<html>
<head>
<link rel="stylesheet" href="mysite.css">
</head>
<body>
<div class="mainwrap">
  <div class="mainmenu">
    <span>
                <span>
                    <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
                    <span class="hamb-top"></span>
    <span class="hamb-middle"></span>
    <span class="hamb-bottom"></span>
    </button>
    </span>
    <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
    </span>

    <nav class="menu">
      <ul class="level1">
        <li id="l1">
          <div class="alignblock">Бытовая техника для кухни</div>
          <ul class="level2">
            <li class="submenu">
              <ul>
                <li class="submenu__title">
                  <a href="#">Крупная бытовая техника</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>

              <ul>
                <li class="submenu__title">
                  <a href="#">New title</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 2</div>
        </li>
        <li id="l3">
          <div class="alignblock">Item 3 +</div>
          <ul class="level2">
            <li>Sub-Item 3-1</li>
            <li>Sub-Item 3-2</li>
            <li>Sub-Item 3-3</li>
            <li>Sub-Item 3-4</li>
            <li>Sub-Item 3-5</li>
            <li>Sub-Item 3-6</li>
            <li>Sub-Item 3-7</li>
            <li>Sub-Item 4-8</li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 4</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 5</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 6</div>
        </li>
      </ul>
    </nav>
  </div>

</div>
</body>
</html>

Вот как пример Рисунок для опробывания

9
  • @Sevastopol' (только не нервничайте и отнеситесь с пониманием к вопросам новичка - извиняюсь за настырность, проявившуюся в смежных вопросах, подчеркиваю смежных, а не тех же). То вопрос был о расстоянии между пунктами, а текущий вопрос про вставку рисунков в каждый пункт меню (как говорит наш президент не смешивайте мух с котлетами -:), шутка) Можете подробно привести на примере приведенного выше в вопросе кода - каким образом организовать вставку (что за before и какие есть еще варианты кроме before).
    – goodsoft
    25 фев 2021 в 15:36
  • вот именно я никак не могу вставить иконки. Что за before и какие есть еще методы для вставки иконки?
    – goodsoft
    25 фев 2021 в 15:49
  • @Sevastopol' да напишите (мне как новичку будет полезно).
    – goodsoft
    25 фев 2021 в 15:58
  • @Sevastopol' все это разные вопросы (подчеркиваю разные по смыслу), связанные с одним объектом - меню.
    – goodsoft
    25 фев 2021 в 16:42
  • @Sevastopol: новичку, если он проходит курс и это его задание, должен был препод объяснить, что да как. Если человек взял проект, как самоучка, то за то время, сколько он флудит этим вопросом, уже наизусть учебник бы выучил. Если же "горит" реальный заказ...
    – UModeL
    25 фев 2021 в 16:43

1 ответ 1

2

Вот например как вы можете вставлять иконки в меню напротив ссылок, через псевдоэлементы before или after. Как правило, чаще всего так и делают:

a {text-decoration: none; display: block; line-height: 32px; padding: 5px 5px 5px 30px; border-bottom: 1px solid lightgray;}

.one::before,
.two::before {
  content: ""; float: left; display: block;
  margin-right: 16px; width: 32px; height: 32px;
  background-size: 32px;
}

.one::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi09.png);}

.two::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi19.png);}
<a href="#" class="one">Ссылка первая</a>
<a href="#" class="two">Ссылка вторая</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.