WebSite X5Help Center

 
Калинин С.
Калинин С.
User

Как создать кнопки меню с разной шириной в зависимости от текста  ru

Автор: Калинин С.
Просмотрено 1812, Подписчики 2, Размещенный 0  

Доброго дня! Необходимо для сайта создать горизонтальное меню с разной шириной кнопок, ширина которых зависит введенного текста, от границ д до текста расстояние одинаковое а общая длина каждой кнопки разная и зависит от текста. Для примера как на сайте http://ddtna9line.ru/education/Скриншот приложил.

В программе только ширину задаешь и к примеру кнопка "главная" будет смотреться пусто на фоне кнопки с текстом "Прием несовершеннолетних".  У в новом проекте будут как раз такие темы в названиях и сайт хотят с горизонтальным меню.

Буду признателен, если подскажете с кодом и как создать или ткните носом, где в программе настройка спрятана.

Размещено
27 Ответы - 2 Полезно - 1 Корректно
Pavel M.
Pavel M.
User

Настройки такие нигде не спрятаны, меню в этой программе сделанно именно так - все кнопки одинаковой ширины.

Если бы у вас не было раскрывающегося меню, можно было посоветовать на тех разрешениях, где ещё не присутсвует гамбургер, делать суррогат меню из объектов Hover button (анимированные кнопки)

Ну и общий совет - для организаций делать сайт на этом конструкторе не комильфо :)

Читать больше
Размещено От Pavel M.
Калинин С.
Калинин С.
User
Автор
Pavel M.
Настройки такие нигде не спрятаны, меню в этой программе сделанно именно так - все кнопки одинаковой ширины. Если бы у вас не было раскрывающегося меню, можно было посоветовать на тех разрешениях, где ещё не присутсвует гамбургер, делать суррогат меню из объектов Hover button (анимированные кнопки) Ну и общий совет - для организаций делать сайт на этом конструкторе не комильфо :)

Была такая мысля с Hover button, но у меня есть подменю и довольно обширное. Для организации как раз всего хватает, проверки проходят нормально. Чего нет в этом конструкторе даже с покупными модулями, я добавляю с внешних модулей, плагинов.

Читать больше
Размещено От Калинин С.
Pavel M.
Pavel M.
User

Для организаций - если они и купили лицензию, тогда возможно.

Читать больше
Размещено От Pavel M.
Pavel M.
Pavel M.
User

Ну и нико ещё не отменял сервисы-генераторы меню, интернет вам в помощь, за полдня можно любое меню соорудить, на выбор

Читать больше
Размещено От Pavel M.
Калинин С.
Калинин С.
User
Автор
Pavel M.
Ну и нико ещё не отменял сервисы-генераторы меню, интернет вам в помощь, за полдня можно любое меню соорудить, на выбор

Я же и спрашиваю как это сделать. Посмотрел по наводке сейчас и примерно понимаю о чем речь, есть пример, как встроить в эту программу сгенерированный CSS с меню?

Читать больше
Размещено От Калинин С.
Pavel M.
Pavel M.
User

Обычно добавляется папка в корне сайта и код в месте встраивания на странице.

Читать больше
Размещено От Pavel M.
Калинин С.
Калинин С.
User
Автор
Pavel M.
Обычно добавляется папка в корне сайта и код в месте встраивания на странице.

Надо будет поиграть после выходных, тем более метода напоминает встраивание модуля для слабовидящих. Мне кажется, что тут усложняется что-то (внешний генератор, который не всегда бесплатен, потом встраивание и позиционирование отладка) Может возможно в коде самой программы стили подредактировать?

Читать больше
Размещено От Калинин С.
Калинин С.
Калинин С.
User
Автор

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

Читать больше
Размещено От Калинин С.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Калинин С.
Доброго дня! Необходимо для сайта создать горизонтальное меню с разной шириной кнопок, ширина которых зависит введенного текста, от границ д до текста расстояние одинаковое а общая длина каждой кнопки разная и зависит от текста. ... ... ... ... ... 

(It > Ru) ... может быть, это возможно с помощью CSS EXTRA-кода, но для оценки мне нужно увидеть ССЫЛКУ вашего примера в Интернете ...

привет, ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Калинин С.
Калинин С.
User
Автор
 ‪ KolAsim ‪ ‪
Калинин С. Доброго дня! Необходимо для сайта создать горизонтальное меню с разной шириной кнопок, ширина которых зависит введенного текста, от границ д до текста расстояние одинаковое а общая длина каждой кнопки разная и зависит от текста. ... ... ... ... ...  (It > Ru) ... может быть, это возможно с помощью CSS EXTRA-кода, но для оценки мне нужно увидеть ССЫЛКУ вашего примера в Интернете ... привет, ciao .

