Как сделать выпадающее меню.
Главная >> Статьи >> Страница 6 >> Как сделать выпадающее меню
Как 2-мя способами сделать выпадающее меню.Меня часто спрашивают о том, как сделать выпадающее меню для сайта, так как у многих информации, очень много, и она требует много место в меню. И так как простое меню этой возможности не предоставляет то, логично и правильно сделать выпадающее меню, чтобы все, что есть на сайте можно было показать в одном месте. Я уже писал статью о том, как сделать горизонтальное меню в программе CSS Menu Generator, но теперь я хочу вам показать то, как делаются выпадающие меню для вашего сайта. Покажу я вам 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 или нет. Папка с картинками выделена красным цветом. Если у вас папка называется по-другому, то исправьте это в коде, а если такое же название папки, то ничего трогать не нужно.
Вот и вся техника того, как создать выпадающее меню для вашего сайта. Пользуйтесь этими двумя вариантами и делайте красивые и информативные выпадающие меню. А как вы делаете выпадающее меню для своего сайта?
Рекомендую ознакомиться с похожими статьями:
|
||||||||||||
|
