Как сделать выпадающее меню.

Главная >> Статьи >> Страница 6 >> Как сделать выпадающее меню

Как 2-мя способами сделать выпадающее меню.

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

Я уже писал статью о том, как сделать горизонтальное меню в программе CSS Menu Generator, но теперь я хочу вам показать то, как делаются выпадающие меню для вашего сайта.

Покажу я вам 2 варианта горизонтальных выпадающих меню, которые я сделаю в программе Dreamweaver и с помощью одного сервиса. Кстати, если вы хотите сделать себе вертикальное выпадающее меню, то там эта возможность есть.

Как сделать выпадающее меню в Dreamweaver.

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

 

 

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

Панель Spry в Dreamweaver для создания выпадающего меню

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

Панель Spry в Dreamweaver: выбрать горизонтальное или вертикальное выпадающее меню

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

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

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

— Второе, перейдите в код страницы и скопируйте код данного меню и вставьте его в нужное место, а старый код удалите.

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

Вот как выглядит данная папка:

папка SpryAssets

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

Где найти файл css к данному меню?

— Во-первых, он находиться в папке SpryAssets, которую вы уже закинули в корень сайта. Откройте данную папку на компьютере и найдите там фал с названием SpryMenuBarHorizontal.css. Откройте данный файл в Dreamweaver и найдите там такой код:

CSS код выпадающего меню

В данном коде можете поменять фон меню, цвет ссылок, текста и т.д. выделенное красным цветом на скриншоте выше.

— Во-вторых, файл css выпадающего меню вы можете найти в самой программе Dreamweaver ниже названия страницы сайта, на которой уже установлено выпадающее меню.

Вот как это выглядит:

Файл css выпадающего меню в Dreamweaver

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

Во как это будет выглядеть:

Файл css выпадающего меню в Dreamweaver

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

Если вы хотите добавить пункты меню и ссылки, но не знаете, как это сделать в программе Dreamweaver, то есть 2 способа.

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

— А вот второй вариант вам в помощь. Для этого вам нужно просто навести курсором в Dreamweaver на выпадающее меню, после чего над ним должна появиться строка, которая показана ниже.

Строка меню Spry выпадающего меню

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

Панель инструментом выпадающего меню в Dreamweaver

Вот в принципе и все, что я хотел вам рассказать о том, как сделать выпадающее меню в Dreamweaver. Теперь настал черед сделать выпадающее меню с помощью одного сервиса с названием purecssmenu.com.

Как сделать выпадающее меню в онлайн-сервисе.

Вот сам образец, который я создал в данном сервисе. И примерно такой создадите и вы.

 

 

 

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

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

Регистрация в сервисе для создания выпадающих меню

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

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

Вот эти пункты меню:

Настройки редактирования выпадающего меню в сервисе

В меню Parameters (параметры) вы можете изменять фон меню, цвет текста, размер текста и т.д.

Меню: параметры

В меню Templates (шаблоны) вы можете выбрать уже готовый образец, который вы так же можете изменить.

Меню: шаблоны

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

Кнопка скачать готовое выпадающее меню

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

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

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

— После переходим к файлу html и открываем его в браузере. У вас должно появиться рабочее выпадающее меню и больше ничего.

Но что делать дальше?

А дальше вам нужно зайти в код данной страницы в браузере и скопировать от туда отдельно html и css код данного меню ( в Опере и Гугл Хром нажмите правой кнопкой мыши по открытой странице с выпадающим меню и выберете код страницы). HTML код вам нужно вставить в код страницы вашего сайта в подготовленное для меню место, а CSS код вы должны вставить в файл css вашего сайта.

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

Вот кусочек кода, по которому вы сможете понять, стоит ли вам лесть в код css или нет. Папка с картинками выделена красным цветом. Если у вас папка называется по-другому, то исправьте это в коде, а если такое же название папки, то ничего трогать не нужно.

CSS код для редактирования выпадающего меню созданное в сервисе

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

А как вы делаете выпадающее меню для своего сайта?

Наверх

Рекомендую ознакомиться с похожими статьями:

Как подключить и применить css к сайту.

Как ускорить индексацию сайта.

Как создать сайт в Dreamweaver.

Что такое внутренняя перелинковка сайта и как ее грамотно сделать.

Что такое seo статья и как ее написать.

Оптимизация изображений за счет атрибутов alt и title.

Яндекс.Метрика