http://ddtna9line.ru/education/

Читать больше
Размещено От Калинин С.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Калинин С.

... это не сделано с WebSiteX5
... мне нужен твой пример от WebSiteX5 ...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Калинин С.
Калинин С.
User
Автор
 ‪ KolAsim ‪ ‪
Калинин С. ‪ ... ... ...  http://ddtna9line.ru/education/ ... это не сделано с WebSiteX5 ... мне нужен твой пример от WebSiteX5 ... .
.

Понял, тогда надо посмотреть (может и не найду). Я его просто показал, как нам надо сделать. Почти нужный эффект получился, когда в стиле кнопки поставил ширину 1 (самая малая величина), но есть минус бутерброд перестает работать. Образец нового сайта выложу примерно 2-3 октября, как оплатят провайдеру.

Читать больше
Размещено От Калинин С.
Vitaliy M.
Vitaliy M.
User

Попробуйте этот код для WebSite X5 Professional 13

ставить сюда СТАТИСТИКА, SЕО И КОД - перед закрывающим тегом HEAD

<style>
#imMnMn li span {
padding: 0px 3px 0px 3px !important;
}
#imMnMn.main-menu li[id*="imMnMnNode"] {
width: auto !important;
}
#imMnMn.main-menu a, #imMnMn.main-menu li .imMnMnFirstBg, #imMnMn.main-menu li .imMnMnFirstBg > .imMnMnTxt, #imMnMn.main-menu li .imMnMnFirstBg .imMnMnImg {
width: auto !important;
}
#imMnMn.main-menu li.imMnMnCurrent .imMnMnFirstBg, #imMnMn.main-menu li:hover .imMnMnFirstBg, #imMnMn.main-menu li.imMnMnCurrent:hover .imMnMnFirstBg {
background-image: none !important;
}
#imMnMn.main-menu li.imMnMnFirst > .imMnMnBorder, #imMnMn.main-menu li.imMnMnFirst > a > .imMnMnBorder {
background-image: none !important;
}
#imMnMn.main-menu li.imMnMnFirst:hover > a > .imMnMnBorder, #imMnMn.main-menu li.imMnMnFirst:hover > .imMnMnBorder {
background-image: none !important;
}
#imMnMn.main-menu li > a > .imMnMnBorder {
width: auto !important;
}
#imMnMn.main-menu ul ul li[id*="imMnMnNode"] .imMnMnTxt {
margin-left: -5px;
}
#imMnMn.main-menu li .imMnMnTextLabel {
white-space: nowrap !important;
}
@media (max-width: 719px){
#imMnMn.main-menu > ul {
padding: 10px;
}
#imMnMn.main-menu .imMnMnTxt {
border: none;
}
#imMnMn li span {
padding: 5px 0px 5px 0px !important;
}
}
</style>
<script>
$(function(){
var resize = function() {
var hamburger = $('div.hamburger-menu-background');
var menu = $('div.main-menu > ul');
if ($(window).width() <= 719) {
var padding = parseInt(menu.css('padding-left')) + parseInt(menu.css('padding-right'));
var width = parseInt(menu.css('width'));
hamburger.css('width', (width + padding) + 'px');
menu.css('width', (width) + 'px');
} else {
hamburger.css('width', 'auto');
menu.css('width', 'auto');
}
};
$(window).resize(function () { resize(); });
});
</script>

Сам проект ниже.

Читать больше
Размещено От Vitaliy M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Калинин С.
 ‪... ... ... ...  Образец нового сайта выложу примерно 2-3 октября, как оплатят провайдеру.

... OK ... ... ... тем временем в этом посте вы можете скачать один из моих кодов, который в этом случае я сделал для сайта Luciana :

