Вставка элементов меню (содержащих javascript) через javascript

@G-Cat · Регистрация: 15.03.2009

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

Пишу курсовой проект по JavaScript в ходе которого потребовалось создать небольшой локальный сайт, страничек довольно много и я решил, при помощи javascript, отделить меню и всё оформление в отдельный файл и просто подключать его к каждой странице (так покомпактнее, как мне кажется, выглядит всё, да и изменять проще).

Собственно вот часть когда, по которой мне необходима Ваша помощь, дорогие формучане:

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
<html>
  <head>
    <title>Справочное руководство по СУБД "MS ACCESS"</title>
 
    <meta http-equiv="Content-Language" content="ru">
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8">
 
    <link rel="stylesheet" type="text/css"  href="css/main.css">
    <link rel="stylesheet" type="text/css"  href="css/headline.css"> 
    <link rel="stylesheet" type="text/css"  href="css/menu_bar.css">
    <link rel="stylesheet" type="text/css"  href="css/content.css">  
    
    <script type="text/javascript" src="javascript/menu.js">
    </script>
  </head>
 
  <body>
  <div align="center">
    <!--шапка сайта-->
    ...
    
    <!--меню сайта-->
    <script type="text/javascript" src="javascript/appearance/menu_bar.js">
    </script>
    
    <!--меню сайта-->
    ...
  </body>
</html>

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
32
33
34
35
document.write("    <div class=\"menu\">");
document.write(" ");
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Оглавление");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"010100.html\"><div class=\"subitem\" title=\"Базы и Банки данных в вычислительных системах\">Базы и Банки данных</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#12\"><div class=\"subitem\" title=\"Знакомство с языком SQL\">SQL</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#13\"><div class=\"subitem\" title=\"Основы работы в СУБД MS Access\">MS Access</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");   
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Тесты");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#21\"><div class=\"subitem\" title=\"Первая глава учебника\">на знание Теории</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write("        
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          О проекте");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#31\"><div class=\"subitem\" title=\"Первая глава учебника\">Разработчики</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#32\"><div class=\"subitem\" title=\"Первая глава учебника\">Автор методички</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#33\"><div class=\"subitem\" title=\"Вторая глава учебника\">Контакты</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");
document.write("      <div class=\"footer_menu\"></div>");
document.write("    </div>");

Собственно проблема в том что данный элемент (menu_bar) не отображается. Я понимаю что реализовано у меня всё это довольно топорно, поэтому и пишу Вам.
Подскажите, пожалуйста, как можно:

1) заставить этот код работать
2) реализовать проще выпадающие списки меню (желательно многоуровневые)
3) есть ли другие механизмы вставки повторяющихся элементов страницы (SSI не предлагать)?

Заране благодарю за игнор\ответ\...мат в ответ.

@Сергей Ка · 13.12.2010, 17:29

ошибки при выполнении javascript есть?

@Артем Д. · 13.12.2010, 17:34

Сообщение от G-Cat

Пишу курсовой проект по JavaScript в ходе которого потребовалось создать небольшой локальный сайт, страничек довольно много и я решил, при помощи javascript, отделить меню и всё оформление в отдельный файл и просто подключать его к каждой странице (так покомпактнее, как мне кажется, выглядит всё, да и изменять проще).

Собственно вот часть когда, по которой мне необходима Ваша помощь, дорогие формучане:

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
<html>
  <head>
    <title>Справочное руководство по СУБД "MS ACCESS"</title>
 
    <meta http-equiv="Content-Language" content="ru">
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8">
 
    <link rel="stylesheet" type="text/css"  href="css/main.css">
    <link rel="stylesheet" type="text/css"  href="css/headline.css"> 
    <link rel="stylesheet" type="text/css"  href="css/menu_bar.css">
    <link rel="stylesheet" type="text/css"  href="css/content.css">  
    
    <script type="text/javascript" src="javascript/menu.js">
    </script>
  </head>
 
  <body>
  <div align="center">
    <!--шапка сайта-->
    ...
    
    <!--меню сайта-->
    <script type="text/javascript" src="javascript/appearance/menu_bar.js">
    </script>
    
    <!--меню сайта-->
    ...
  </body>
