Перейти к содержимому


Закрепляем горизонтальное меню в теме ShopCMS (3.1.3)

горизонтальное меню

  • Вы не можете ответить в тему
Сообщений в теме: 43

#1 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 18 December 2014 - 10:54 AM

Взял тему от новой версии ShopCMS 3.1.3 (shopsms) установил на версию движка 3.1.2
Все встало без сучка и зодоринки. Видимо ранее установленная новая версия Query таки пригодилась.

Сразу возникло желание закрепить верхнее горизонтальное меню, чтобы при прокрутке страницы меню оставалось на месте.
Сказано - сделано. Может кому пригодится. ;)

Тема оформления: shopsms (от версии ShopCMS 3.1.3)
Правим файл: data\shopcms\css\bootstrap.css

Так как он сжат (вырезаны все пробелы и почти все переводы строки) листаем почти в самый низ находим надпись:
*!
* ShopCMS v3.1.2 (http://shopcms.ru)
* Copyright 2007-2014 ShopCMS
*/

После этой надписи находим (чтобы логотип/шапка встали на свое место):
{height:100%;background-color:transparent}body{background:url(../img/topbg4.png) top left repeat-x}#wrap{background:url(../img/topbg3.png) bottom left repeat-x;min-height:100%;height:auto!important;height:100%;margin:0 auto -80px;padding:0 0 80px}

Меняем на это:
{height:100%;background-color:transparent}body{background:url(../img/topbg4.png) top left repeat-x}#wrap{background:url(../img/topbg3.png) bottom left repeat-x;min-height:100%;height:auto!important;height:100%;margin:50px auto -80px;padding:0 0 80px}


В самом низу файла после закрывающих тегов }} добавляем:
#top{width:100%;position:fixed;left:0px;top:0px;_position:absolute;_top:expression(0+eval(document.documentElement.scrollTop||document.body.scrollTop)+'px');}

Затем, открываем файл core\tpl\user\shopcms\index.tpl
Находим:
{* шапка *}
	<div class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">

Меняем на это (подключаем идентификатор закрепления меню id="top"):
{* шапка *}
	<div id="top" class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">

После, очишаем кеш, перегружаем главную страничку и смотрим на результат. ;)
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#2 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 December 2014 - 12:26 PM

смотрим на результат.

И видим, что если сжать браузер до ширины, когда меню становится выпадающим, то опаньки...
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#3 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 18 December 2014 - 03:58 PM

Эээ... таки да, об телефонах и планшетах я не подумал :) Попробуем допилить.

p.s. Подправил в шапке код. Теперь - все гуд. :)

p.p.s.Убрал заданную высоту меню:
height:50px;

  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#4 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 December 2014 - 05:01 PM

"находим" и "меняем на" тоже заменяются одной дополнительной строкой #wrap{margin:50px}, но я так и не понял, зачем это надо.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#5 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 18 December 2014 - 05:20 PM

Ну есть любители когда менюшка всегда видна и под рукой, и не нужно прокручивать вверх страницу чтобы до нее добраться. И я один из их числа. :)
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#6 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 December 2014 - 05:48 PM

Я не про переделку - она, несомненно, полезна.
Я про изменение margin 0 на 50px. В чем смысл?
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#7 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 18 December 2014 - 07:15 PM

Ааа... я просто забыл что там меню при уменьшении окна браузера раскрывается по нажатию иконки и поставил фиксированную высоту в 50px как меню было по умолчанию. Немного не учёл этого момента и оБшибся :) не проверив.
Спасибо что указали на мой недочет.

Обнаружил еще косяк, правда не мой, но все же.
Если открыть в "мини-режиме" вкладку Личный аккаунт то вниз меню не возможно прокрутить, чтобы увидеть ту же ссылку "Выйти из системы". Может под Андроидом это и прокатит, пролистывая страницу ниже, или сжав размер. Но вот пробую на ноуте, (разрешение 1366х768) очень не удобно так. Нужно либо менять масштаб либо разворачивать браузер до отображения нормального меню.
Кумекаю как подправить этот момент. :rolleyes:
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#8 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 December 2014 - 07:21 PM

я просто забыл что там меню при уменьшении окна браузера раскрывается по нажатию иконки и поставил фиксированную высоту в 50px

Итить-ядрить.... Я и не об этом :).
У Вас описана замена достаточно длинной строки в bootstrap.css на другую, не менее длинную. Отличаются эти две длинных строки (старая и новая) одним единственным параметром, который можно просто вынести отдельной строкой, расположив ее ниже:
#wrap{margin:50px}
Вот я и интересуюсь, зачем нужна эта замена. На мой взгляд она вообще не нужна, но, вполне возможно, я чего-то не понимаю.

На мой взгляд она вообще не нужна, но, вполне возможно, я чего-то не понимаю

Не понимаю. Понял :).
Оно сдвигает вниз шапку с названием магазина.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#9 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 18 December 2014 - 07:37 PM

:D Блин ... вы меня уже второй раз с толку сбиваете. :D :D :D

Все, пора по кофейку и отдыхать... :)
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#10 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 22 December 2014 - 07:53 PM

Если свести все в краткую инструкцию, то выглядит она так:

1. в файле bootstrap.css в конец добавляем

/* addons & rewrites */

