Вставка элементов меню (содержащих 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

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

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

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Сергей Ка 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