</html>

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
32
33
34
35
document.write("    <div class=\"menu\">");
document.write(" ");
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Оглавление");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"010100.html\"><div class=\"subitem\" title=\"Базы и Банки данных в вычислительных системах\">Базы и Банки данных</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#12\"><div class=\"subitem\" title=\"Знакомство с языком SQL\">SQL</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#13\"><div class=\"subitem\" title=\"Основы работы в СУБД MS Access\">MS Access</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");   
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Тесты");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#21\"><div class=\"subitem\" title=\"Первая глава учебника\">на знание Теории</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write("        
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          О проекте");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#31\"><div class=\"subitem\" title=\"Первая глава учебника\">Разработчики</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#32\"><div class=\"subitem\" title=\"Первая глава учебника\">Автор методички</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#33\"><div class=\"subitem\" title=\"Вторая глава учебника\">Контакты</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");
document.write("      <div class=\"footer_menu\"></div>");
document.write("    </div>");

Собственно проблема в том что данный элемент (menu_bar) не отображается. Я понимаю что реализовано у меня всё это довольно топорно, поэтому и пишу Вам.
Подскажите, пожалуйста, как можно:

1) заставить этот код работать
2) реализовать проще выпадающие списки меню (желательно многоуровневые)
3) есть ли другие механизмы вставки повторяющихся элементов страницы (SSI не предлагать)?

Заране благодарю за игнор\ответ\...мат в ответ.

Смотри 21-ую строку...

@Crudelis · 13.12.2010, 17:44

зачем так много документ врайтов, если можно всё запихачить в один и как писали выше, сторка 21, но ошибка в 22й строке, кавычка со скобкой открыта а закрытия нет, пример как пихать все в один врайт:

JavaScript
1
2
3
document.write("    <div class=\"menu\">"+
                      "<div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">"+
                      "Оглавление");

либо так :

JavaScript
1
2
3
document.write("    <div class=\"menu\">
                      <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">
                      Оглавление");

@Артем Д. · 13.12.2010, 17:47

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

зачем так много документ врайтов, если можно всё запихачить в один и как писали выше, сторка 21, но ошибка в 22й строке, кавычка со скобкой открыта а закрытия нет, пример как пихать все в один врайт:

JavaScript
1
2
3
document.write("    <div class=\"menu\">"+
                      "<div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">"+
                      "Оглавление");

либо так :

JavaScript
1
2
3
document.write("    <div class=\"menu\">
                      <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">
                      Оглавление");

А, ну да, в 22, там просто не понятно немного со строками. =)
И кстати, document.write должен быть в одну строку.

@G-Cat · 13.12.2010, 17:55 **[ТС]**

во я лох!
спасибо огромное за подсказку насчёт 21 строки! чёт совсем глаз замылился, незаметил...

да, я сейчас наверное под один document.write(); всё и переделаю.

вот вопрос ещё, я когда юзаю:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">
у меня этот элемент (menu_bar) становится на всю ширину страницы, хотя в свойствах чётко прописан width=800 в CSS у класса menu (этот класс имеет главный div, в котором все остальные элементы menu_bar). Почему так?

@Артем Д. · 13.12.2010, 18:09

Сообщение от G-Cat

во я лох!
спасибо огромное за подсказку насчёт 21 строки! чёт совсем глаз замылился, незаметил...

да, я сейчас наверное под один document.write(); всё и переделаю.

вот вопрос ещё, я когда юзаю:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">
у меня этот элемент (menu_bar) становится на всю ширину страницы, хотя в свойствах чётко прописан width=800 в CSS у класса menu (этот класс имеет главный div, в котором все остальные элементы menu_bar). Почему так?

Насчет "под один document.write(); всё и переделаю." - нельзя document.write(); разбивать на несколько строк. Один document.write(); - одна строка. Иначе не будет работать, на сколько я помню.
А на счет ширины страницы - надо смотреть саму страницу, есть ссылка?

@G-Cat · 13.12.2010, 18:23 **[ТС]**

да, вот:
http://dl.dropbox.com/u/106354... index.html

@Crudelis · 13.12.2010, 18:23

попробуйте юзануть это

HTML5
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

@Артем Д. · 13.12.2010, 18:32

Сообщение от G-Cat

да, вот:
http://dl.dropbox.com/u/106354... index.html

В стилях у .menu {} пропиши width: ... и будет тебе счастье =)

@G-Cat · 13.12.2010, 19:15 **[ТС]**

2 Crudelis:
это то понятно, я не пойму почему именно при строгом html мой код не работает

2 Артем Д.:
и так стоит

@Артем Д. · 13.12.2010, 19:21

Сообщение от G-Cat

