Как создать раскрывающееся меню?

3 ноября 2014 г. Просмотров: 585
Раскрывающееся меню является одним из наиболее удобных решений в оформлении веб-страницы и использовании ее свободного места. Его можно сделать разными способами.

Вам понадобится

  • - HTML-редактор.

Инструкция

  • Скачайте и установите на ваш компьютер программу-редактор веб-страниц. Вы также можете воспользоваться стандартной программой для редактирования текста, но намного проще работать с HTML-кодом в специально предназначенных для этого редакторах. Если вы не можете сориентироваться в их выборе, отдайте предпочтение обычным русскоязычным программам с интуитивно понятным интерфейсом и минимальным набором функций. Выполните загрузку программного обеспечения с официального сайта его разработчика и инсталлируйте его на ваш компьютер, следуя указаниям пунктов меню. Запустите его и выберите в меню создание файла с расширением .css , назовите его style.
  • Откройте редактирование недавно созданного вами файла с расширением .css и пропишите в нем следующий код, который необходим для выполнения операций по редактированию и настройке раскрывающегося списка меню. Вы можете использовать для этого специальные шаблоны, которые доступны для скачивания в интернете или написать код самостоятельно. В случае использовании вами шаблона выполните детальную настройку вашего выпадающего меню касательно фонового цвета, цвета шрифта, настройте ширину меню, его высоту, выравнивание текста и так далее. Введите код для применения указанных вами настроек выпадающего меню.
  • Создайте ненумерованный список позиций выпадающего меню для редактируемой вами веб-страницы. Для этого также используйте готовый или написанный вами код. Это и будет основой вашего выпадающего меню.
  • Если вы не хотите применять HTML-код для создания раскрывающегося меню веб-страницы, скачайте Java-скрипт и вставьте его в редакторе. Используйте для этого готовые шаблоны с предпросмотром, которые выкладываются в интернет. Выберите среди них наиболее подходящий по стилю вашей страницы шаблон, после чего проверьте его на наличие вредоносного кода.
  • Оцените статью!