Форум Joomla! Україна
Як створити гумове меню? - Версія для друку.

+- Форум Joomla! Україна (https://joomla-ua.org/forum)
+-- Форум: Шаблони та дизайн, сайти на Joomla (https://joomla-ua.org/forum/forum-18.html)
+--- Форум: Шаблони для Joomla — дизайн, верстка, модифікації (https://joomla-ua.org/forum/forum-60.html)
+--- Тема: Як створити гумове меню? (/thread-769.html)

Сторінки: 1 2


Як створити гумове меню? - Hijacker - 12.03.2010

Доброго дня! Необхідно створити горизонтальне меню, але так, щоб воно заповнювало всю область, а елементи були однакової ширини.

Мені рекомендували модуль Extended menu, чи можливо це зробити, і якщо можливо - то як?

[h3]РІШЕННЯ ЗАДАЧІ!!! ДЯКУЮ gruz![/h3]
Для створення гумового меню (яке розтягуватиметься по всій ширині, а елементи будуть рівнооднакові) необхідно:
1) В "Адмінці" створити меню (якщо його немає) (Все меню - Менеджер меню - Создать) .
2) Зайдіть в параметри модулю Главное меню (Расширения - Менеджер модулей - обрати потрібне головне меню). З правої сторони, в панелі параметрів обирати:
  • Параметры модуля - Стиль меню - Список, а також
    Расширеные параметры - ID меню - вказати свій Ідентифікатор, наприклад menu1.
3) В CSS вашого шаблону необхідно прописати
Код:
#menu1 li{
    display: block;
    float: left;
}
4)Cтворіть текстовий документ і назвіть його default.php, впишіть нижчевказаний код і збережіть в кодуванні UTF-8.
Код:
<?php

// no direct access
defined('_JEXEC') or die('Restricted access');


if ( ! defined('modMainMenuXMLCallbackDefined') )
{
function modMainMenuXMLCallback(&$node, $args)
{
    $user    = &JFactory::getUser();
    $menu    = &JSite::getMenu();
    $active    = $menu->getActive();
    $path    = isset($active) ? array_reverse($active->tree) : null;

    if (($args['end']) && ($node->attributes('level') >= $args['end']))
    {
        $children = $node->children();
        foreach ($node->children() as $child)
        {
            if ($child->name() == 'ul') {
                $node->removeChild($child);
            }
        }
    }

    if ($node->name() == 'ul') {
        foreach ($node->children() as $child)
        {
            if ($child->attributes('access') > $user->get('aid', 0)) {
                $node->removeChild($child);
            }
        }
    }

    if (($node->name() == 'li') && isset($node->ul)) {
        $node->addAttribute('class', 'parent');
    }

    if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
    {
        if ($node->attributes('class')) {
            $node->addAttribute('class', $node->attributes('class').' active');
        } else {
            $node->addAttribute('class', 'active');
        }
    }
    else
    {
        if (isset($args['children']) && !$args['children'])
        {
            $children = $node->children();
            foreach ($node->children() as $child)
            {
                if ($child->name() == 'ul') {
                    $node->removeChild($child);
                }
            }
        }
    }

    if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
        if ($node->attributes('class')) {
            $node->addAttribute('class', $node->attributes('class').' item'.$id);
        } else {
            $node->addAttribute('class', 'item'.$id);
        }
    }

    if (isset($path) && $node->attributes('id') == $path[0]) {
        $node->addAttribute('id', 'current');
    } else {
        $node->removeAttribute('id');
    }
    $node->removeAttribute('rel');
    $node->removeAttribute('level');
    $node->removeAttribute('access');
}
    define('modMainMenuXMLCallbackDefined', true);
}

modMainMenuHelper::render($params, 'modMainMenuXMLCallback');
  
       $menuid = "menu1";
       $total_menu_width = ***;                         /* ширина меню */
       $padding_sum = **;                                 /* сума бокових падінгів в тезі <li> */
       $border_sum = **;                                   /* сума бокових бордерів в тезі <li> */
       if ($params->get('tag_id') == $menuid) {
          $items   = &JSite::getMenu();
          $rows = $items->getItems('menutype', $params->get('menutype'));
          $k=0;
          for ($i=0; $i<count($rows ); $i++) {
             if ($rows[$i]->sublevel == 0 ) {
                $k++;
             }
          }
$_css ="n#".$menuid." a {
                display: block;
                width:".(intval($total_menu_width/$k )-$padding_sum-$border_sum)."px;
             }";

            $document = & JFactory::getDocument();
            $document->addStyleDeclaration($_css);            
       }
