Меню из картинок Drupal 7

Дата публикации: 18 09 2012 Автор: PazitiFF

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

Для организации  такогог меню нам поднадобятся:

1. Собственно картинки

2. Модуль webform

3. Модуль views

Для начала, нужно установить и включить вышеперечисленные модули, а так же зависимости, если они требуются. Далее я создал новый тип контента, переходим в admin/structure/types

Добавляем новый тип нажав на "Add content type"

Далее заполняем форму по следующему шаблону:

name: header_mennu

Publishing options: Published (Остальные чекбоксы отключаем)

Сохранить

Далее идём в Manage fields созданного типа header_menu и добавляем два поля:

первое поле выбираем существующее:

Add existing field: image (Для добавления картинок)

Второе поле нужно для последующей сортировки позиций картинок с помощью views, поле нужно создать вручную, нажав на Add new field

Label: position

Machine name: field_position

Type of data to store: integer

Form element to edit the data: text field

Сохранить.

Переходим в Manage display

Полю image приваиваем format: hidden, для того чтобы картинка не отображалась в ноде

Сохраняем.

Теперь тоже самое нужно проделать для существующего типа контента WebForm

После успешного добавления полей, нужно создать блок во views, для чего переходим в admin/structure/views и жмём Add New Views

И заполняем всё как на данной картинке:

Нажимаем сохранить.

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

 

Также в fields нужно удалить всё и добавить так как показано на картинке:

 

В конечном итоге вьюха должна выглядеть так:

Сохраняем, и теперь можно попробовать добавить страничку на которую будет ссылаться картинка.

Эту оперцию здесь я описывать не буду, там всё просто и ясно.

Далее идём в блоки и включаем блок header_menu в нужный регион на сайте.

Сохраняем и видим меню из картинок.

Комментарии

прикольная каптча!

Каптча просто отличная, вот линк на неё https://www.keycaptcha.com/

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

Увидеть бы пару ссылок, где это было реализовано.
Просто у меня не поулчается и постепенно начинает развиваться комплекс неполноценности...:(
 

Вот здесь это реализованно http://podarokmame.ru/ , если не получается, отложи на время и позже попробуй снова, все проходят через мнимый комплекс неполноцености, когда изучают что то новое =))) Если будет совсем непонятно, обращайся в личку, постараюсь помочь.

Пожалуйста помогите!!!

Сделал всё как здесть написано, у меня получилоь но есть проблема.

Возле каждой картинки которую я добавляю слева появляется большая точка,

и я не знаю как её убрать.

Эта точка, ничто иное как маркер списка, который генерируется по умолчанию.

Тебе нужно отменить маркеры к элементам списка в твоем меню из картинок.

Другими словами добавь в стили савоего сайта примерно такой код:

#(Id меню) li {

list-style: none;

}

Извените зп глупый вопрос, я просто новичёк и это первый мой сайт

Не могли ли вы уточнить куда эти строки вписать

И спасибо за столь быстрый ответ

Для начала скажи, ты разрабатываешь свою тему или изменяешь встроенную? В любом случае тебе надо найти css файл темы и там добавить эти строки. Если ты нt знаешь что это такое  - напиши в личку - постараюсь объяснить. email: pavel@infobsd.ru

Помогите пожалуйста, я уже 3 дня долбаюсь и не как не могу убрать маркеры списка.

куда я только не вписывал эти строчки и какое я только id меню не писал всёравно ни в какую.

могу скинуть скриншот, с css дела не имел. Может я не туда их вставляю (эти строчки) 

но маркеры списка никак не исчезают

#(Id меню) li {

list-style: none;

}

Наконецто я нашёл решение надо в pages.css ввести

li { list-style-type: none;}

 

А как сделать их ссылками?

Подскажите, как реализовали смену картинок при наведении?

Смену картинок можно реализовать следующем образом:

- Создать файл с двумя картинками, расположенными одна над другой

- Загрузить картинку в меню

- При наведении на картинку сделать отрицательный margin-top.

Вот подробное описание данного метода.

Не понятно. Если изображение является ссылкой на свой же контент, то как оно будет ссылаться на какую-то другую страницу?

Оно будет ссылаться на свою ноду

Получается, его нельзя будет сделать ссылкой на страницу, которая формируется при помощи views?

Там же в настройках самой вьюхи написано, что картинка будет ссылаться на контент, посомтрите внимательно.

Все получилось, а как теперь их расположить эти пункты как я хочу?

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

Подскажите пожалуйста картинки как добавить? Сделала как написано ничего не отображается..

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Вы можете использовать подсветку исходного кода следующими тегами: <code>, <blockcode>, <apache>, <bash>, <css>, <drupal6>, <html5>, <javascript>, <mysql>, <php>.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.