Меня часто спрашивают о том, как сделать выпадающее меню для сайта, так как у многих информации, очень много, и она требует много место в меню. И так как простое меню этой возможности не предоставляет то, логично и правильно сделать выпадающее меню, чтобы все, что есть на сайте можно было показать в одном месте.
Покажу я вам 2 варианта горизонтальных выпадающих меню, которые я сделаю в программе Dreamweaver и с помощью одного сервиса. Кстати, если вы хотите сделать себе вертикальное выпадающее меню, то там эта возможность есть.
Как сделать выпадающее меню в Dreamweaver.
Ниже вы можете увидеть готовое горизонтальное выпадающее меню, которое мы сейчас с вами сделаем.
Для начала откройте программу Dreamweaver если она у вас еще не запущена. После откройте вашу страницу сайта в данной программе, если вы создаете сайт в Dreamweaver и перейдите во вкладку Spry ниже основного меню программы в самом верху и выберете выпадающее меню как показано на скриншоте.
Далее выберете один из пунктов выпадающего меню (горизонтальное или вертикальное), но так как мы делаем горизонтальное меню, то и выбираем соответствующий пункт. Но перед этим вы должны поставить курсор в то место, где вы хотите чтобы находилось данное меню на вашем сайте.
У вас появиться то самое горизонтальное выпадающее меню, которое я показывал вам в самом верху данной статьи, но с различием цветовой гаммы, так как ее вы можете поменять в таблице стилей данного меню, но об этом чуть позже.
Если вы не поставили курсор в нужное место, и у вас появилось меню, которое вы хотите переместить, то есть два варианта как это сделать.
— Первое, вам нужно зайти в меню программы Правка и нажать Вернуть назад, после этого повторить действие с созданием меню, но перед этим поставить курсор в нужное место.
— Второе, перейдите в код страницы и скопируйте код данного меню и вставьте его в нужное место, а старый код удалите.
Далее у вас на компьютере рядом с папкой www вашего сайта появится еще одна папка, которую вы полностью должны закинуть в корень сайта на ваш хостинг. На своем компьютере данную папку не удаляйте, иначе меню на вашем компьютере и в html редакторе не будет отображаться. Ни в коем случае не перекидывайте данную папку с меню в папку www, так как меню не будет отображаться должным образом (безобразно).
Вот как выглядит данная папка:
В принципе все готово и вы теперь можете заходить на свой сайт и видеть горизонтальное выпадающее меню. Но если вам не понравиться оформление данного меню и вы захотите поменять фон меню, цвет ссылок и т.д., то в этом случае вам нужно сделать изменения в файле css данного меню. Для этого вам нужно открыть данный файл и изменить код css под ваш стиль.
Где найти файл css к данному меню?
— Во-первых, он находиться в папке SpryAssets, которую вы уже закинули в корень сайта. Откройте данную папку на компьютере и найдите там фал с названием SpryMenuBarHorizontal.css. Откройте данный файл в Dreamweaver и найдите там такой код:
В данном коде можете поменять фон меню, цвет ссылок, текста и т.д. выделенное красным цветом на скриншоте выше.
— Во-вторых, файл css выпадающего меню вы можете найти в самой программе Dreamweaver ниже названия страницы сайта, на которой уже установлено выпадающее меню.
Вот как это выглядит:
Только нужно не просто нажать на данный файл, а именно открыть его в новой вкладке нажав по ней правой кнопкой мыши.
Во как это будет выглядеть:
Это нужно сделать для того, чтобы вы смогли сохранить данный файл после сделанных в нем изменений.
Если вы хотите добавить пункты меню и ссылки, но не знаете, как это сделать в программе Dreamweaver, то есть 2 способа.
— Первый, вы переходите в сам код выпадающего меню на странице сайта, где данное меню установлено и там можете добавлять пункты и прописывать ссылки к ним. Но это более трудоемкий путь и сложноват для новичков.
— А вот второй вариант вам в помощь. Для этого вам нужно просто навести курсором в Dreamweaver на выпадающее меню, после чего над ним должна появиться строка, которая показана ниже.
Нажмите на данную строку, и у вас в самом низу программы Dreamweaver появится панель инструментов данного меню. Вот образец:
Вот в принципе и все, что я хотел вам рассказать о том, как сделать выпадающее меню в Dreamweaver. Теперь настал черед сделать выпадающее меню с помощью одного сервиса с названием purecssmenu.com.
Как сделать выпадающее меню в онлайн-сервисе.
Вот сам образец, который я создал в данном сервисе. И примерно такой создадите и вы.
Для того чтобы начать создавать меню для сайта перейдите сюда, после чего вы попадете на сайт сервиса, в котором мы будем делать выпадающее меню.
Для того чтобы начать что-то создавать, вам нужно зарегистрироваться на данном сервисе, иначе вы не получите все необходимые файлы вашего созданного выпадающего меню. Для того чтобы зарегистрироваться в данном сервисе вам нужно перейти во вкладку меню Profile, как показано на скриншоте и там слева вам нужно ввести ваше имя и электронный ящик.
После этого вы должны зайти в свою электронную почту и внести те данные, которые пришлет данный сервис в том же месте где вы и регистрировались, но уже выбрать форму справа. После этого вы можете приступать к основной части, а именно к созданию меню.
Для этого вам понадобятся пункты меню, которые показаны слева вниз. Здесь вы можете отредактировать свое меню прямо в данном сервисе, то есть изменить название каждого пункта выпадающего меню, удалить или добавить пункты или подпункты меню и т.д. Но это можно сделать и на своем сайте. Поэтому я это рассказывать не буду. Вы если захотите, то можете и сами разобраться. Но я хочу вам рассказать о 2-х последних пунктах данного меню.
Вот эти пункты меню:
В меню Parameters (параметры) вы можете изменять фон меню, цвет текста, размер текста и т.д.
В меню Templates (шаблоны) вы можете выбрать уже готовый образец, который вы так же можете изменить.
После того, как вы выбрали себе шаблон выпадающего меню и внесли коррективы в него, то теперь возникает вопрос, что делать дальше. Далее вам нужно нажать на большую кнопку Download внизу справа данного сервиса и скачать себе на компьютер в любое место.
После того, как вы скачаете архив с меню на свой компьютер, вам нужно распокавать его и открыть. Там вы увидите папку с изображениями и html файл.
— Первое что вы должны сделать - это зайти в папку с картинками и скопировать оттуда все картинки и вставить их в папку с картинками сайта на вашем хостинге, а также вставить их в папку с изображениями, которая находиться в папке www на вашем компьютере.
— Далее вам нужно будет исправить название папки с картинками, которые находятся на вашем хостинге в css коде данного меню, если конечно данные папки не совпадают, но об этом чуть позже.
— После переходим к файлу html и открываем его в браузере. У вас должно появиться рабочее выпадающее меню и больше ничего.
Но что делать дальше?
А дальше вам нужно зайти в код данной страницы в браузере и скопировать от туда отдельно html и css код данного меню ( в Опере и Гугл Хром нажмите правой кнопкой мыши по открытой странице с выпадающим меню и выберете код страницы). HTML код вам нужно вставить в код страницы вашего сайта в подготовленное для меню место, а CSS код вы должны вставить в файл css вашего сайта.
— Далее переходим в css код данного меню и там вам нужно исправить название папки с картинками, которые вы закинули на свой хостинг, но это нужно делать, если папка с картинками в css коде не совпадает с названием папки на вашем хостинге.
Вот кусочек кода, по которому вы сможете понять, стоит ли вам лесть в код css или нет. Папка с картинками выделена красным цветом. Если у вас папка называется по-другому, то исправьте это в коде, а если такое же название папки, то ничего трогать не нужно.
Вот и вся техника того, как создать выпадающее меню для вашего сайта. Пользуйтесь этими двумя вариантами и делайте красивые и информативные выпадающие меню.
А как вы делаете выпадающее меню для своего сайта?