Как создать меню?

@kabl92 · Регистрация: 24.09.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте! подскажите пожалуйста как создать горизонтальное меню в HTML?

@mamedovvms · 03.11.2009, 17:43

можно создать таблицей

@kabl92 · 03.11.2009, 17:45 **[ТС]**

можно создать таблицей. как?

@BanDit · 03.11.2009, 17:56

Вначале создаем структуру нашего меню. Она включает в себя слой с именем menu, который является основным и группу слоев формирующих подменю (пример 1).
Пример 1. Структура слоев в меню

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id=menu>
  <a href=russian.html>Русская кухня</a>
  <a href=ukrainian.html>Украинская кухня</a>
  <a href=caucasus.html>Кавказская кухня</a>
  <a href=asia.html>Кухня Средней Азии</a>
</div>
 
<div id=submenu>
 <div id=sm1 class=submenutext>
   <a href=linkr1.html>Бефстроганов</a> |
   <a href=linkr2.html>Гусь с яблоками</a> |
   <a href=linkr3.html>Крупеник новгородский</a> |
   <a href=linkr4.html>Раки по-русски</a>
 </div>
 <div id=sm2 class=submenutext>
   <a href=linku1.html>Вареники</a> |
   <a href=linku2.html>Жаркое по-харьковски</a> |
   <a href=linku3.html>Капустняк черниговский</a> |
   <a href=linku4.html>Потапцы с помидорами</a>
 </div>
 <div id=sm3 class=submenutext>
   <a href=linkc1.html>Суп-харчо</a> |
   <a href=linkc2.html>Лилибдж</a> |
   <a href=linkc3.html>Чихиртма</a> |
   <a href=linkc4.html>Шашлык</a>
 </div>
<div id=sm4 class=submenutext>&nbsp;</div>
</div>

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

Стиль для меню будет зависеть от того, какой вид меню и подменю вы хотите использовать. Но в любом случае элементы с классом submenutext скрываются от просмотра с помощью атрибута display со значением none (пример 2). Также, чтобы не происходило смещение текста под меню, требуется установить высоту подменю (селектор #submenu), добавив параметр height с подходящим значением.
Пример 2. Стиль для изменения вида меню

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style type="text/css">
 
#menu {
padding-left: 20px /* Отступ слева от вкладок */
}
 
#menu A {
padding: 2px 10px 1px; /* Поле по вертикали и горизонтали */
border: 1px solid black; /* Рамка для создания вкладки */
margin-right: 5px; /* Расстояние между вкладками */
background: #f0f0f0; /* Цвет фона вкладок */
text-decoration: none /* Убираем подчеркивание у ссылок */
 
}
 
#submenu {
background: #fc0; /* Цвет фона подменю */
border-top: 1px solid black; /* Линия под вкладками */
padding: 5px; /* Поля вокруг текста */
height: 30px /* Высота подменю в пикселах */
}
 
.submenutext {
display: none /* Прячем подменю */
}
 
#submenu A {
color: #333 /* Цвет ссылок в подменю */
}
 
#menu .tabactive {
 
background: #fc0; /* Цвет фона активной вкладки */
border-bottom: 1px solid #fc0; /* Линия под вкладками */
color: maroon /* Цвет текста в активной вкладке */
} </style>

Остается только добавить скрипт. Создаем свою функцию subMenu, в качестве аргументов используется указатель на текущую вкладку (переменная obj) и указатель на идентификатор подменю (переменная menu). Аргумент obj требуется, чтобы изменять стиль активной вкладки через метод className. Ему присваивается имя класса tabactive, свойства которого задаются в стилях (пример 3). При этом все необходимые свойства оформления активной вкладкой хранятся в одном месте и их легко модифицировать. Чтобы скрыть и отобразить нужное подменю, изменяем свойство display определенного слоя через функцию getElementById. Переменные prevtab и prevmenu нужны, чтобы сохранять соответственно указатель на предыдущую активную вкладку и указатель на то подменю, которое отображалось в последний раз. Это позволяет восстанавливать первоначальные свойства данных объектов.
Пример 3. Скрипт для отображения подменю

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
 
var prevmenu, prevtab;
 
function subMenu(obj, menu) {
 
if (document.getElementById) {
 
// Скрываем предыдущее подменю
  if (prevmenu) document.getElementById(prevmenu).style.display = "none";
 
// Отображаем текущее подменю
 document.getElementById(menu).style.display = "block";
 
  if (prevtab) {
 
// Восстанавливаем стиль предыдущей активной вкладки
   prevtab.className = "";
  }
 
// Устанавливаем для текущей вкладки стиль с классом tabactive
  obj.className = "tabactive";
 
// Сохраняем указатель на подменю и текущую вкладку
  prevmenu = menu;
  prevtab = obj;
 
}
}
 
</script>

Остается теперь все свести воедино и получить нужный код для создания меню с подменю (пример 4).
Пример 4. Окончательный код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<style type="text/css">
 
#menu {
padding-left: 20px
}
 
#menu A {
padding: 2px 10px 1px;
border: 1px solid black;
margin-right: 5px;
background: #f0f0f0;
text-decoration: none
 
}
 
#submenu {
background: #fc0;
border-top: 1px solid black;
padding: 5px;
height: 30px
}
 
.submenutext {
display: none; /* Прячем подменю */
1height: 30px
}
 
#submenu A {
color: #333 /* Цвет ссылок в подменю */
}
 
#menu .tabactive {
 
