Задать вопрос

Genri_Rus

Комментарии

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, )

    Так проблема в том, что флекс в мобильной версии сделает меню в строку
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, проблема еще вот в чем
    <nav class="header__nav menu menu--opened">
    <ul class="menu__list menu__list--main">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
    <ul class="menu__list menu__list--catalog">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
</nav>

    А в мобильной версии меню наоборот:
    5ea4c95421f90336136891.png
    5ea72dbbb7a59117293497.png
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, я к тому, что slick slider вроде на флексы плохо реагирует
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, спасибо, я кстати совсем забыл, у меня в нижнем меню должен быть слайдер:
    5ea61168df8f3469169555.png
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, а может покажите чисто меню на десктопе как вы бы сделали абсолютом ?

    Я так понял вы хотите соединить на десктопе верхнее и нижнее меню, а на мобильной версии его показывать уже через специальные модификаторы БЭМ ?
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena,
    Представьте, что вы ничего не знаете про стили. И будете читать разметку. Что вы поймете? Что есть навигация из двух списков, в одном меню каталога и в другом стандартная менюшка сайта/инетмагаза.
    Отлично, всё понятно.

    Без абсюлюта такое не провернешь, одно меню вверху, другое внизу

    Это наверно нужно будет задавать ширину всему header'у в 100% и справа вверху будет пустота для верхнего меню, туда его абсолютом перемещать
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, спасибо за наводку, а почему именно не navbar ?)

    Вы сильно все упростили, а разве menu-top и menu-bottom на декстопе можно объединить в один nav ?
    5ea61168df8f3469169555.png
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, хотел уточнить, если у меня 2 меню: menu-top и menu-bottom

    Мне нужно эти 2 меню в мобильной версии соединить в одно меню, я правильно понял ?

    И все таки у меня немного нестандартное мобильное меню, где надпись каталог - внутри него уже сабменю, так будет правильнее ?
    <div class="navbar">
	<div class="navbar-top">
		<div class="menu-top"></div>
	</div>
	<div class="navbar-center">
		<div class="menu-center">
			тут в мобильной версии menu-top и menu-bottom
		</div>
		<a href="#" class="navbar-center__logo logo">Лого</a>
		<div class="navbar-center__search search">
		
		</div>
	<div class="navbar-bottom">
		<div class="menu-bottom"></div>
	</div>
</div>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, гриды на ie не работают
    Все классы, связанные с top-menu и bottom-menu я с помощью js меняю на menu-mobile__item
    Иначе я вообще не представляю как можно в мобильной версии верхнее с нижнее меню соединить в одно целое

    Так у меня <div class="menu-mobile"> находится в блоке <div class="navbar-center"></div>
    У меня как минимум в шапке 2 nav (меню) - сверху и внизу, я иконку open-menu расположил рядом с логотипом и скрыл на декстопе
    И все таки почему Стрелок011 предложил <div class="menu-mobile">, а вы считаете что декстопное меню должно отличаться от мобильного меню ?
    <div class="navbar">
  <div class="navbar-top"></div>
  <div class="navbar-center">
	<a href="#" class="navbar-center__logo logo">Лого</a>
	<div class="menu-mobile">
		
	</div>
	<div class="navbar-center__search search">
  </div>
  <div class="navbar-bottom"></div>
</div>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, так как это меню собрать воедино ?
    5ea4c95421f90336136891.png
    Если верхнее меню в navbar-top, а нижнее в navbar-bottom, то только с помощью js ?
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena,
    Откуда же вы берете mobile-то всё время.
    У вас что, разные меню для десктопа и мобилки?

    Именно так, у меня состав (структура) меню отличается:
    5ea61168df8f3469169555.png
    У меня по структуре:
    <div class="navbar">
	<div class="navbar-top"></div>
	<div class="navbar-center"></div>
	<div class="navbar-bottom"></div>
