1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

Как сделать горизонтальное меню

Главные вкладки

Аватар пользователя Scorpil Scorpil 21 июля 2009 в 18:46

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

Как можно сделать меню вертикальным и разместить его как на этом сайте - под заголовком? Или это все зависит от шаблона?

Комментарии

Аватар пользователя Дровосек Дровосек 21 июля 2009 в 22:21

Чтобы сделать вертикальным - надо править CSS.
А можно создать отдельный блок прямо над содержанием и прикрутить к нему CSS, в которой и зададим нужный нам вывод.
Алгоритм примерно такой:
1)Открываем файл инфо используемой теме(приведу пример темы artsy)
Вносим в него примерно такие строки:

regions[header] = Header
regions[top] = top
regions[left] = Left sidebar
regions[topmenu] = topmenu
regions[content] = Content
regions[bodymenu] = bodymenu
regions[right] = Right sidebar
regions[reklama4] = Reklama 4
regions[footer] = Footer

Из них обязательны: top, left, content, right, footer - это сдандартные блоки темы. Остальное по вкусу)))
2)Затем, возьмем, к примеру topmenu. Чтобы вывести его перед содержанием, в файл page.tpl
надо написать строчку

<?php if ($topmenu):?>
<div id="topmenu"><ul class="menu-h">
<?php print $topmenu; ?></ul>
</div>
<?php endif; ?>

перед строкой вывода контента

<?php<div class="clear-block">
<?php print $content ?>
</div>?>

Вот к примеру кусок моего файла:

<?php<div id="content">
            <div id="center">
                <?php if ($topmenu):?>
                <div id="topmenu"><ul class="menu-h">
                <?php print $topmenu; ?></ul>
                </div>
                <?php endif; ?>
                <br /><br />
                <?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
                <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
                <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
                <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
                <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
                <?php if ($show_messages && $messages): print $messages; endif; ?>
                <?php print $help; ?>
                <div class="clear-block">
                  <?php print $content ?>
                </div>?>

3)Блок мы добавили. Теперь сделаем для него CSS. Собственно за вывод меню горизонтально ответсвенен тег ul.
Пишем приблизительно такую конструкцию в файл style.css:

.menu-h { overflow: hidden;}
.menu-h li { float: left; list-style: none; padding: 5px; display: inline-block;
width: 80px; text-align:center;}

Этот стиль надо использовать в верхнем блоке(topmenu) для ul. Он и будет выводить нам горизонтальное меню.

Аватар пользователя glu2006 glu2006 21 июля 2009 в 23:08

Слегка подправлю с позволения:


<?php if ($topmenu):?>
<div id="topmenu">
   <?php print $topmenu; ?>
</div>
<?php endif; ?>

Меню и так по умолчанию завернуто в тег

    .menu-h { overflow: hidden;}
    .menu-h li { float: left; list-style: none; padding: 5px; display: inline-block;
    width: 80px; text-align:center;}

    Если вы используете float: left, то зачем вам пользовать display: inline-block ? достаточно простого display: block.