Не забудьте змінити три прокоментовані параметри, вставивши свії числа!!!
  • $total_menu_width = ***; /* ширина меню */
    $padding_sum = **; /* сума бокових падінгів в тезі <li> */
    $border_sum = **; /* сума бокових бордерів в тезі <li> */
5) Створити на сайті теку ...сайт/templates/назва шаблону/html/mod_mainmenu/, і завантажити туди наш створений файл default.php.


Re: як створити гумове меню?))) - Besedin - 13.03.2010

не обов"язково сторонні меню використовувати, достатньо невеликих правок css для пунктів меню і все.


Re: як створити гумове меню?))) - Hijacker - 13.03.2010

В тому то і проблема... я начебто не такий "НЮБ" в CSS, але не можу придумати як це зробити.... Точніше структура HTML не дозволяє так зробити.

Код:
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr><td nowrap="nowrap">
<a href="#" class="mainlevel" id="active_menu">1</a>
<a href="#" class="mainlevel" >2</a>
<a href="#" class="mainlevel" >3</a>
<a href="#" class="mainlevel" >4</a>
</td></tr>
</table>

Код:
#menu .mainlevel {
background:url("../images/navigation.png") repeat scroll 0 -30px transparent;
border:1px solid #333333;
color:#FF9F50;
display:block;
float:left;
font-size:16px;
height:16px;
padding:7px;
text-align:center;
text-decoration:none;
width:auto;
}

потрібно, щоб кожен елемент був однакової ширини, а з атрибутом display:block для <a> це неможливо. Чи я не правий?


Re: як створити гумове меню?))) - Besedin - 13.03.2010

виводь меню як список (тільки не в Legacy). для кожного пункту має генеруватись свій ID, до якого можеш прив"язати стилі.


Re: як створити гумове меню?))) - gruz - 13.03.2010

Код:
#menu .mainlevel a {
display:block;
width:150px;
}



Re: як створити гумове меню?))) - Hijacker - 13.03.2010

це якщо кількість елементів стабільна.... А хотілось би, щоб була можливість добавлення.
Спробую щось зробити з порадою від ГудМєна...


Re: як створити гумове меню?))) - gruz - 13.03.2010

ну тоді в шаблоні пропиши розрахунок потібної ширини в залежності від кількості елементів і впиши стиль в тіло шаблону. Шаблон скоріше модуля, ніж загальний. Хоча, то треба дивитись.


Re: як створити гумове меню?))) - Hijacker - 13.03.2010

трохи не зрозумів...

Код:
#menu ul{
    height: 30px;
    width: 1000px;
}
#menu li{
    display: inline-block;
}
#menu a{
    display: block;
    height: 16px;        
    padding: 7px;
    background: url(../images/navigation.png) 0 -30px;
    border: #333 1px solid;
    font-size: 16px;
    color: #FF9F50;
    text-align: center;    
    text-decoration: none;
}
#menu a:hover{
    background:url(../images/navigation.png);
    color: #FFF;
}

що можна змінити? ((((


Re: як створити гумове меню?))) - gruz - 14.03.2010

IE такого не розуміє, принаймні раніше не розумів:
Код:
display: inline-block;
Просто кажи display:block;

Те, що я казав, у CSS не зробиш.

Ти маєш у PHP взяти в якусь змінну кількість елементів меню, поділити 1000 на цю кількість, щоби отримати ширину одного елемента. І тоді прописати
Код:
<style>
#menu a{
width:<?php echo $width_of_menu_element-14?>px;
}
</style>
14 - це те, що бере на себе padding, воно входить в width


Re: як створити гумове меню?))) - Hijacker - 14.03.2010

Вибач, ти не міг би детальніше описати, як створювати і контролювати змінні PHP, і чи можливо писати не в index.php, а в style.css? Напевне краще було б прописати щось схоже на
Код:
width:<?php echo 1000/$count_elem-14?>
де каунт_елем буде вказуватися в настройках шаблону (а краще було б, якби автоматично заповнювало).

