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


Правила форума

Внимание!!! Если не можете скачать, пожалуйста ознакомьтесь с условиями получения доступа с файлам форума. Правила форума


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

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

Сообщений в теме: 43

#1 FusSheva

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

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

Отправлено 18 декабря 2014 - 10:54

Взял тему от новой версии 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">

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

#2 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 18 декабря 2014 - 12:26

Просмотр сообщенияFusSheva сказал:

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

#3 FusSheva

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

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

Отправлено 18 декабря 2014 - 15:58

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

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

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

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

#4 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 18 декабря 2014 - 17:01

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

#5 FusSheva

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

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

Отправлено 18 декабря 2014 - 17:20

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

#6 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 18 декабря 2014 - 17:48

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

#7 FusSheva

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

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

Отправлено 18 декабря 2014 - 19:15

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

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

#8 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 18 декабря 2014 - 19:21

Цитата

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

Просмотр сообщенияbadisoft сказал:

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

#9 FusSheva

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

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

Отправлено 18 декабря 2014 - 19:37

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

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

#10 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 22 декабря 2014 - 19:53

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

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">

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

#11 FusSheva

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

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

Отправлено 23 декабря 2014 - 17:28

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

#12 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 23 декабря 2014 - 19:30

Просмотр сообщенияFusSheva сказал:

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

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

PS. Врядли Вы считаете, что код
$a = array(1,2);
$a[1] = 3;

содержит "мелкий конфликт" относительно кода
$a = array(1,3);

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

#13 FusSheva

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

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

Отправлено 25 декабря 2014 - 08:03

Просмотр сообщенияbadisoft (23 декабря 2014 - 19:30) писал:

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

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

#14 Lada

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

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

Отправлено 28 февраля 2015 - 20:59

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

#15 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 01 марта 2015 - 13:36

Просмотр сообщенияLada сказал:

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

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

Цитата

А вот если бы оно то же складывалось, как и верхнее - было бы получше...
Эээ... А где в 3.1.3 складывается верхнее меню?
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#16 Lada

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

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

Отправлено 01 марта 2015 - 13:57

Просмотр сообщенияbadisoft (01 марта 2015 - 13:36) писал:

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

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

#17 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 01 марта 2015 - 14:02

Просмотр сообщенияLada сказал:

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

#18 Lada

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

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

Отправлено 01 марта 2015 - 14:25

Просмотр сообщенияbadisoft (01 марта 2015 - 14:02) писал:


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

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

#19 badisoft

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

  • Assistent vsupport.ru
  • PipPipPip
  • 5 071 сообщений
Репутация: 783
Мастер

Отправлено 01 марта 2015 - 17:07

Просмотр сообщенияLada сказал:

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

#20 Lada

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

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

Отправлено 01 марта 2015 - 17:16

Просмотр сообщенияbadisoft (01 марта 2015 - 17:07) писал:


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

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