Показать сообщение отдельно
  #7 (permalink)  
Старый 25.04.2018, 16:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .mobile_subNav{
              width: 100%;
    			  min-height: 30px;
    			  border: 1px solid #000;}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="bl_subNav__full hidden">
    <ul class="bl_subNav__children">
        <li class="bl_subNav__field">
            <ul class="bl_subNav_wrapper">
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка1">
                        <p class="bl_subNav__name">Куртки</p>
                        <img class="bl_subNav__img" src="" alt="Куртки">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка2">
                        <p class="bl_subNav__name">Обувь</p>
                        <img class="bl_subNav__img" src="" alt="Обувь">
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="bl_subNav__children">
        <li class="bl_subNav__field">
            <ul class="bl_subNav_wrapper">
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка3">
                        <p class="bl_subNav__name">Демисезонная одежда 1</p>
                        <img class="bl_subNav__img" src="" alt="Демисезонная одежда 1">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка4">
                        <p class="bl_subNav__name">Демисезонная одежда 2</p>
                        <img class="bl_subNav__img" src="" alt="Демисезонная одежда 2">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка5">
                        <p class="bl_subNav__name">Демисезонная одежда 3</p>
                        <img class="bl_subNav__img" src="" alt="Демисезонная одежда 3">
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="bl_subNav__children">
        <li class="bl_subNav__field">
            <ul class="bl_subNav_wrapper">
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка6">
                        <p class="bl_subNav__name">Летняя одежда 1</p>
                        <img class="bl_subNav__img" src="" alt="Летняя одежда 1">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка7">
                        <p class="bl_subNav__name">Летняя одежда 2</p>
                        <img class="bl_subNav__img" src="" alt="Летняя одежда 2">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка8">
                        <p class="bl_subNav__name">Летняя одежда 3</p>
                        <img class="bl_subNav__img" src="" alt="Летняя одежда 3">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="ссылка9">
                        <p class="bl_subNav__name">Летняя одежда 4</p>
                        <img class="bl_subNav__img" src="" alt="Летняя одежда 4">
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="bl_subNav__children">
        <li class="bl_subNav__field">
            <ul class="bl_subNav_wrapper">
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Обувь 1</p>
                        <img class="bl_subNav__img" src="" alt="Обувь 1">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Обувь 2</p>
                        <img class="bl_subNav__img" src="" alt="Обувь 2">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Обувь 3</p>
                        <img class="bl_subNav__img" src="" alt="Обувь 3">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Обувь 4</p>
                        <img class="bl_subNav__img" src="" alt="Обувь 4">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Обувь 5</p>
                        <img class="bl_subNav__img" src="" alt="Обувь 5">
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <ul class="bl_subNav__children">
        <li class="bl_subNav__field">
            <ul class="bl_subNav_wrapper">
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 1</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 1">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 2</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 2">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 3</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 3">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 4</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 4">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 5</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 5">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="javascript:void(0);">
                        <p class="bl_subNav__name">Кемпинг 6</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 6">
                    </a>
                </li>
                <li class="bl_subNav__link">
                    <a class="bl_subNav__name" href="http://norfin.loc/palatki-108/">
                        <p class="bl_subNav__name">Кемпинг 7</p>
                        <img class="bl_subNav__img" src="" alt="Кемпинг 7">
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div class="my_block">
    <ul class="bl_fullCategories__field " style="display: block;">
                <li class="bl_fullCategories__item js-navItem">
        	      <a class="bl_fullCategories__link">Зимняя одежда</a>
            	  </li>
          <li class="bl_fullCategories__item js-navItem">
        	      <a class="bl_fullCategories__link">Демисезонная одежда</a>
            	  </li>
          <li class="bl_fullCategories__item js-navItem">
        	      <a class="bl_fullCategories__link">Летняя одежда</a>
            	  </li>
          <li class="bl_fullCategories__item js-navItem">
        	      <a class="bl_fullCategories__link">Обувь</a>
            	  </li>
          <li class="bl_fullCategories__item js-navItem">
        	      <a class="bl_fullCategories__link">Кемпинг</a>
            	  </li>
      	</ul>
</div>

    <script>
        var a = $(".bl_fullCategories__link");
         $(".bl_subNav__children").each(function(i, ul) {
        var li = $(".bl_subNav__link", ul).clone();
        $("img", li).remove();
        ul = $('<ul class="mobile_subNav"></ul>').insertAfter(a[i]);
        li.appendTo(ul)
  });

   </script>

</body>
</html>
Ответить с цитированием