Меня вот тоже волнует этот вопрос. Сейчас делаю крупный сайт и там два меню для десктопа и мобильных, но разметка и стили - разные. Пробовал выводить мобильное меню через JSON-фойл и с помощью JS парсить, но коряво и неудобно. Что скажите, два меню не вредят позициям?код:
<nav class="main-navigation"> <ul class="general-menu"> <li><a href="#">Главная</a></li> <li>Мероприятия</li> <li>Магазин<i class="icon-down-open-big"></i></li> <li>Блог</li> <li class="separater">|</li> <li>ru<i class="icon-down-open-big"></i> <ul class="general-menu submenu"> <li><a href="#">en</a></li> <li><a href="#">ukr</a></li> </ul> </li> <li><i class="icon-search search-form-open"></i> <div class="search-block-form"> <form class="search-form" action="#" method="post"> <input type="text" name="getsearch"> <button class="search-pol"><i class="icon-search"></i></button> </form> </div> </li> <li> <div class="user-profile"><i class="icon-user-love"></i></div> <i class="icon-down-open-big"></i> </li> </ul> </nav> </div> <div class="header-bar col-md-auto d-sm-block d-md-block d-lg-none"> <span></span> </div> <div class="mobile-menu"> <ul> <li><i class="icon-double-right"></i><a href="#">Главная</a></li> <li><i class="icon-double-right"></i><a href="#">Мероприятия</a></li> <li><i class="icon-double-right"></i><a href="#">Магазин<i class="icon-down-open-big"></i></a></li> <li><i class="icon-double-right"></i><a href="#">Блог</a></li> <li><i class="icon-double-right"></i><a href="#">ru</a><i class="icon-down-open-big"></i> <ul class="submenu"> <li><a href="#">en</a></li> <li><a href="#">ukr</a></li> </ul> </li> <li class="search-form-open-mobile"> <i class="icon-double-right"></i><i class="icon-search"></i> <div class="search-block-form-mobile"> <form class="search-block-form-mobile" name="search-form-mobile" action="#" method="post"> <input type="text" name="getsearch"> <button class="search-pol-mobile"><span class="mobile-menu__search">Поиск</span></button> </form> </div> </li> <li> <div class="user-profile"><i class="icon-user-love"></i></div> <i class="icon-down-open-big"></i> </li> </ul> <div class="mobile-menu-close"> <span class="mobile-menu__close"></span> </div>
