Топ Меню.

Верхнее меню.

Кому-то может показаться непонятным назначение хедера сайта. Или его ещё называют шапкой сайта. Обычно туда пихают счастливые морды, которые чего-то там должны собой символизировать, и давать какой-то посыл. Вот только подавляющая часть здравомыслящих людей считает иначе - любое действие должно быть обусловлено целесообразностью. А какая целесообразность у фотки со счастливыми мордами?

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

Конечно, можно HTML код верхнего меню и в шаблон дизайна запихать, но тогда этим меню нельзя будет оперативно управлять. А для универсальности такой возможности хочется. Хотя бы с элементарной целью смены кнопок верхнего меню при путешествии пользователя по сайту.

На самом деле, всё необходимое в движке для этого уже есть.
Функцию построения меню обычно вызывают так:

   get_menu_html_code($_s['des'], 
      array( 
         
'Меню:' => array( 
            
$_s['loc']['base'].'folder/file'.$_s['ext'] => 'Документ'
         ), 
      ) 
   );                

В результате создастся переменная $_s['menu'] с навигацией внутри.
Но функции можно дать и третий аргумент:

   get_menu_html_code($_s['des'], 
      array( 
         
'Меню:' => array( 
            
$_s['loc']['base'].'folder/file'.$_s['ext'] => 'Документ'
         ), 
      ),
      
'topmenu' /* Вот добавленный нами третий аргумент функции. */
   
);                

Теперь созданная функцией навигация уйдёт в массив с ключом, в точности равным третьему аргументу, то есть в $_s['topmenu'] - таким образом, имеется возможность стандартным способом создать сколько угодно менюшек, и с любыми именами.

Тогда наши действия по внедрению в движок топменю включают всего пять логичных шагов:

1) Резервирование глобальной переменной.

Если мы работаем с новой переменной, её сперва надо определить.
Это закон.

В данном случае проще всего в файле настроек ./data/settings.php при формировании массива со всякими настройками сразу задать наш элемент, о котором мы договорились выше:

   $_s=array(
      
'topmenu'   => '',                 # мы дописали это
      
'rnd'       => md5('write here any random sentence!'), 

2) Вывод глобальной переменной в шаблон дизайна.

По дефолту это файл ./data/design/_default-left-content.php

В его коде нужно найти то, что отвечает за хедер, и вставить туда переменную $_s['topmenu'], хорошо перед тем подумав, как это всё Вы отпозиционируете в самом хедере CSS стилями.

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

Вебмастеру всё это должно быть хорошо знакомо, так что на таких моментах останавливаться не будем. Это личный квест вебмастера, и никто не будет делать за него его же работу. Поэтому спрашивать, что же именно писать, и какими конкретно конструкциями CSS, тут не надо.

Автор в целях демонстрации тоже не будет себе ломать голову над тем же вопросом, и просто воткнёт переменную топменю прямо перед переменной контента. Пусть то меню идёт по верху страницы:

<div class="content-body">'.$_s['topmenu'].$_s['content']'</div>

Теперь у нас есть, куда складывать код топменю, и где его выводить.

3) Код кнопки.

Автор пошёл в Интернет, и спросил про то у Гугла.
CSS вариантов дизайна ссылки миллионы. А вот и один из них:

