Xlebosolniy

Синяя полоска категорий

Рекомендуемые сообщения

Xlebosolniy    0

В данный момент у меня выводится на полосе категорий названия категорий и определенные статьи. Вопрос в следующем: возможно ли осуществить так, что бы при определенном медиа запросе выводились на синей полосе только статьи и при другом медиа запросе выводились категории и статьи вместе?

 

 

Если я правильно понял, то этот участок отвечает за всю синюю полоску:

 

 

<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
        <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
        <?php } ?>
      </ul>
    </div>
  </nav>

 

Это отвечает за вывод статей:

 

<?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
        <?php } ?>

 

Делаю вот так:

 

<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class = "mobmenu"><div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
        <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
        <?php } ?>
      </ul>
    </div></div>
  </nav>

 

 

 

Перед <div class="collapse navbar-collapse navbar-ex1-collapse"> добавляю <div class = "mobmenu">, при применении медиа запроса с синей полосы убираются и категории и статьи. Если применять  <div class = "mobmenu"> к другим участком, то слетают либо стили или просто сама полоска убирается при медиа запросе. 

 

 

 

 

Изменено пользователем Xlebosolniy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
jaffagold    145

Не совсем понятно, что и зачем делается.

По вашему описанию можно понять, что при определенном размере экрана вы хотите из главного меню скрыть пункты навигации ( категории товаров) и оставить только ссылки на статьи.

Возникает вопрос: как тогда будет происходить навигация по категориям?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Xlebosolniy    0

Слишком много категорий, которые не вмешаются в одну строчку, а несколько строчек выглядит не очень красиво. Использую YO MENU для вывода категорий, которые разместил в блоке слева. При просмотре с размеров монитора как на пк хочу скрыть все категории из синий полоски и оставить только ссылки на статьи, а при сжатии экрана до мобильных устройств YO MENU просто пропадает и соответственно нельзя получить доступ к категориям, поэтому при сжатии до мобильных устройств хочу возобновить показ категорий в синей полоске, как-то так

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Xlebosolniy    0

Я так понял, что статьи на этой полоске определяются как категории и поэтому они скрываются вместе с категориями. Сделал следующем образом: вытащил код, который отвечает за автоматический вывод статей из класса, в котором выводятся категории, создал такой же класс и добавил туда вывод статей. Применил <div class = "mobmenu"> для скрытия категорий при просмотре с пк. Такое решение может быть правильным?

 



<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <div class = "mobmenu"><ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul></div>
      <ul class="nav navbar-nav">
      <?php foreach ($informations as $information) { ?>
          <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
        <?php } ?>
       </div>
    </div>
  </nav>

Изменено пользователем Xlebosolniy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Xlebosolniy    0

del

Изменено пользователем Xlebosolniy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
jaffagold    145

Таким же образом ваше yo-меню скрывается на мобильных вместе со всей левой колонкой. Если вас устраивает результат, то нормально.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу