Как в меню сделать перенос текста на другую строку?

@ARGR · Регистрация: 19.05.2013

Author24 — интернет-сервис помощи студентам

Добрый день всем!
Подскажите пожалуйста, как в меню сделать перенос текста на другую строку?
Пробовал <br>.
В горизонтальном меню - получилось, а в боковом появился <br>

@Taatshi · 01.08.2013, 20:32

display: block для ссылки - перенесется автоматом если помещаться не будет
и ширину конечно же задать

@vasvas7775 · 01.08.2013, 23:42

Название меню будет к примеру

HTML5

1	О компании[br][em]ww[/em]

или другие любые теги, вместо [] если хотите можете поставить {} как нравится
затем кастамиризируете шаблон вывода меню,
а именно default_url.php или default_component.php в зависемости от версии joomla
которые изначально лежат в /modules/mod_menu/tmpl/

там нас интересует переменная $linktype, которое выводит наше название, и сразу после

PHP

if ($item->menu_image)
    {
        $item->params->get('menu_text', 1) ?
        $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
        $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
}
else { $linktype = $item->title;
}

делаем подмену символов

PHP

1 2	$linktype = str_replace('[', '<', $linktype); $linktype = str_replace(']', '>', $linktype);

ну или

PHP

1 2	$linktype = str_replace('{', '<', $linktype); $linktype = str_replace('}', '>', $linktype);

то есть заменяем то, что в названии, на то что нам нужно

И вуаля, 2-е строки и 2-я строка в нашем теге. можем даже 2-й стилями отдельный вид придать.

после всего этого, в браузере меню будет

HTML5

1	О компании<br><em>ww</em>

вот и все.

@ARGR · 02.08.2013, 00:39 **[ТС]**

Спасибо за ответ!
А могли бы вы попробовать подправить это в шаблоне?
Он находится по адресу
Иконка перед пунктами меню
Jоomla 1.5

@Esilbay · 13.09.2013, 14:02

Здравствуйте! В меню если текст не помещается в длину, переносится на нижнюю строку и накладывается на другой текст.

PHP

/* Copyright (C) 2007 - 2009 YOOtheme GmbH */
 
/*
 * topmenu
 */
 
 
div#topmenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;  
}
 
div#topmenu li {
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
}
 
div#topmenu li a {
    display: block;
    height: 30px;
    padding: 0px 10px 0px 10px;
    background: url(../images/topmenu_item_bg.png) 0 6px no-repeat;
    float: left;
    overflow: hidden;  
    text-decoration: none;
}
 
div#topmenu li.first a {
    padding: 0px 10px 0px 0px;
    background: none;
}
 
div#topmenu li.last a {
    padding: 0px 0px 0px 10px;
}
 
div#topmenu a:link, div#topmenu a:visited {
    color: #323232;
}
 
div#topmenu a:hover {
    color: #323232;
    text-decoration: underline;
}
 
/*
 * menu
 */
 
 
div#menu ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    float: left;  
}
 
div#menu li {
    position: relative;
    margin: 0px;
    padding: 0px;
    display: block;
    float: left;
    z-index: 5;  
}
 
div#menu li a, #menu li span.separator {
    height: 56px;
    display: block;
    float: left;
    line-height: 32px;
    text-decoration: none;
    color: #333333;
}
 
div#menu li span {  
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;  
    background-position: 95% 0px;  
}
 
div#menu li a.current {  
 
}
 
div#menu li li a.current {  
    font-style: italic;
}
 
div#menu a:hover,
div#menu span.separator:hover,
div#menu span.sfhover {  
    /* color: #000000; */
}
 
div#menu a.active, div#menu span.active {  
    color: #E24912;
}
 
div#menu li.parent span.separator {  
    cursor: pointer;
}
 
 
div#menu ul.menu {
    padding-left: 2px;
}
 
div#menu li.level1 {
    background: url(../images/menu_level1_item.png) 100% 0 no-repeat;
}
 
div#menu a.level1, div#menu span.level1 {
    padding: 0px 20px 0px 20px;
    font-size: 110%;
    line-height: 30px;
    text-transform: uppercase;
}
 
div#menu li.active a.level1 {   
    background: url(../images/menu_level1_item_active.png) 50% 100% no-repeat;
    height: 70px;
    position: relative;
    z-index: 15;
}
 
div#menu a.level1 span, div#menu span.level1 span {
    margin-top: 15px;
}
 
 
div#menu a.level1 span.title, div#menu span.level1 span.title{
    padding: 0px;
    font-size: 100%;
    line-height: 20px;
}
 
 
div#menu a.level1 span.sub, div#menu span.level1 span.sub {
    margin-top: -2px;
    background: none;
    font-size: 10px;
    font-weight: normal;
    color: #646464;
    line-height: 10px;
    text-transform: none;
    letter-spacing: 0px;
}
 
 
div#menu ul.menu ul {
    position: absolute;
    top: 56px;
    left: -999em;  
    width: 163px;
    padding: 5px 0px 0px 0px;
    background: url(../images/menu_dropdown_bg.png) 0 0 no-repeat;
    border: 1px solid #878787;
    border-top: none;
}
 
div#menu li:hover ul, div#menu li.sfhover ul {
    left: -2px;  
    z-index: 14;
}
 
div#menu li.level1 li {
    width: 100%;  
    text-indent: 15px;
    background: url(../images/menu_level2_item.png) 0 0 no-repeat;
}
 
div#menu li.level1 li.last { background: none; }
 
div#menu li.level1 li a, div#menu li.level1 li span.separator {
    height: 25px;
    padding: 0px;
    background: none;
    float: none;  
    display: block;
    line-height: 25px;
}
 
div#menu li.level2 a.parent, div#menu li li.level2 span.parent {  
    background: url(../images/menu_level2_parent.png) 100% 0 no-repeat;
}
 
div#menu li.level2 a.active, div#menu li.level2 span.active {  
}
 
div#menu li.level2 a:hover,
div#menu li.level2 span.separator:hover,
div#menu li.level2 span.sfhover {  
}
 
 
 
 
 
div#menu li ul ul {
    margin: -57px 0 0 163px;  
}
 
div#menu ul.level2 ul {
    padding: 0px 0px 0px 0px;
    background-position: 0 -5px;
    border: 1px solid #878787;
}
 
div#menu li:hover ul ul, div#menu li.sfhover ul ul {
    
}
 
 
div#menu li:hover ul ul, div#menu li.sfhover ul ul,  
div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul,  
div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {  
    left: -999em;
}
 
 
div#menu li li:hover ul, div#menu li li.sfhover ul,  
div#menu li li li:hover ul, div#menu li li li.sfhover ul,  
div#menu li li li li:hover ul, div#menu li li li li.sfhover ul {  
    left: 0;
    z-index: 100;
}
 
 
/*
 * sub menu
 */
 
 
div#middle div.mod-menu div.module ul,
div#middle div.mod-menu div.module ul {
    margin:  0px;
    padding: 0px;
    overflow: hidden;
    list-style: none;
}
 
div#middle ul.menu li {
    margin:  0px;
    padding: 0px;
    display: block;
}
 
div#middle ul.menu a, div#middle ul.menu span.separator {
    height: 25px;
    display: block;
    line-height: 24px;
    text-decoration: none;
    color: #646464;
}
 
div#middle ul.menu li span {  
    display: block;
    background-repeat: no-repeat;  
    background-position: 100% 0px;  
}
 
div#middle ul.menu a.current {  
    font-style: italic;
    color: #E24912;
}
 
div#middle ul.menu a:hover,
div#middle ul.menu span.separator:hover,
div#middle ul.menu span.sfhover {  
    /* color: #E24912; */
}
 
div#middle ul.menu a.active, div#middle ul.menu span.active {  
    /*color: #ffffff;*/
}
 
div#middle ul.menu li.parent span.separator {  
    cursor: pointer;
}
 
 
div#middle ul.menu li.level1 {
}
 
div#middle ul.menu a.level1, div#middle ul.menu span.level1 {
    background: url(../images/submenu_l_item.png) 0 0 no-repeat;
}
 
div#middle ul.menu li.parent a.level1, div#middle ul.menu li.parent span.level1 { 
    background: url(../images/submenu_l_item_parent.png) 0 0 no-repeat;
}
 
div#right div#middle ul.menu a.level1, div#middle ul.menu span.level1 {  
    background: url(../images/submenu_r_item.png) 0 0 no-repeat;
}
 
div#right div#middle ul.menu li.parent a.level1, div#middle ul.menu li.parent span.level1 {  
    background: url(../images/submenu_r_item_parent.png) 0 0 no-repeat;
}
 
 
div#middle ul.menu li.level2 {
    background: url(../images/submenu_level2_item.png) 10px 0px no-repeat;
}
 
div#middle ul.menu a.level2 {
    text-indent: 25px;
}
 
div#middle ul.menu a.level2 span {
}
 
 
div#middle ul.menu li.level3 {
    background: url(../images/submenu_l_level2_item.png) 20px 0px no-repeat;
}
 
div#middle ul.menu a.level3 {
    text-indent: 35px;
}
 
div#middle ul.menu a.level3 span {
}
 
 
div#middle ul.menu li.level4 {
    background: url(../images/submenu_l_level2_item.png) 30px 0px no-repeat;
}
 
div#middle ul.menu a.level4  {
    text-indent: 45px;
}
 
div#middle ul.menu a.level4 span {
}

Joomla 1.5, шаблон yoo_level

@Taatshi · 13.09.2013, 20:47

Esilbay, где-то напрямую задана высота блока. Ее надо убрать. Без ссылки на страницу искать лениво

@Esilbay · 13.09.2013, 20:52

сайт/

@Taatshi · 14.09.2013, 09:02

Esilbay, там у Вас все меню сделано через "неправильно" - нужно сидеть и переверстывать. Одной строчкой не обойдешься. Если убрать высоту - все разваливается, потому что на ней все и держится.

@Esilbay · 14.09.2013, 11:02

И что теперь делать?

@Mischanja · 14.09.2013, 23:27

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

@xilog · 25.10.2017, 11:10