<style type="text/css">
a.b52 {
   
margin:5px 5px 5px 0;
   
overflow:hidden;
   
position:relative;
   
display:inline-block;
   
width:10em;
   
height:2.5em;
   
line-height:2.5em;
   
vertical-align:middle;
   
text-align:center;
   
text-decoration:none;
   
text-shadow:-1px 1px #777;
   
color:#fff;
   
outline:none;
   
border:2px solid #F64C2B;
   
border-radius:5px;
   
box-shadow:0 0 0 60px rgba(0,0,0,0inset.1em .1em .2em #800;
   
background:linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.b52:active {
   
top.1em;
   
left.1em;
   
box-shadow0 0 0 60px rgba(0,0,0,.05inset;
}
</
style

Внешний вид такой кнопки, в котором далее можно что-то менять:

Я красная кнопка

4) Шаблон меню.

Мы знаем, что меню всегда строится на основе шаблона.
Место его жительства - файл ./data/design/_template_default.php
Там уже есть массив $_s['template'] - после него надо дописать:

   $_s['template']['topmenu']['html']   ='<div>===lnk===</div>',
   
$_s['template']['topmenu']['link']   ='<a class="b52" href="===url===" >===ancor===</a>',
   
$_s['template']['topmenu']['select'] ='<a class="b52" href="===url===" style="color:gold;" >===ancor===</a>',

Назначение элементов этого шаблона такое:

  1. 'html' - контейнер данного меню.
  2. 'link' - шаблон ссылки с меню.
  3. 'select' - подсвеченная ссылка. Избран простейший способ подсветки.

5) Формирование дополнительного меню.

У нас есть файл _menu.php для того, чтобы задавать там навигацию.
Давайте там формировать все меню, а не только стандартную навигацию.

Как это делается на примере данного раздела авторского сайта:

<?php /* Выше этой строки в файле ничего не должно быть */

   
if (isset($_s['loc']['fold'])) {
   
    
# Это стандартное боковое меню:
   
      
get_menu_html_code(
         
$_s['des'],
         array(
            
'Помощь:' => array(
               
$_s['loc']['fold'].'iframe'.            $_s['ext'] => 'Ифрейм',
               
$_s['loc']['fold'].'title-to-menu-link'.$_s['ext'] => 'Тайтлы в меню',
               
$_s['loc']['fold'].'topmenu'.           $_s['ext'] => 'Верхнее меню.',
            ),
         )
      );
 
    
# Это дополнительное "верхнее" меню.
    # Обратите внимание на наличие третьего параметра у функции.
 
      
get_menu_html_code(
         
$_s['des'],
         array(
            
'Не важно, что тут написано. Оно не отображается.' => array(
               
$_s['loc']['fold'].'iframe'.            $_s['ext'] => 'Ифрейм',
               
$_s['loc']['fold'].'title-to-menu-link'.$_s['ext'] => 'Тайтлы в меню',
               
$_s['loc']['fold'].'topmenu'.           $_s['ext'] => 'Верхнее меню.',
            ),
         ), 
'topmenu' # код меню уходит в переменную $_s['topmenu']
      
);
   }

/* Ниже этой строки в файле ничего не должно быть. */ ?>

Автор не стал делать верхнее меню с какими-то особыми ссылками, а тупо продублировал туда навигацию раздела. Чтобы увидеть, как оно получилось, жмите сюда.

Комментарии:

При открытии страницы ссыла не активна

Вот и предыдущая версия НАНЫ и эта при переходах по ссылкам меню меняется только окраска ссылки но она по прежнему остаётся ссылкой.
Хочу попробовать её ту ссылку нейтрализовать и сделать просто надписью, а цвет можно и оставить просто цветом текста или в любой другой выкрасить в CSS.
Вопрос: Где и что нужно или можно подправить, чтобы такой вариант меню сделать?
Конечно хорошо было бы если бы готовое решение предложили.

В файле шаблонов есть шаблон HTML кода для кнопки как не нажатой, так и нажатой - пишите там что хотите, с любым CSS к ней. Не дело программера обсасывать такие частности.

Хотелось бы лишь заметить, что если выбранный документ будет иметь неактивную ссылку на себя, это не пойдёт ему на пользу, если сам документ многостраничный какой-нибудь. Как вариант, рассмотрите документ со статистикой - вернуться на морду страницы статистики из закоулков её подразделов проще и логичнее всего именно через ссылку в меню. Если та ссылка не будет являться полноценной ссылкой, будете как мартышка сидеть и жать кнопку "обратно" браузера.

Сергей
11.07.2016 16:55
файл дизайна
В данном примере в пункте 2 приводится код: '$_s['topmenu'].$_s['content']
но в файле дизайна используется другой вариант: (isset($_s['content']) ? trim($_s['content']):'')
Не понятно, как правильно использовать код.

В реальном мире не всегда всё работает так, как задумано. Вы приходите в какую-то контору, а чиновника тупо нет на месте.

Так же и тут - никто не поручится, что переменная $_s['content'] точно определена, а не сгинула вследствие какой-нибудь криворукости вебмастера. И было бы правильно не крашить процесс с вываливанием ошибок на экран, а просто проверить, существует ли вообще такая переменная перед тем, как к ней обратиться. Если не существует, то подменить её значение вакуумом, дабы избавить экран от варнингов и эрроров, которые никто не рад видеть.

То, что написано в дистрибутиве, просто кошерный вариант того, что в мануале. Подмените в голове конструкцию $_s['content'] на (isset($_s['content']) ? trim($_s['content']):'') - далее всё по мануалу.
Денис
20.06.2016 13:53
Верхняя менюха
Было бы замечательно, если бы верхняя менюха присутствовала в цмс изначально, с возможностью вырубить её (вкл-выкл) редактированием одной строки кода в любом удобном для этого месте.
yarik42
06.04.2016 08:17