• Главная
• Новости
• Контакты
• О нас

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

#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }

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

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

• Главная
• Новости
• Контакты
• О нас

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

#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

• Главная
• Новости
• Контакты
• О нас

Подпункты мы разместим в отдельном списке, вложив его в элемент

• Главная
• Новости
• Контакты
  • Адрес
  • Телефон
  • Email
• О нас

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент

#navbar ul { display: none; } #navbar li:hover ul { display: block; }

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.

#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }

В общем случае задача формирования меню включает:

• выделение HTML элементов для построения меню;
• создание шаблона меню (создание шаблона компонента Меню );
• включение функции показа меню (вызов компонента Меню ) в общем шаблоне ("прологе" и "эпилоге");
• заполнение меню в соответствии со структурой сайта.

Структура меню

Любое меню на сайте строится на основе двух составляющих:

• массива данных $aMenuLinks , определяющего состав меню, задает названия и ссылки для всех пунктов меню. Управление массивом данных осуществляется через административный интерфейс;
• шаблона внешнего представления меню. Шаблон меню - это PHP код, определяющий внешний вид меню (шаблон компонента Меню ). Шаблон меню обрабатывает массив данных, выдавая на выходе HTML-код.

Массив данных меню

Данные для каждого типа меню хранятся в отдельном файле, имя которого имеет следующий формат: .<тип меню>.menu.php . Например, для хранения данных меню типа left будет использоваться файл .left.menu.php , а для хранения данных меню типа top - файл .top.menu.php .

Меню является иерархически наследуемым. Файлы меню размещаются в папках тех разделов сайта, где требуется показ соответствующих типов меню. Если для данного раздела не создан соответствующий файл меню, система производит поиск файла в каталоге уровнем выше.

Например, т.к. основное меню (в демо-версии продукта, это меню типа top ) должно выводиться во всех разделах, то файл данного меню помещается только в корневой каталог сайта.

Соответственно меню второго уровня (в демо-версии продукта, это меню left ) выводится отдельно для каждого раздела сайта. Поэтому в папке каждого раздела создается свой файл для данного типа меню.

Ещё пример : посетитель находится в разделе /ru/company/about/ . Для показа меню типа left файл меню ищется системой в следующей последовательности:

1. /ru/company/about/.left.menu.php
2. /ru/company/.left.menu.php
3. /ru/.left.menu.php
4. /.left.menu.php

Если в одном из каталогов найдено меню, то поиск останавливается и в последующих каталогах уже не ищется.

Система Bitrix Framework позволяет также создавать меню динамического типа Для этого требуется в компоненте Меню включить опцию Подключать файлы с именами вида.тип_меню.menu_ext.php ("USE_EXT" => "Y"), которая по умолчанию выключена. . Т.е. массив данных таких меню генерируется автоматически на основании некоторых данных, получаемых с помощью программного кода. Данный код должен храниться в папке соответствующего раздела сайта в файле с именем .<тип меню>.menu_ext.php.

Основная задача подобных файлов - это манипуляция массивом $aMenuLinks . Данные файлы не редактируются визуально в модуле Управление структурой , поэтому они не смогут быть случайно отредактированы при визуальном редактировании меню. При создании этого файла используйте компонент Пункты меню (bitrix:menu.sections ).

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

Внимание! Если в качестве пунктов меню используются разделы каталога без ЧПУ, необходимо указывать переменные в значимых переменных запроса.

Примером такого меню может служить левое меню раздела Каталог книг , представленное в демо-версии продукта. Здесь первые два пункта меню Авторы и Рецензии созданы обычным способом, а остальные (Бизнес-литература , Детская литература и т.д.) формируются динамически.

В данном случае в качестве пунктов меню используются названия групп каталога Книги , созданного на основе информационных блоков. Программный код, на основе которого генерируется меню, хранится в файле .left.menu_ext.php в папке /e-store/books/ .

В файлах .<тип меню>.menu.php могут использоваться следующие стандартные переменные:

• $sMenuTemplate - абсолютный путь к шаблону меню (данная переменная используется крайне редко);
• $aMenuLinks - массив, каждый элемент которого описывает очередной пункт меню.

  Структура данного массива:

  Array ( => пункт меню 1 Array ( => заголовок пункта меню => ссылка на пункте меню => массив дополнительных ссылок для подсветки пункта меню: Array ( => ссылка 1 => ссылка 2 ...) => массив дополнительных переменных передаваемых в шаблон меню: Array ([имя переменной 1] => значение переменной 1 [имя переменной 2] => значение переменной 2 ...) => условие, при котором пункт меню появляется это PHP выражение, которое должно вернуть "true") => пункт меню 2 => пункт меню 3 ...)