#wrap{margin-top:50px}
#top{width:100%;position:fixed;left:0px;top:0px;_position: absolute;_top: expression( 0+eval(document.documentElement.scrollTop||document.body.scrollTop)+'px');}


2. в файле index.tpl.html добавляем id="top" в строку


{* шапка *}
<div class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">

  • 1
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#11 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 23 December 2014 - 05:28 PM

Как бы не очень согласен с вами.
Потому как по умолчанию, в параметре #wrap указано margin:0 а потом (поверх) вы указываете второе значение margin-top:50px
Это не является ошибкой, но это все же есть мелкий конфликт чтения и выполнения файла стиля CSS.
Как по мне, то лучше это сделать сразу и один раз.
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#12 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 23 December 2014 - 07:30 PM

Это не является ошибкой, но это все же есть мелкий конфликт чтения и выполнения файла стиля CSS.

См. документацию по CSS. Стили применяются "сверху вниз", никакого конфликта нет. "Более поздний" по обработке стиль заменяет "более ранний". Это совершенно нормальная и часто применяемая практика. А для bootstrap.css она даже рекомендована. Точнее, рекомендовано в него не лазить, а менять необходимые свойства именно таким способом. Это позволяет без проблем перейти к новой версии bootstrap.css, если она появится.

Да и написание такое куда понятнее, когда отдельно исходный CSS, отдельно изменения и добавления.

PS. Врядли Вы считаете, что код

$a = array(1,2);
$a[1] = 3;

содержит "мелкий конфликт" относительно кода

$a = array(1,3);

? В чем же отличие для CSS? :)
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#13 FusSheva

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 210 сообщений
Репутация: 7
Начинающий

Отправлено 25 December 2014 - 08:03 AM

Да и написание такое куда понятнее, когда отдельно исходный CSS, отдельно изменения и добавления.


Вот тут я с вами полностью согласен.
  • 0
Каждый человек способен на многое. Но к сожалению, не каждый знает на что он способен.

#14 Lada

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 107 сообщений
Репутация: 7
Начинающий
  • ГородЧита

Отправлено 28 February 2015 - 08:59 PM

Еще бы сделать левое меню с Категориями товаров что бы складывалось при открытии на мобильных устройствах... А то, если много категорий, то его приходится долго прокручивать до товара.. А вот если бы оно то же складывалось, как и верхнее - было бы получше...
Нет ли такого решения?
  • 0

#15 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 01 March 2015 - 01:36 PM

Еще бы сделать левое меню с Категориями товаров что бы складывалось при открытии на мобильных устройствах..

Автоматически складывать/открывать не особенно и получится, т.к. hover (реакция на наведение мышью) на планшетах работает довольно неудобно. Можно сказать, вообще не работает, т.к. курсора мыши как такового нет.
Ну а не автоматически - оберните меню в DIV, задайте ему стиль display:none, какой-нибудь id, сделайте кнопочку и меняйте по кнопке этот стиль на display:block и обратно используя JS-функцию GetElementById(). Так у меня сделано в моих фильтрах, можете там посмотреть конкретику.

Но это самое простое решение. Более хитрые и удобные зависят только от фантазии.
Также можно посмотреть документацию по компонентам bootstrap - http://www.oneskyapp...rap/components/
Я не смотрел, надобности не было, но подозреваю, что с большой вероятностью желаемое в bootstrap есть штатно, надо только применить.

А вот если бы оно то же складывалось, как и верхнее - было бы получше...

Эээ... А где в 3.1.3 складывается верхнее меню?
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#16 Lada

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 107 сообщений
Репутация: 7
Начинающий
  • ГородЧита

Отправлено 01 March 2015 - 01:57 PM

Эээ... А где в 3.1.3 складывается верхнее меню?


Ну как же где - при широком виде в браузере верхнее меню стоит горизонтально, навиду. А если браузер сузить, оно складывается. Не так ли?
  • 0

#17 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 01 March 2015 - 02:02 PM

Ну как же где - при широком виде в браузере верхнее меню стоит горизонтально, навиду. А если браузер сузить, оно складывается. Не так ли?

Ах, в этом смысле... Ну да, складывается. Только не понимаю, как это можно применить к списку категорий :).
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#18 Lada

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 107 сообщений
Репутация: 7
Начинающий
  • ГородЧита

Отправлено 01 March 2015 - 02:25 PM

Ах, в этом смысле... Ну да, складывается. Только не понимаю, как это можно применить к списку категорий :).


Ну, к примеру что бы при заходе с компа категории, как обычно - слева.
А при заходе с мобильного устройства весь этот аккордеон категорий сворачивался в одну строку Категории и слева уезжал наверх так же, как и сейчас уезжает (пермещается) слева на центр.
При нажатии на эту строку (кнопку) меню Категории разворачивалось бы.
Человек выбрал нужную, нажал, оно опять сложилось в однку строку (кнопку).
  • 0

#19 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 01 March 2015 - 05:07 PM

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

Как то так? http://new.badisoft.ru/
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#20 Lada

    Продвинутый пользователь

  • Download User
  • PipPipPip
  • 107 сообщений
Репутация: 7
Начинающий
  • ГородЧита

Отправлено 01 March 2015 - 05:16 PM

Как то так? http://new.badisoft.ru/


Да, да, да! Именно так!!!
  • 0