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

Обговорення тем про дизайн та верстка нових шаблонів та редагування. Доопрацювання та модифікації клубних шаблонів.
Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 12 березня 2010, 21:16

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

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

РІШЕННЯ ЗАДАЧІ!!! ДЯКУЮ gruz!


Для створення гумового меню (яке розтягуватиметься по всій ширині, а елементи будуть рівнооднакові) необхідно:
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.
Востаннє редагувалось 17 березня 2010, 15:03 користувачем Hijacker, всього редагувалось 7 разів.

Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

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

Повідомлення Besedin » 13 березня 2010, 09:10

не обов"язково сторонні меню використовувати, достатньо невеликих правок css для пунктів меню і все.
Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 13 березня 2010, 11:50

В тому то і проблема... я начебто не такий "НЮБ" в 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> це неможливо. Чи я не правий?
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

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

Повідомлення Besedin » 13 березня 2010, 11:58

виводь меню як список (тільки не в Legacy). для кожного пункту має генеруватись свій ID, до якого можеш прив"язати стилі.
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 13 березня 2010, 16:38

Код: Виділити все

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

Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 13 березня 2010, 20:54

це якщо кількість елементів стабільна.... А хотілось би, щоб була можливість добавлення.
Спробую щось зробити з порадою від ГудМєна...
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 13 березня 2010, 20:57

ну тоді в шаблоні пропиши розрахунок потібної ширини в залежності від кількості елементів і впиши стиль в тіло шаблону. Шаблон скоріше модуля, ніж загальний. Хоча, то треба дивитись.
Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 14 березня 2010, 00:34

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

Код: Виділити все

#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;
}
що можна змінити? ((((
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 14 березня 2010, 12:54

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

Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 14 березня 2010, 17:40

Вибач, ти не міг би детальніше описати, як створювати і контролювати змінні PHP, і чи можливо писати не в index.php, а в style.css? Напевне краще було б прописати щось схоже на

Код: Виділити все

 width:<?php echo 1000/$count_elem-14?>
де каунт_елем буде вказуватися в настройках шаблону (а краще було б, якби автоматично заповнювало).

ЗІ. PHP я знаю на початковому рівні, а от як інтегрувати... не знаю. Допоможи будь ласка!
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 14 березня 2010, 18:51

В .css PHP праюцвати не буде.
Йдеться про index.php ШАБЛОНА, або ШАБЛОН модуля. Спробую пізніше розписати.
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 15 березня 2010, 05:07

Створюєш у своєму шаблоні теку 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.

Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 15 березня 2010, 22:28

щось не виходить((((
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 15 березня 2010, 22:31

Лікарю, вилікуйте мене! У мене щось болить.
Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 15 березня 2010, 22:46

По ідеї де повинні стилі виводитись?
ФФ ФаєрБаг в коді не бачить <style> взагалі.
Там по моєму проблеми з відкритими закритими тегами <?php ?>
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 15 березня 2010, 22:48

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

Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 15 березня 2010, 22:49

І воно має спрацьовувати, якщо у модуля меню виставлений id для меню menu1
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 15 березня 2010, 22:57

А, і ще.

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

Код: Виділити все

            $document = & JFactory::getDocument();
            $document->addStyleDeclaration($_css);
У $_css має бути стиль без тегів <style> </style>
Це додасть стиль в head.
Hijacker
Користувач
Користувач
Повідомлень: 34
З нами з: 06 березня 2010, 00:25

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

Повідомлення Hijacker » 16 березня 2010, 00:15

Не зрозумів... Можеш написати повний зміст потрібних файлів?
Аватар користувача
gruz
Користувач
Користувач
Повідомлень: 688
З нами з: 19 червня 2008, 18:09
Звідки: Прип'ять
Подякували: 26 рази

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

Повідомлення gruz » 16 березня 2010, 00:43

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


  • Similar Topics
    Відповіді
    Перегляди
    Останнє повідомлення

Повернутись до “Шаблони для Joomla — дизайн, верстка, модифікації”

Хто зараз онлайн

Зараз переглядають цей форум: 1 і 0 гість