ЗІ. PHP я знаю на початковому рівні, а от як інтегрувати... не знаю. Допоможи будь ласка!


Re: як створити гумове меню?))) - gruz - 14.03.2010

В .css PHP праюцвати не буде.
Йдеться про index.php ШАБЛОНА, або ШАБЛОН модуля. Спробую пізніше розписати.


Re: як створити гумове меню?))) - gruz - 15.03.2010

Створюєш у своєму шаблоні теку html/mod_mainmenu
templates/hijacker/html/mod_mainmenu

Копіюєш туди файл з modules/mod_mainmenu/tmpl/default.php

Відкриваєш новий файш templates/hijacker/html/mod_mainmenu/default.php

і в кінці після
Код:
modMainMenuHelper::render($params, 'modMainMenuXMLCallback');
додаєш:

Код:
    $menuid = "menu1";
    $total_menu_width = 1000;
        $padding_sum = 14;
    if ($params->get('tag_id') == $menuid) {
        $items    = &JSite::getMenu();
        $rows = $items->getItems('menutype', $params->get('menutype'));
        $k=0;
        for ($i=0; $i<count($rows ); $i++) {
            if ($rows[$i]->sublevel == 0 ) {
                $k++;
            }
        }
        ?>
        <style>
            #<?php echo $menuid; ?> a {
                display:block;
                width:<?php echo intval( $total_menu_width/$k )-$padding_sum?>px;
            }
        </style>
        <?php
            
    }

Не складно побачити, що буде спрацьовувати лише для меню, у яких ID задано menu1
Ширина там теж вказується, від якої стрибати. Також padding.


Re: як створити гумове меню?))) - Hijacker - 15.03.2010

щось не виходить((((


Re: як створити гумове меню?))) - gruz - 15.03.2010

Лікарю, вилікуйте мене! У мене щось болить.


Re: як створити гумове меню?))) - Hijacker - 15.03.2010

По ідеї де повинні стилі виводитись?
ФФ ФаєрБаг в коді не бачить <style> взагалі.
Там по моєму проблеми з відкритими закритими тегами <?php ?>


Re: як створити гумове меню?))) - gruz - 15.03.2010

Якби з ними проблема - то видно було би.
FireBug цього не покаже. Дивись в результуючому коді.


Re: як створити гумове меню?))) - gruz - 15.03.2010

І воно має спрацьовувати, якщо у модуля меню виставлений id для меню menu1


Re: як створити гумове меню?))) - gruz - 15.03.2010

А, і ще.

Правильніше буде зробити так

Код:
                $document = & JFactory::getDocument();
                $document->addStyleDeclaration($_css);
У $_css має бути стиль без тегів <style> </style>
Це додасть стиль в head.


Re: як створити гумове меню?))) - Hijacker - 15.03.2010

Не зрозумів... Можеш написати повний зміст потрібних файлів?


Re: як створити гумове меню?))) - gruz - 15.03.2010

Ти спочатку те реалізуй, що я одразу писав.


Re: як створити гумове меню?))) - Hijacker - 16.03.2010

ftp://.../www/сайт/templates/назва шаблону/html/mod_mainmenu/default.php

Код:
<?php

// no direct access
defined('_JEXEC') or die('Restricted access');


if ( ! defined('modMainMenuXMLCallbackDefined') )
{
function modMainMenuXMLCallback(&$node, $args)
{
    $user    = &JFactory::getUser();
    $menu    = &JSite::getMenu();
    $active    = $menu->getActive();
    $path    = isset($active) ? array_reverse($active->tree) : null;

    if (($args['end']) && ($node->attributes('level') >= $args['end']))
    {
        $children = $node->children();
        foreach ($node->children() as $child)
        {
            if ($child->name() == 'ul') {
                $node->removeChild($child);
            }
        }
    }

    if ($node->name() == 'ul') {
        foreach ($node->children() as $child)
        {
            if ($child->attributes('access') > $user->get('aid', 0)) {
                $node->removeChild($child);
            }
        }
    }

    if (($node->name() == 'li') && isset($node->ul)) {
        $node->addAttribute('class', 'parent');
    }

    if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
    {
        if ($node->attributes('class')) {
            $node->addAttribute('class', $node->attributes('class').' active');
        } else {
            $node->addAttribute('class', 'active');
        }
    }
    else
    {
        if (isset($args['children']) && !$args['children'])
        {
            $children = $node->children();
            foreach ($node->children() as $child)
            {
                if ($child->name() == 'ul') {
                    $node->removeChild($child);
                }
            }
        }
    }

    if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
        if ($node->attributes('class')) {
            $node->addAttribute('class', $node->attributes('class').' item'.$id);
        } else {
            $node->addAttribute('class', 'item'.$id);
        }
    }

    if (isset($path) && $node->attributes('id') == $path[0]) {
        $node->addAttribute('id', 'current');
    } else {
        $node->removeAttribute('id');
    }
    $node->removeAttribute('rel');
    $node->removeAttribute('level');
    $node->removeAttribute('access');
}
    define('modMainMenuXMLCallbackDefined', true);
}