</div>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, да дело в том, что у крестика концы немного закруглённые и эти концы просто так с помощью border-radius не сделаешь (
    Дальше вы можете делать с этим что хотите, даже оставить свой первоначальный код.

    Дак я хочу как у вас )
    Только может вот так пойдет ?
    <div class="menu-mobile">
	<button class="menu-toggle menu-toggle--open">
		<span class="icon-open">0</span>
	</button >
	<div class="menu-mobile__container">
		<div class="menu-mobile__header">
			<div class="menu-mobile__title">Меню</div>
			<button class="menu-toggle menu-toggle--close"><svg class="icon-close"></svg></button>
		</div>
		<nav class="menu-mobile__nav">
			<ul class="menu-mobile__nav-list">
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			  <li class="menu-mobile__item"><a href="" class="menu-mobile__link">link</a></li>
			</ul>
		</nav>
	</div>
</div>

    Мне Стрелок011 что-то похожее предложил, но я под ваш вариант модернизировал ?)
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, проблема в том, что у меня иконка close в виде svg, а иконке меню я просто линии с помощью стилей задал, т.е. это наверно будет сложно реализовать через одну кнопку
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena,
    Заголовок меню я бы делала псевдоэлементом. Почему именно так, написано выше.

    А если мне нужно не псевдоэлементом ?
    Вы показали:
    <nav class="header__nav menu menu--opened">
    <ul class="header__nav-list">
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
      <li class="menu__item"><a href="" class="menu__link">link</a></li>
    </ul>
  </nav>

    Т.е. внутри nav нужно расположить название меню и иконку закрытия (иконка svg) или лучше выше?
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, я имел ввиду про это модальное окно:
    5ea4c95421f90336136891.png
    У вас в примере нету кнопки close, названия меню, т.е. обертка:
    <div class="menu-mobile__modal">
      <div class="menu-mobile__header">
        <div class="menu-mobile__header-title">Меню</div>
        <button class="menu-toggle menu-toggle--close menu-mobile__header-close"><svg class="icon-close"></svg></button>
      </div>
      <nav class="menu-mobile__content">
        <ul class="menu-mobile__list">
          <li class="menu-mobile__item">
            <a class="menu-mobile__link" href="#">link</a>
          </li>
          <li class="menu-mobile__item">
            <a class="menu-mobile__link" href="#">link</a>
          </li>
        </ul>
      </nav>
    </div>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, покажите как правильно

    В вашем видео там больше про семантику рассказывается nav>ul>li, чем про БЭМ
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, примерно так ?

    <div class="navbar-center">
	<div class="navbar-center__menu menu-mobile">
		<button class="menu-toggle menu-toggle--open">
			<span class="menu-mobile__line">0</span>
		</button>
		<div class="menu-mobile__modal">
			<div class="menu-mobile__header">
				<div class="menu-mobile__header-title">Меню</div>
				<button class="menu-toggle menu-toggle--close menu-mobile__header-close"><svg class="icon-close"></svg></button>
			</div>
			<nav class="menu-mobile__content">
				<ul class="menu-mobile__list">
					<li class="menu-mobile__item">
						<a class="menu-mobile__link" href="#">link</a>
					</li>
					<li class="menu-mobile__item">
						<a class="menu-mobile__link" href="#">link</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    Ankhena, а вот с моим примером показали бы ?

    Именно с button это меню как лучше по классам назвать?
    5ea58e5ce2c82325166249.png
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    strelok011, т.е. так будет лучше ?
    <button type="button" class="menu-mobile__open">
     <span class="menu-mobile__line">0</span>
</button>
    Написано

  • Можно ли так называть классы по БЭМ?

    @Genri_Rus Автор вопроса
    strelok011, спасибо, но у меня тут меню такое:
    5ea58e5ce2c82325166249.png
    Т.е. как мне его сделать правильнее ?
    <button type="button" class="menu-mobile__open">
     <span class="menu-mobile__open-line">0</span>
</button >
    Написано