background: #fc0; /* Цвет фона активной вкладки */
border-bottom: 1px solid #fc0; /* Линия под вкладками */
color: maroon /* Цвет текста в активной вкладке */
}
 
</style>
 
<script type="text/javascript">
 
var prevmenu, prevtab
 
function subMenu(obj, menu) {
 
if (document.getElementById) {
if (prevmenu) document.getElementById(prevmenu).style.display = "none"
document.getElementById(menu).style.display = "block"
if (prevtab) { prevtab.className = "" }
obj.className = "tabactive"
prevmenu = menu
prevtab = obj
 
}
}
 
</script>
</head>
<body>
<div id=menu>
<a href=russian.html onMouseOver="subMenu(this,'sm1')">Русская кухня</a>
<a href=ukrainian.html onMouseOver="subMenu(this,'sm2')">Украинская кухня</a>
<a href=caucasus.html onMouseOver="subMenu(this,'sm3')">Кавказская кухня</a>
<a href=asia.html onMouseOver="subMenu(this,'sm4')">Кухня Средней Азии</a>
</div>
<div id=submenu>
<div id=sm1 class=submenutext>
<a href=linkr1.html>Бефстроганов</a> |
<a href=linkr2.html>Гусь с яблоками</a> |
<a href=linkr3.html>Крупеник новгородский</a> |
<a href=linkr4.html>Раки по-русски</a>
</div>
<div id=sm2 class=submenutext>
<a href=linku1.html>Вареники</a> |
<a href=linku2.html>Жаркое по-харьковски</a> |
<a href=linku3.html>Капустняк черниговский</a> |
<a href=linku4.html>Потапцы с помидорами</a>
</div>
<div id=sm3 class=submenutext>
<a href=linkc1.html>Суп-харчо</a> |
<a href=linkc2.html>Лилибдж</a> |
<a href=linkc3.html>Чихиртма</a> |
<a href=linkc4.html>Шашлык</a>
</div>
<div id=sm4 class=submenutext>&nbsp;</div>
</div>
...
</body>
</html>

Для вызова функции subMenu используется событие onMouseOver, которое возникает при наведении курсора мыши на вкладку меню. В качестве указателя на текущую вкладку в аргументе функции subMenu применяется ключевое слово this. Имя идентификатора подменю следует брать в кавычки.

Приведенное в примере 4 меню по своему виду незначительно различается в браузерах Internet Explorer и Firefox. Однако на сам принцип работы меню это не влияет, к тому же с помощью стилей оформление меню можно менять по своему вкусу и желанию.

@kabl92 · 03.11.2009, 17:59 **[ТС]**

спасибо большое,сейчас буду пробывать!

@Vanstorm · 03.11.2009, 20:13

http://www.inetessentials.ru/lessons/menu.html

@vahagn_9 · 21.09.2010, 15:20

Сообщение от kabl92

Здравствуйте! подскажите пожалуйста как создать горизонтальное меню в HTML?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>простое горизонтальное випадаюшое меню</title>
    <style type="text/css">
        .nav, .nav ul
            {
                list-style:none;
                margin:0;
                padding:0;
                font:15px/30px Verdana, Arial, Helvetica, sans-serif;
                background-color: #666666;
            }
        .nav
            
            {
                height:30px;
                border:1px solid #000000;
            }
        .nav li
            {
                float:left;
                position:relative;
            }
        .nav li:hover
            {
                background-color:#333333;
            }
        .nav ul
            {
                position:absolute;
                left:-1px;
                top:30px;
                border:1px solid #000000;
                border-bottom:0;
                border-top:0;
                display:none;
            }
        .nav li:hover ul
            {
                display:block;
            }
        .nav ul a
            {
                border:0;
                border-bottom:1px solid #000000;
            }
        .nav a
            {
                display:block;
                width:100px;
                padding:0 20px;
                color:#FFFFFF;
                text-decoration:none;
                border-right:1px solid #000000;
                text-align:center;
            }
        .nav a:hover
            {
                color:#000000;
                background-color:#CCCCCC;
            }
    
    </style>
</head>
 
<body>
    <ul class="nav">
        <li><a href="#">men1</a></li>
        <li><a href="#">men2</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
        <li><a href="#">men3</a></li>
        <li><a href="#">men4</a></li>
        <li><a href="#">men5</a></li>
    </ul>
</body>
</html>

@kabl92 · 21.09.2010, 21:27 **[ТС]**

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kabl92 67 / 0 / 0 Регистрация: 24.09.2009 Сообщений: 80

	Как создать меню? 03.11.2009, 17:27. Показов 30687. Ответов 7 Метки нет (Все метки) Здравствуйте! подскажите пожалуйста как создать горизонтальное меню в HTML? 0

@mamedovvms 2923 / 844 / 324 Регистрация: 30.04.2009 Сообщений: 2,633
	03.11.2009, 17:43
	можно создать таблицей 0

@kabl92 67 / 0 / 0 Регистрация: 24.09.2009 Сообщений: 80
	03.11.2009, 17:45 [ТС]
	можно создать таблицей. как? 0

@kabl92 67 / 0 / 0 Регистрация: 24.09.2009 Сообщений: 80
	03.11.2009, 17:59 [ТС]
	спасибо большое,сейчас буду пробывать! 0

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	03.11.2009, 20:13
	http://www.inetessentials.ru/lessons/menu.html 0

@kabl92 67 / 0 / 0 Регистрация: 24.09.2009 Сообщений: 80
	21.09.2010, 21:27 [ТС]
	Спасибо! 0

Как создать меню?

Решение