>> https://helpcenter.websitex5.com/ru/post/187103#comment41

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Pavel M.
Pavel M.
User
Vitaliy M.
Попробуйте этот код для WebSite X5 Professional 13 ставить сюда СТАТИСТИКА, SЕО И КОД - перед закрывающим тегом HEAD <style> #imMnMn li span { padding: 0px 3px 0px 3px !important; } #imMnMn.main-menu li[id*="imMnMnNode"] { width: auto !important; } #imMnMn.main-menu a, #imMnMn.main-menu li .imMnMnFirstBg, #imMnMn.main-menu li .imMnMnFirstBg > .imMnMnTxt, #imMnMn.main-menu li .imMnMnFirstBg .imMnMnImg { width: auto !important; } #imMnMn.main-menu li.imMnMnCurrent .imMnMnFirstBg, #imMnMn.main-menu li:hover .imMnMnFirstBg, #imMnMn.main-menu li.imMnMnCurrent:hover .imMnMnFirstBg { background-image: none !important; } #imMnMn.main-menu li.imMnMnFirst > .imMnMnBorder, #imMnMn.main-menu li.imMnMnFirst > a > .imMnMnBorder { background-image: none !important; } #imMnMn.main-menu li.imMnMnFirst:hover > a > .imMnMnBorder, #imMnMn.main-menu li.imMnMnFirst:hover > .imMnMnBorder { background-image: none !important; } #imMnMn.main-menu li > a > .imMnMnBorder { width: auto !important; } #imMnMn.main-menu ul ul li[id*="imMnMnNode"] .imMnMnTxt { margin-left: -5px; } #imMnMn.main-menu li .imMnMnTextLabel { white-space: nowrap !important; } @media (max-width: 719px){ #imMnMn.main-menu > ul { padding: 10px; } #imMnMn.main-menu .imMnMnTxt { border: none; } #imMnMn li span { padding: 5px 0px 5px 0px !important; } } </style> <script> $(function(){ var resize = function() { var hamburger = $('div.hamburger-menu-background'); var menu = $('div.main-menu > ul'); if ($(window).width() <= 719) { var padding = parseInt(menu.css('padding-left')) + parseInt(menu.css('padding-right')); var width = parseInt(menu.css('width')); hamburger.css('width', (width + padding) + 'px'); menu.css('width', (width) + 'px'); } else { hamburger.css('width', 'auto'); menu.css('width', 'auto'); } }; $(window).resize(function () { resize(); }); }); </script> Сам проект ниже.

в новой версии это не работает

Читать больше
Размещено От Pavel M.
Vitaliy M.
Vitaliy M.
User
Pavel M.
в новой версии это не работает

Попробуйте этот код для WebSite X5 Professional 17


ставить сюда СТАТИСТИКА, SЕО И КОД - перед закрывающим тегом HEAD


<style>
[id*="_imMenuObject_"] > ul > li > .label-wrapper,
[id*="_imMenuObject_"] > ul > li > div > .label-wrapper {
width: auto !important;
}
@media (max-width: 719px){
[id*="-menu-opened"] {
width: auto !important;
}
[id*="-menu-opened"] [id*="_container-menu-opened"] li,
[id*="-menu-opened"] .label-wrapper {
width: 100% !important;
}
[id*="-menu-opened"] .label-wrapper a {
white-space: nowrap;
}
[id*="-menu-opened"] [id*="_container-menu-opened"] > ul {
top: 0px !important;
height: calc(100% - 0px) !important;
}
}
</style>
<script>
$(function(){
var resize = function() {
var hamburger = $('div.hamburger-menu-background');
if ($(window).width() <= 719) {
hamburger.css('display', 'none');
}
};
$(window).resize(function () { resize(); });
resize();
});
</script>


Сам проект ниже.

Читать больше
Размещено От Vitaliy M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

(It > Ru) ... к сожалению, у меня нет компьютера, и поэтому у меня нет программы, и я не могу загрузить ...
... Я могу рассчитывать только на ССЫЛКУ личного сайта, чтобы иметь возможность оценить ...
... в ожидании Калинин С. ССЫЛКИ, я думал, что увижу сайт Marketplace, это:
https://market.websitex5.com/it/template/anteprima/a02b479c-ab8e-4179-b2d6-206fc7bc8bb
... Я видел, что мой код, который я разработал для v.12, можно легко и просто адаптировать ...
... вы бы получили этот результат:

... вы, коллеги / друзья, можете попробовать, попробуйте получить подтверждение; ... код, связанный с этим сайтом, который будет вставлен перед закрытием тега HEAD, будет следующим:
<style>
#imHeader_imMenuObject_01_container > ul > li > .label-wrapper, *{width:auto;padding: 0px 2px 0px 5px}
#imHeader_imMenuObject_01_container > ul > li:hover > .label-wrapper, *{width:auto;padding: 0px 2px 0px 5px}
#imStickyBar_imMenuObject_01_container > ul > li > .label-wrapper, *{width:auto;padding: 0px 2px 0px 5px}
#imStickyBar_imMenuObject_01_container > ul > li:hover > .label-wrapper , *{width:auto;padding: 0px 2px 0px 5px}
</style>

... Привет, я собираюсь увидеть ФП России F1  ... ciao ...wink

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Калинин С.
Калинин С.
User
Автор

