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

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

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

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

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