Как создать кнопки меню с разной шириной в зависимости от текста
Autor: Калинин С.
Visitado 2137,
Followers 2,
Compartido 0
Доброго дня! Необходимо для сайта создать горизонтальное меню с разной шириной кнопок, ширина которых зависит введенного текста, от границ д до текста расстояние одинаковое а общая длина каждой кнопки разная и зависит от текста. Для примера как на сайте http://ddtna9line.ru/education/Скриншот приложил.
В программе только ширину задаешь и к примеру кнопка "главная" будет смотреться пусто на фоне кнопки с текстом "Прием несовершеннолетних". У в новом проекте будут как раз такие темы в названиях и сайт хотят с горизонтальным меню.
Буду признателен, если подскажете с кодом и как создать или ткните носом, где в программе настройка спрятана.
Publicado en
Настройки такие нигде не спрятаны, меню в этой программе сделанно именно так - все кнопки одинаковой ширины.
Если бы у вас не было раскрывающегося меню, можно было посоветовать на тех разрешениях, где ещё не присутсвует гамбургер, делать суррогат меню из объектов Hover button (анимированные кнопки)
Ну и общий совет - для организаций делать сайт на этом конструкторе не комильфо :)
Autor
Была такая мысля с Hover button, но у меня есть подменю и довольно обширное. Для организации как раз всего хватает, проверки проходят нормально. Чего нет в этом конструкторе даже с покупными модулями, я добавляю с внешних модулей, плагинов.
Для организаций - если они и купили лицензию, тогда возможно.
Ну и нико ещё не отменял сервисы-генераторы меню, интернет вам в помощь, за полдня можно любое меню соорудить, на выбор
Autor
Я же и спрашиваю как это сделать. Посмотрел по наводке сейчас и примерно понимаю о чем речь, есть пример, как встроить в эту программу сгенерированный CSS с меню?
Обычно добавляется папка в корне сайта и код в месте встраивания на странице.
Autor
Надо будет поиграть после выходных, тем более метода напоминает встраивание модуля для слабовидящих. Мне кажется, что тут усложняется что-то (внешний генератор, который не всегда бесплатен, потом встраивание и позиционирование отладка) Может возможно в коде самой программы стили подредактировать?
Autor
Решил не откладывать, залез в программу выставил на дурака в стиле кнопки ширину 1 (самая малая величина) и получил то, что хотел)) Позже попробую официалку запилить со стилями и тп и проверить.
(It > Ru) ... может быть, это возможно с помощью CSS EXTRA-кода, но для оценки мне нужно увидеть ССЫЛКУ вашего примера в Интернете ...
привет, ciao
.
Autor
http://ddtna9line.ru/education/
... это не сделано с WebSiteX5
... мне нужен твой пример от WebSiteX5 ...
.
Autor
Понял, тогда надо посмотреть (может и не найду). Я его просто показал, как нам надо сделать. Почти нужный эффект получился, когда в стиле кнопки поставил ширину 1 (самая малая величина), но есть минус бутерброд перестает работать. Образец нового сайта выложу примерно 2-3 октября, как оплатят провайдеру.
Попробуйте этот код для 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>
Сам проект ниже.
... OK ... ... ... тем временем в этом посте вы можете скачать один из моих кодов, который в этом случае я сделал для сайта Luciana :
>> https://helpcenter.websitex5.com/es/post/187103#comment41
.
ciao
.
в новой версии это не работает
Попробуйте этот код для 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>
Сам проект ниже.
(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 ...
.
Autor
Всем откликнувшимся спасибо. Вечером попробую все рецепты по этому адресу 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
.
В Вашем случае код будет:
<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>
Autor
Vitaliy M. и KolAsim Оба рецепта работают, вы очень помогли, благодарю.
Autor
Подниму еще вопрос,возникает другая проблема с картами. Данный код от KolAsim их отсекает но есть возможность корректировать расстояние от текста дл края кнопки, а код Vitaliy M. работает корректно с таблицами, но я не могу расширить расстояние между текстом.
На скрине действие кода KolAsim Карта обрезана и загнана в угол. Хотя настройки на всю ширину указаны
Autor
А на этом скрине код от 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>
Autor
Спасибо! Вечером проверю.
(It > Ru) ... извини, может я не понял;
... должно выглядеть так, как в моем предыдущем STAMP (скриншот) ...
... но если вам нравится код Vitaliy, почти похож на мой, продолжать использовать ваш код, который я вижу, уже применяется на вашей странице...
привет, ciao
.
Autor
Без обид?)) Я пробовал оба кода. И кстати там был еще предыдущий от Vitaliy, который мне не понравился. Это пока тестовая площадка. Второй код от него более корректный и соответствует моим требованиям и карта реально не обрезается. Если хочешь я поставлю твой код и увидишь разницу. Пиши, отвечу.