2 Crudelis:
это то понятно, я не пойму почему именно при строгом html мой код не работает

2 Артем Д.:
и так стоит

я сейчас смотрю, нету там в .menu{width:..;}
Вот как у тебя:

CSS
1
2
3
4
5
6
7
.menu {
    background-color: #FFA500;
    color: #8B0000;
    font-family: serif;
    font-size: 90%;
    font-style: normal;
}

Где там width: ... ; ? =)
Добавь: width: 800px;

@G-Cat · 13.12.2010, 19:46 **[ТС]**

2 Артем Д.:
вот класс menu:

CSS
1
2
3
4
5
6
7
8
.menu {
  width: 800;
  background-color: #FFA500;
    color: #8B0000;
    font-style: normal;
    font-family: serif;
    font-size: 90%;
}

всё там стоит, это единственный такой класс и я ничего не добавлял...
Артём, ты через что просматриваешь код?

@Артем Д. · 13.12.2010, 19:49

Сообщение от G-Cat

2 Артем Д.:
вот класс menu:

CSS
1
2
3
4
5
6
7
8
.menu {
  width: 800;
  background-color: #FFA500;
    color: #8B0000;
    font-style: normal;
    font-family: serif;
    font-size: 90%;
}

всё там стоит, это единственный такой класс и я ничего не добавлял...
Артём, ты через что просматриваешь код?

Эх.. измени width: 800; на width: 800px; и всетаки будет тебе счастье. =)

@G-Cat · 13.12.2010, 20:06 **[ТС]**

Спасибо Артём, я уж даже сам заметил)

Добавлено через 7 минут
У меня ещё вопрос:

Вот я ставлю опять строгий html и выдвигающийся список подменю неплотно подходит к menu_bar. Как можно это исправить?

@Артем Д. · 13.12.2010, 20:35

Сообщение от G-Cat

Спасибо Артём, я уж даже сам заметил)

Добавлено через 7 минут
У меня ещё вопрос:

Вот я ставлю опять строгий html и выдвигающийся список подменю неплотно подходит к menu_bar. Как можно это исправить?

div.list_items {
...
top: 21px; - измени на это
...
}

@G-Cat · 13.12.2010, 20:44 **[ТС]**

Ещё раз спасибо огромное, Артём!
Выручил прям, благодарю.

@Артем Д. · 13.12.2010, 20:53

Сообщение от G-Cat

Ещё раз спасибо огромное, Артём!
Выручил прям, благодарю.

Ага, обращайся еще, если что =)

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Сергей Ка 55 / 55 / 8 Регистрация: 12.12.2010 Сообщений: 204
	13.12.2010, 17:29
	ошибки при выполнении javascript есть? 0

@G-Cat 16 / 16 / 1 Регистрация: 15.03.2009 Сообщений: 94
	13.12.2010, 17:55 [ТС]
	во я лох! спасибо огромное за подсказку насчёт 21 строки! чёт совсем глаз замылился, незаметил... да, я сейчас наверное под один document.write(); всё и переделаю. вот вопрос ещё, я когда юзаю: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN"> у меня этот элемент (menu_bar) становится на всю ширину страницы, хотя в свойствах чётко прописан width=800 в CSS у класса menu (этот класс имеет главный div, в котором все остальные элементы menu_bar). Почему так? 0

@G-Cat 16 / 16 / 1 Регистрация: 15.03.2009 Сообщений: 94
	13.12.2010, 18:23 [ТС]
	да, вот: http://dl.dropbox.com/u/106354... index.html 0

@G-Cat 16 / 16 / 1 Регистрация: 15.03.2009 Сообщений: 94
	13.12.2010, 19:15 [ТС]
	2 Crudelis: это то понятно, я не пойму почему именно при строгом html мой код не работает 2 Артем Д.: и так стоит 0

@G-Cat 16 / 16 / 1 Регистрация: 15.03.2009 Сообщений: 94
	13.12.2010, 20:06 [ТС]
	Спасибо Артём, я уж даже сам заметил) Добавлено через 7 минут У меня ещё вопрос: Вот я ставлю опять строгий html и выдвигающийся список подменю неплотно подходит к menu_bar. Как можно это исправить? 0

@G-Cat 16 / 16 / 1 Регистрация: 15.03.2009 Сообщений: 94
	13.12.2010, 20:44 [ТС]
	Ещё раз спасибо огромное, Артём! Выручил прям, благодарю. 0