Joomla 3.x горизонтальное меню nav nav-pills добавить справой стороны

Discussion in 'Внешний вид, шаблоны, графика' started by puf, May 2, 2018.

  1. Offline

    puf Недавно здесь

    Joined:
    Apr 28, 2015
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Доброго дня и хороших праздников.
    J 3.7 работаю с protostar.
    Как во многих примерах в интернете сделал горизонтальное меню свеху. (nav nav-pills)
    Активные ссылки располагаются в левой части, хотелось бы в правой части (где красные квадраты) сделать активные значки вк и инстаграм с активной ссылкой. Но никак пойму как сделать, может у кого будет время, поможет.
    znakinstjp_2192965_30115055.jpg
    http://pixs.ru/showimage/znakinstjp_2192965_30115055.jpg
    Буду благодарен за варианты решения.
     
    puf, May 2, 2018
    #1

  2. Ads Master

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Справа определена позиция для поиска,которую можно использовать и для любого модуля, который не внесет изменения в отображение шаблона.
    Можно использовать сторонний модуль для соц-сетей, а можно и через модуль html, но тогда не всенешь динамические данные мета- тегов.
    Можно вшить в шаблон, при наличии понимания php, html, javasxript.
     
    OlegK, May 2, 2018
    #2
  4. Offline

    puf Недавно здесь

    Joined:
    Apr 28, 2015
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Данная позиция выше позиции 1.
    Сделал по Вашему совету, но ссылка Выше чем вся полоска
    znakinst2j_8890452_30115366.jpg
    Test_1 - ссылка и расположение модуля на 0 (search)
     
    puf, May 2, 2018
    #3
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Код (css):
    1. .icons {
    2. border: 1px solid red;
    3. float: right;
    4. }
    5. .nav-collapse {
    6. float:left;
    7. width:60%;
    8. }

    Код (html):
    1. <div class="position_icons">
    2.              <jdoc:include type="modules" name="icons" style="html" />
    3.            </div>
    4.          </nav>

    Укажешь как суффикс модуля icons или пропиши position_icons
    Код (css):
    1. [css]
    2. . position_icons {
    3. border: 1px solid red;
    4. float: right;
    5. }
     
    OlegK, May 2, 2018
    #4
  6. Offline

    puf Недавно здесь

    Joined:
    Apr 28, 2015
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Олег спасибо за уделенное время. Не могли бы подсказать.
    .nav-collapse если ставлю ширину менее 100% то сайт сваливается влево.
    Сама полоска
    Код (PHP):
    1. <?php if ($this->countModules('position-1')) : ?>
    2.          <nav class="navigation" role="navigation">
    3.            <div class="navbar pull-left">
    4.              <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    5.                <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
    6.                <span class="icon-bar"></span>
    7.                <span class="icon-bar"></span>
    8.                <span class="icon-bar"></span>
    9.              </a>
    10.            </div>
    11.            <div class="nav-collapse">
    12.              <jdoc:include type="modules" name="position-1" style="none" />
    13.            </div>
    14.          </nav>

    Вопрос мне менять ширину надо до 80% к примеру надо в <div class="navbar pull-left" ?
    Тогда после этого уже надо добавить pull-right ? Или как правильно.
     
    Last edited by a moderator: May 2, 2018
    puf, May 2, 2018
    #5
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    А позиция для модуля где? Вот код с вновь созданной позицией для соц.кнопок. Я же дал код и указал куда вставить.
    Код (PHP):
    1. <?php if ($this->countModules('position-1')) : ?>
    2.          <nav class="navigation" role="navigation">
    3.            <div class="navbar pull-left">
    4.              <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    5.                <span class="icon-bar"></span>
    6.                <span class="icon-bar"></span>
    7.                <span class="icon-bar"></span>
    8.              </a>
    9.            </div>
    10.            <div class="nav-collapse">
    11.              <jdoc:include type="modules" name="position-1" style="none" />
    12.            </div>
    13.            <div class="position_icons">
    14.              <jdoc:include type="modules" name="icons" style="html" />
    15.            </div>
    16.          </nav>
    17.        <?php endif; ?>
     
    OlegK, May 2, 2018
    #6
    puf likes this.
  8. Offline

    puf Недавно здесь

    Joined:
    Apr 28, 2015
    Messages:
    4
    Likes Received:
    0
    Gender:
    Male
    Cпасибо.
    Добавил
    <div class="header-search pull-right">
    <div class="vhod">
    <jdoc:include type="modules" name="vhod" style="none" />
    </div>
    </div>

    +
    описание кнопки в templateDetails.xml
    Благодарю что разживали все подробно.
     
    puf, May 2, 2018
    #7
< Правка кнопки "изменить" на сайте, не в админке | Widgetkit Accordion показывает только 2 уровня, можно ли увеличить? >

Share This Page

Loading...