Сайт разработчика Diafan.CMS

Вход на сайт

Настраиваем меню как надо

09 февраля 2013 г.

Не стоит удалять старые стили! Лучше отложить их, и для некритичных модулей, где шаблон останется по умолчанию, можно будет скопировать стили, ускорив тем самым разработку, и облегчить себе жизнь.

После черновой вёрстки приходится доводить дизайн до идеала, что делать если стандартный дизайн модуля не подходит? Рассмотрим на примере модуля меню.

! Также важно напомнить что по умолчанию Diafan.CMS содержит плагин Superfish, очень удобная штука для создания каскадируемых выпадающих меню которую тоже можно задействовать.

Меню бывают разные и шаблонов может понадобится много. В моём случае в HTML документе оно выглядело так
<nav class="main">
    <ul class="mmenu">
            <li><a href="#">Первое</a></li>
            <li><span>Второе</span></li>
            <li><a href="#">Третье</a></li>
            <li><a href="#">Четвёртое</a></li>
        </ul>
</nav>
Сделаем также и в Diafan.CMS. Для этого понадобится создать 3 файла в папке nozhevilka.brtrs.ru/modules/menu/views.

menu.view.show_block_mainmenu.php — контейнер для меню
menu.view.show_level_mainmenu.php — первый уровень меню
menu.view.show_level_mainmenu_2.php — второй и последующие уровни

Для простоты работы можно воспользоваться процедурой копи паст из уже созданных аналогичных файлов и дальше просто редактируем приводим к потребному виду.

Файл menu.view.show_block_mainmenu.php превращается в
if (!defined('DIAFAN')) { include dirname(dirname(dirname(__FILE__))).'/includes/404.php'; }
if (empty($result["rows"])) {    return false; }

echo '<nav class="main"><ul class="mmenu sf-menu">';
$this->get('show_level_mainmenu', 'menu', $result);
echo '</ul></nav>';

Файл menu.view.show_level_mainmenu.php превращается в
if (!defined('DIAFAN')) { include dirname(dirname(dirname(__FILE__))).'/includes/404.php'; }
if (empty($result["rows"][$result["parent_id"]])) {    return true; }

foreach ($result["rows"][$result["parent_id"]] as $row) {
    if ($row["active"]) {
        // начало пункта меню для текущей страницы
        echo '<li>';
    } elseif ($row["active_child"]) {
        // начало пункта меню для активного дочернего пункта
        echo '<li>';
    }    else    {
        // начало любого другого пункта меню
        echo '<li>';
    }

    if (
         // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
         (!$row["active"] || $result["current_link"])
         // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
         && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
       ) {
        if ($row["othurl"]) {
            echo '<a href="'.$row["othurl"].'" target="_blank"'
                    .(!empty($row["active"]) || !empty($row["active_child"]) ? 'class=" active"' : '')
                    .'>';
        } else {
            echo '<a href="'.BASE_PATH_HREF.$row["link"].'"'
            .(!empty($row["active"]) || !empty($row["active_child"]) ? 'class=" active"' : '')
            .'>';
        }
    } else {
        echo '<span>';
    }

    // название пункта меню
    echo $row["name"];

    if (
        // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
        (!$row["active"] || $result["current_link"])

        // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
        && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
    ) { echo '</a>'; } else { echo '</span>'; }

    if ($result["show_all_level"] || $row["active_child"] || $row["active"]) {
    // вывод вложенного уровня меню
    $menu_data = $result;
    $menu_data["parent_id"] = $row["id"];
    $menu_data["level"]++;

    $this->get('show_level_mainmenu_2', 'menu', $menu_data);
    }

    if ($row["active"]) {
    // окончание пункта меню - текущей страницы
    echo '</li>';
    } elseif ($row["active_child"]) {
    // окончание пункта меню для активного дочернего пункта
    echo '</li>';
    } else {
    // окончание любого другого пункта меню
    echo '</li>';
    }
}
// окончание уровня меню

Файл menu.view.show_level_mainmenu_2.php превращается в
if (!defined('DIAFAN')) { include dirname(dirname(dirname(__FILE__))).'/includes/404.php'; }
if (empty($result["rows"][$result["parent_id"]])) { return true; }

// начало уровня меню
echo '<ul>';
foreach ($result["rows"][$result["parent_id"]] as $row) {

    if ($row["active"]) {
        // начало пункта меню для текущей страницы
        echo '<li>';
    } elseif ($row["active_child"]) {
        // начало пункта меню для активного дочернего пункта
        echo '<li>';
    } else {
        // начало любого другого пункта меню
        echo '<li>';
    }

    if (
        // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
        (!$row["active"] || $result["current_link"])

        // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
        && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
    ) {
        if ($row["othurl"]) {
            echo '<a href="'.$row["othurl"].'" target="_blank">';
        } else {
            echo '<a href="'.BASE_PATH_HREF.$row["link"].'">';
        }
    } else {
            echo '<span>';
        }

    // название пункта меню
    echo $row["name"];

    if (
        // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
        (!$row["active"] || $result["current_link"])

        // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
        && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
    )
    {
        echo '</a>';
    } else {
        echo '</span>';
        }

    if ($result["show_all_level"] || $row["active_child"] || $row["active"]) {
    // вывод вложенного уровня меню
    $menu_data = $result;
    $menu_data["parent_id"] = $row["id"];
    $menu_data["level"]++;

    $this->get('show_level_topmenu_2', 'menu', $menu_data);
    }
    if ($row["active"]) {
        // окончание пункта меню - текущей страницы
        echo '</li>';
    } elseif ($row["active_child"]) {
        // окончание пункта меню для активного дочернего пункта
        echo '</li>';
    } else {
        // окончание любого другого пункта меню
        echo '</li>';
    }
}
// окончание уровня меню
echo '</ul>';

Осталось исправить шаблонный тег который отвечает за вывод этого меню.

<insert name="show_block" module="menu" id="1" template="mainmenu">

настроить опции отображения по вкусу,
и дописать стили в файл /css/menu.css

Диафан также позволяет не использовать шаблон. В этом случае ссылки будут выводится друг за другом, и их можно заворачивать в какие либо конструкции.
Можно попробовать воспользоваться этой фишкой для организации бокового меню.

Например оно выглядит так
<nav class="left_1t">
    <ul class="vmenu">
        <li><a href="#">Первое</a></li>
        <li><span>Второе</span></li>
        <li><a href="#">Треть</a></li>
        <li><a href="#">Четвёртое</a></li>
    </ul>
</nav>
<insert name="show_block"  module="menu" id="2" tag_level_start_1="[nav class='left_1t'][ul class='vmenu']" tag_start_1="[li]" tag_end_1="[/li]" tag_level_end_1="[/ul][/nav]">

Вот так легко и просто в непринуждённом виде решается сложная задача, формирования несложного меню.

Осталось оформить стили.

Теги: Diafan.CMS , Diafan v5.1