Всем откликнувшимся спасибо. Вечером попробую все рецепты по этому адресу https://spbddtl.ru/, о результатах доложу.

Читать больше
Размещено От Калинин С.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Калинин С.
Всем откликнувшимся спасибо. Вечером попробую все рецепты по этому адресу https://spbddtl.ru/ о результатах доложу.

(It > Ru) ... мой код, который будет применен к вашей странице, просто так:

<style>
#imHeader_imMenuObject_04_container > ul > li > .label-wrapper, *{width:auto;padding: 0px 2px 0px 5px}
#imHeader_imMenuObject_04_container > ul > li:hover > .label-wrapper, *{width:auto;padding: 0px 2px 0px 5px}
</style>

...........

>> Этап 1 - Настройки > Раздел Расширенные > Статистика, SEO и код > Команды Раздела KодПользовательский код—  >Перед закрывающим тегом HEAD

...

привет, ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Vitaliy M.
Vitaliy M.
User

В Вашем случае код будет:

<style>
[id*="_imMenuObject_"] > ul > li > .label-wrapper,
[id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper {
width: auto !important;
}
@media (max-width: 1300px){
[id*="_imMenuObject_"] > ul > li > .label-wrapper,
[id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper {
width: 190px !important;
}
}
</style>

Читать больше
Размещено От Vitaliy M.
Калинин С.
Калинин С.
User
Автор

Vitaliy M. и KolAsim Оба рецепта работают, вы очень помогли, благодарюsmile.

Читать больше
Размещено От Калинин С.
Калинин С.
Калинин С.
User
Автор

Подниму еще вопрос,возникает другая проблема с картами. Данный код от KolAsim их отсекает но есть возможность корректировать расстояние от текста дл края кнопки, а код Vitaliy M. работает корректно с таблицами, но я не могу расширить расстояние между текстом.

На скрине действие кода KolAsim Карта обрезана и загнана в угол. Хотя настройки на всю ширину указаны

Читать больше
Размещено От Калинин С.
Калинин С.
Калинин С.
User
Автор

А на этом скрине код от Vitaliy M карта отлично, но расстояние между кнопками мало.

Читать больше
Размещено От Калинин С.
Vitaliy M.
Vitaliy M.
User

В Вашем случае код будет:

<style>
[id*="_imMenuObject_"] > ul > li > .label-wrapper,
[id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper {
width: auto !important;
padding: 0 15px 0 15px;
}
@media (max-width: 1300px){
[id*="_imMenuObject_"] > ul > li > .label-wrapper,
[id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper {
width: 190px !important;
}
}
</style>

Читать больше
Размещено От Vitaliy M.
Калинин С.
Калинин С.
User
Автор
Vitaliy M.
В Вашем случае код будет: <style> [id*="_imMenuObject_"] > ul > li > .label-wrapper, [id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper { width: auto !important; padding: 0 15px 0 15px; } @media (max-width: 1300px){ [id*="_imMenuObject_"] > ul > li > .label-wrapper, [id*="_imMenuObject_"] > ul > li > div > .label-inner-wrapper { width: 190px !important; } } </style>

Спасибо! Вечером проверю.

Читать больше
Размещено От Калинин С.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Калинин С.
... ... ...  На скрине действие кода KolAsim Карта обрезана и загнана в угол. Хотя настройки на всю ширину указаны

(It > Ru) ... извини, может я не понял;
... должно выглядеть так, как в моем предыдущем STAMP (скриншот) ...
... но если вам нравится код Vitaliyпочти похож на мой, продолжать использовать ваш код, который я вижу, уже применяется на вашей странице...wink

привет, ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Калинин С.
Калинин С.
User
Автор
 ‪ KolAsim ‪ ‪
Калинин С. ... ... ...  На скрине действие кода KolAsim Карта обрезана и загнана в угол. Хотя настройки на всю ширину указаны (It > Ru) ... извини, может я не понял; ... должно выглядеть так, как в моем предыдущем STAMP (скриншот) ... ... но если вам нравится код Vitaliy, почти похож на мой, продолжать использовать ваш код, который я вижу, уже применяется на вашей странице... привет, ciao .

Без обид?)) Я пробовал оба кода. И кстати там был еще предыдущий от Vitaliy, который мне не понравился. Это пока тестовая площадка. Второй код от него более корректный и соответствует моим требованиям и карта реально не обрезается. Если хочешь я поставлю твой код и увидишь разницу. Пиши, отвечуsmile

Читать больше
Размещено От Калинин С.