Меню для сайта с подразделами

Меню для сайта. Меню с подразделами

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

Меню для сайта. Создание проекта.

В сегодняшнем уроке по программе Adobe Muse мы рассмотрим, как создать меню для сайта.

Как всегда, мы начинаем с нуля и открываем программу Adobe Muse. Нажимаем «создать сайт» -> Окей, и у нас перед глазами только домашняя страница. Открываем ее в режиме дизайна. Как всегда, я буду использовать только стандартные приложения программы Adobe Muse, чтобы вам не приходилось скачивать никаких сторонних виджетов и дополнительных модулей. Открываем библиотеку мини-приложений программы Adobe Muse, переходим в закладочку “Меню” и выбираем меню, которое мы хотим создать. Перетаскиваю его правой кнопкой мыши на рабочее поле программы, отпускаю мышку, и сразу же у нас появилась одна кнопка в меню, которая ведет на домашнюю страницу нашего сайта. Здесь так и написано: “Домашняя”.

Меню для сайта. Добавление страниц сайта.

Для того, чтобы наше меню стало немного побольше, мы переходим назад в режим плана сайта и добавляем здесь несколько страниц. Нажимаем на плюсик – раз, два, три. Пускай будет еще дополнительно три страницы. Давайте их как-нибудь назовем. Поскольку я в дальнейшем буду использовать цвета для страниц, чтобы вам было лучше видно, я так их и назову, например, красный, синий, зеленый. Итак, у нас есть домашняя страница, красная страница, синяя и зеленая. Давайте я сделаю заливку для каждой из них. Я открою каждую из этих страниц в режиме дизайна и добавлю на страницу заливку. Открываю красную страницу, делаю заливку в браузере красным цветом, далее перехожу назад в режим плана сайта, выбираю синюю страницу и делаю для нее заливку синим, опять вхожу в режим плана сайта, выбираю зеленую страницу для редактирования и назначаю ей зеленый цвет в браузере, выхожу назад в план сайта.

Меню для сайта. Автоматические ссылки на страницы. Дизайн.

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

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

Меню для сайта. Просмотр.

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

Меню для сайта. Меню в шаблоне.

Для того, чтобы это исправить, я отредактирую шаблон, который применен к каждой из этих страниц. Мы видим, что шаблон А применен ко всем нашим страницам. Я захожу на страницу “Домашняя” в режим редактирования, выделяю меню, нажимаю клавишу Ctrl+X, чтобы вырезать его из этой страницы, выхожу в режим “План сайта”, кликаю на шаблон, чтобы войти в режим редактирования и нажимаю клавишу Ctrl+V, чтобы вставить меню в шаблон, передвигаю его в нужное место (давайте расположим его вот так) и давайте перейдем теперь опять на план сайта, чтобы посмотреть, что в каждой нашей странице теперь появилось меню автоматически. Если теперь мы зайдем в режим просмотра, то теперь мы сможем свободно кликать по нашим страницам сайта (красный, синий, зеленый) и будем переходить с любой страницы на любую другую, и так же на домашнюю. Вот так легко и просто создается меню в программе Adobe Muse: с помощью стандартного мини-приложения.

Меню для сайта. Меню с выпадающими списками.

Давайте я теперь покажу вам еще одну интересную вещь: как мы можем сделать меню с выпадающими списками. Допустим, у нас сайт немного больше и у нас, кроме вот этих основных страниц есть еще подстраницы для каждого из каких-то разделов сайта. Допустим, красный, синий, зеленый – это разделы сайта, а нам необходимо задать еще подразделы сайта так, чтобы меню раскрывалось и был еще список с подразделами. Давайте создадим, например, для синего раздела еще подраздел и назовем его “темно-синий”. Создадим еще один подраздел, кликнув на плюсик сбоку и назовем его “голубой”. Зайдем в редактирование каждой из этих страниц и назначим им соответствующий цвет. Темно-синему назначим темно-синий цвет.

Выходим в режим “План сайта”, заходим в режим редактирования следующей страницы и выбираем цвет для неё – голубой. Давайте перейдем теперь к редактированиям шаблона и отредактируем наше меню так, чтобы оно отображало так же подразделы нашего сайта. Нажимаем на стрелочку для вызова параметров мини-приложения, и в настройке “Тип меню” мы выбираем все страницы. Мы видим, что тут же у нас появились к разделу “синий” два подраздела “темно-синий” и “голубой”. Теперь мы можем так же отредактировать цвета этих кнопок: к темно-синему я поставлю темно-синий, к голубому я поставлю голубой. Давайте теперь перейдем в режим просмотра. Видим, что в меню в разделе “синий” появилась стрелочка, и при наведении мыши на эту кнопку меню, у нас выпадает список с подразделами сайта. Если мы теперь будем кликать на данные кнопки, то будем автоматически переходить на соответствующие страницы.

Меню для сайта. Заключение.

Вот так, дорогие друзья. Такой вот удобный модуль, который позволяет нам быстро создать меню для сайта в программе Adobe Muse, придумали разработчики самой программы. Далее вы можете отредактировать данное меню в соответствии со своими предпочтениями, задать им различные цвета, настройки, изменить шрифты, а затем сохранить его, как собственное мини-приложение со всеми своими настройками. Делается это просто: мы выделяем отредактированное меню (например, вот такое), нажимаем правую кнопку мыши, выбираем закладку “Добавить в библиотеку”, далее мы выбираем, куда мы будем добавлять: в какую папку или закладку. Сейчас я делать этого не буду, но, а вы сможете потом найти выше сохраненное меню в разделе “Библиотека” программы Adobe Muse.

На этом все, дорогие друзья. Вы научились создавать меню для сайта в программе Adobe Muse: с выпадающими списками, с разделами и с подразделами. А я прощаюсь с вами до следующих видеоуроков. С вами был Дмитрий Шаповалов. Подписывайтесь на мой канал, ставьте лайк к этому видео и до встречи, друзья, в следующих уроках.

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

Адаптивное меню для сайта в Adobe MuseКак закрепить меню в шаблоне?
Как закрепить меню на сайтеМеню с прокруткой и фиксацией
Мобильное меню (раздвижная панель)
Мобильное меню для сайта (гамбургер-меню)
Виджеты меню для сайта

Автор видеоуроков,
Дмитрий Шаповалов