здравствуйте помогите сделать меню в два столбца
захожу я в \templates\jsn_metro2_pro\html\mod_menu\default_url.php

помогите решить проблему
зарание благодарю

PHP

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
 
defined('_JEXEC') or die;
 
// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';
$rel   = $item->anchor_rel ? 'rel="' . $item->anchor_rel . '" ' : '';
 
if ($item->menu_image)
{
    $item->params->get('menu_text', 1) ?
    $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
    $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
    $linktype = $item->title;
}
 
$flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));
 
$link_icon = $item->params->get('sunfw-link-icon', '');
 
$link_description = $item->params->get('sunfw-link-description', '');
 
$description = '';
if ($link_description != '')
{
    $description = '<span class="description">'.$link_description.'</span>';
}
 
$icon = '';
if ($link_icon != '')
{
    $icon = '<i class="' . $link_icon . '"></i>';
}
 
switch ($item->browserNav) :
    default:
    case 0:
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title . $rel; ?>><?php echo $icon.$linktype.$description; ?></a><?php
        break;
    case 1:
        // _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title . $rel; ?>><?php echo $icon.$linktype.$description; ?></a><?php
        break;
    case 2:
        // Use JavaScript "window.open"
        $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,' . $params->get('window_open');
            ?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $icon.$linktype.$description; ?></a><?php
        break;
endswitch;

@xilog · 25.10.2017, 11:10

захожу я в \templates\jsn_metro2_pro\html\mod_menu\default_component.php

PHP

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
 
defined('_JEXEC') or die;
 
// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';
 
if ($item->menu_image)
{
    $item->params->get('menu_text', 1) ?
    $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" /><span class="image-title">' . $item->title . '</span> ' :
    $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '" />';
}
else
{
    $linktype = $item->title;
}
 
$link_icon = $item->params->get('sunfw-link-icon', '');
 
$link_description = $item->params->get('sunfw-link-description', '');
 
$description = '';
if ($link_description != '')
{
    $description = '<span class="description">'.$link_description.'</span>';
}
 
$icon = '';
if ($link_icon != '')
{
    $icon = '<i class="' . $link_icon . '"></i>';
}
 
switch ($item->browserNav)
{
    default:
    case 0:
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $icon.$linktype.$description; ?></a><?php
        break;
    case 1:
        // _blank
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $icon.$linktype.$description; ?></a><?php
        break;
    case 2:
    // Use JavaScript "window.open"
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $icon.$linktype.$description; ?></a>
<?php
        break;
}

@sergeytolkachyov · 06.11.2017, 09:40

xilog, Вы дату сообщений смотрели? 2009 год. Найдите нестандартный модуль вывода меню на http://extensions.joomla.org (всякие MegaMenu), посмотрите настройки - чаще всего там есть приблуды для вывода колонок, вставки модулей в меню и т.д.

@ARGR 5 / 5 / 1 Регистрация: 19.05.2013 Сообщений: 452
		1
	Как в меню сделать перенос текста на другую строку? 31.07.2013, 23:04. Показов 11310. Ответов 12 Метки нет (Все метки) Добрый день всем! Подскажите пожалуйста, как в меню сделать перенос текста на другую строку? Пробовал <br>. В горизонтальном меню - получилось, а в боковом появился <br> 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	01.08.2013, 20:32	2
	display: block для ссылки - перенесется автоматом если помещаться не будет и ширину конечно же задать 0

@ARGR 5 / 5 / 1 Регистрация: 19.05.2013 Сообщений: 452
	02.08.2013, 00:39 [ТС]	4
	Спасибо за ответ! А могли бы вы попробовать подправить это в шаблоне? Он находится по адресу Иконка перед пунктами меню Jоomla 1.5 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.09.2013, 20:47	6
	Esilbay, где-то напрямую задана высота блока. Ее надо убрать. Без ссылки на страницу искать лениво 0

@Esilbay 3 / 3 / 0 Регистрация: 06.11.2009 Сообщений: 134
	13.09.2013, 20:52	7
	сайт/ Миниатюры 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	14.09.2013, 09:02	8
	Esilbay, там у Вас все меню сделано через "неправильно" - нужно сидеть и переверстывать. Одной строчкой не обойдешься. Если убрать высоту - все разваливается, потому что на ней все и держится. 0

@Esilbay 3 / 3 / 0 Регистрация: 06.11.2009 Сообщений: 134
	14.09.2013, 11:02	9
	И что теперь делать? 0

@Mischanja Всегда не хватает времени 119 / 119 / 20 Регистрация: 15.10.2009 Сообщений: 493
	14.09.2013, 23:27	10
	я вчера тоже смотрел и с высотой там проблемма еще та. Как вариант: увеличить ширину с учетом содержимого 0

@sergeytolkachyov 78 / 70 / 25 Регистрация: 13.02.2013 Сообщений: 475 Записей в блоге: 1
	06.11.2017, 09:40	13
	xilog, Вы дату сообщений смотрели? 2009 год. Найдите нестандартный модуль вывода меню на http://extensions.joomla.org (всякие MegaMenu), посмотрите настройки - чаще всего там есть приблуды для вывода колонок, вставки модулей в меню и т.д. 0