modMainMenuHelper::render($params, 'modMainMenuXMLCallback');
   $menuid = "menu";
   $total_menu_width = 1000;
   $padding_sum = 14;
   if ($params->get('tag_id') == $menuid) {
      $items   = &JSite::getMenu();
      $rows = $items->getItems('menutype', $params->get('menutype'));
      $k=0;
      for ($i=0; $i<count($rows ); $i++) {
         if ($rows[$i]->sublevel == 0 ) {
            $k++;
         }
      }
      ?>
      <style>
         #<?php echo $menuid; ?> a {
            display: block;
            width:<?php echo intval( $total_menu_width/$k )-$padding_sum?>px;
         }
      </style>
      <?php
        
   }
не допомогло(((


Re: як створити гумове меню?))) - gruz - 16.03.2010

Давай доступ до сайту в приват - допоможе.

ТИ ТОЧНО В НАЛАШТУВАННЯ МОДУЛЯ ПОТРІБНИЙ ID ВКАЗАВ???


Re: як створити гумове меню?))) - Hijacker - 16.03.2010

Точно... Я забув в параметрах вказати ІД))))) (ну що сказати, ума нема- строй дома =) ).
Ще один бок був, но я справив, ти не врахував бордери.

ДУЖЕ ДЯКУЮ!!!!!!!! Вважаю потрібно написати цей метод в "Важливо" на форумі. Подібних способів, а тим паче робочих, не бічив.


Re: як створити гумове меню?))) - gruz - 16.03.2010

Ну то обкатай, зроби щоби стилі прописувались у head, як я потім додавав, і видай результуюче рішення. Перший пост редагуй, змінюй тему, приклеюй файл і докладний опис. І буде тобі щастя.


Re: як створити гумове меню?))) - Hijacker - 16.03.2010

Код:
$document = & JFactory::getDocument();
            $document->addStyleDeclaration($_css);

а куди ж це вставляти??? в кінець файла?


Re: як створити гумове меню?))) - gruz - 16.03.2010

Модифікувати код. Замість того, щоби виводити в потік ( в документ через echo ) стиль, через от ту конструкцію додати його в head документа. Я ж пояснив. Ти спробуй, де обламаєшся, спитай. Тільки конкретно.


Re: як створити гумове меню?))) - Hijacker - 16.03.2010

Ок... Куди конкретно вставлять ті строки? Модифікувати можна по різному ж ....


Re: як створити гумове меню?))) - gruz - 16.03.2010

Код:
$menuid = "menu1";
       $total_menu_width = 1000;
            $padding_sum = 14;
       if ($params->get('tag_id') == $menuid) {
          $items   = &JSite::getMenu();
          $rows = $items->getItems('menutype', $params->get('menutype'));
          $k=0;
          for ($i=0; $i<count($rows ); $i++) {
             if ($rows[$i]->sublevel == 0 ) {
                $k++;
             }
          }
$_css ="n#".$menuid." a {
                display:block;
                width:".(intval( $total_menu_width/$k )-$padding_sum)."px;
             }";

            $document = & JFactory::getDocument();
            $document->addStyleDeclaration($_css);            
       }

Приблизно так. Писав тут, та що синтаксичну правильність коду перевір в процесі виконання.


Re: як створити гумове меню?))) - Hijacker - 16.03.2010

Зробив - працює))))... Дякую)))


Re: як створити гумове меню?))) - gruz - 16.03.2010

Дякую забагато. Але от якщо іншим людям історію в картинках напишеш - це буде як раз те саме.