Примеры файлов меню

IsAuthorized()"), Array("Журнал обучения", "gradebook.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()"), Array("Анкета специалиста", "profile.php", Array(), Array(), "\$GLOBALS["USER"]->IsAuthorized()"),); ?> IncludeComponent("bitrix:menu.sections", "", Array("ID" => $_REQUEST["ELEMENT_ID"], "IBLOCK_TYPE" => "books", "IBLOCK_ID" => "30", "SECTION_URL" => "/e-store/books/index.php?SECTION_ID=#ID#", "CACHE_TIME" => "3600")); $aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt); ?>

Организация показа меню

Показ меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu) . Например, вызов верхнего меню на демо-сайте имеет следующий вид.

Если вас интересует ответ на вопрос как создать меню сайта, то вы пришли по верному адресу.

Мы рассмотрим создание динамического меню на php, написанное специально для чайников в программировании, а также для тех, кто еще в танке.

Урок 3. Меню на php для сайта делаем динамичным - чайникам

Создадим будущий макет нашего сайта. Для этого нарисуем в фотошопе супер красивый сайт и разрежем на кусочки. Представим, что шапка, логотип, меню и подвал не написаны словами, как в данном примере, а это изысканно и красочно оформленные элементы сайта.

Создадим для примера три страницы и назовем их Раздел 1, Раздел 2, Раздел 3

Этот текст для разных страниц будет разный, но мы не будем на нем заморачиваться и оставим его как есть на всех страницах.

Приступим к созданию сайта на php.

1. Выделим блоки header, logo, menu, footer в отдельные файлы c расширением php или html

header.html

logo.html

menu.html

footer.html

Добавим файл с этим текстом, чтобы видеть его на всех страницах. Назовем его text.html

Примечание. С этого момента дальнейшие записи буду вести непосредственно в файле text.html

2. Создадим шаблон для нашего сайта на php.

Для этого поступим просто - сохраним настоящий файл, но уже с расширением php и сотрем все текстовое наполнение. Пусть это не профессионально, зато понятно, а усложнять все будем позже. Сейчас главное понять принцип верстки.

3. Теперь файл template.html нам не нужен.

Благодаря ему мы имеем представление о том, как будет выглядеть наш сайт.

4. Нашим шаблоном является файл template.php

В него мы сейчас вставим с помощью команды include все элементы сайта.

5. Создадим три странички, как собирались изначально.

Раздел 1 , назовем 1.php

Раздел 2 , назовем 2.php

Раздел 3 , назовем 3.php

Для этого можно воспользоваться простейшей командой сохранить как...

Для самых маленьких поясню: открываем файл template.php , затем нажимаем сохранить как... и сохраняем под названием 1.php , повторяем процедуру и последовательно сохраним страницы сайта 2.php , 3.php

У нас получилось 3 страницы с одинаковым дизайном. Достаточно вставлять вместо файла text.html другой, дополнять разными картинками или какими-либо html кодами, скриптами и содержимое каждой страницы будет уникальным.

Внимание!

Если не будет создан файл index.php для главной страницы, то в браузере, набрав адрес сайта мы не увидим сам сайт, а всего лишь структуру директории (перечень папок).

Можете посмотреть в денвере и убедиться. Исправим ситуацию - создадим файл index.php и назовем долго не мудрствуя Главная . Заодно создадим файл text-home.html и с помощью команды include вставим на только что созданную главную страницу сайта.

6. Как просмотреть сайт на php?

Что получилось - так просто не увидим. Это уже не шаблон с расширением html.

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

Вот теперь порядок. Набрала адрес сайта и увидела все только что созданное в нормальном виде с дизайном.

Теперь возьмемся за php меню сайта.

1. Откроем файл menu.html и превратим раздел1, 2 и 3 в ссылки по сайту. Ссылки в php создаются по-разному.

Наша задача - научиться чувствовать сайт, созданный на php. Поэтому ссылки будем делать, как на обычном статичном сайте Раздел 1 и т.д.

Мне эта процедура создания ссылок безумно нравится в Macromedia Dreamweaver. Успевай жать ОК и пить кофе.

2. Как сделать ссылку в меню неактивной, если посетитель находится на данной странице.

Посетителю будет удобнее ориентироваться по сайту зная, на какой именно страинице он находится.

Если вы выполнили все шаги строго по пунктам, то видите, что у нас все ссылки в меню активны постоянно. Как это исправить?

Для начала вспомним определение что такое Условные операторы

– это когда какое-то действие выполняется или не выполняется в зависимости от условий.

Выполним следующие действия:

• Нам понадобятся переменные и один условный оператор :