iframe поверх всего на странице

@meteor12 · Регистрация: 07.04.2018

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

Вставляю на html страницу через iframe полосу навигации по сайту. В этой полосе навигации есть выпадающие вниз меню.

<iframe width="100%" height="65" frameborder="0" src = "http://site.ru/navigation.html"></iframe>

Когда выбираю пункт меню где есть выпадающие меню, то появляется скролинг (полоса прокрутки фрейма) сбоку от фрейма. Сам выпадающий список на странице не виден, он внутри фрейма отображается.

Как сделать чтобы выпадающий список меню навигации выпадал не внутрь фрейма, а поверх страницы на которую вставлен фрейм?

Вот меню навигации

<nav>
<ul>
<li><a href="#">пункт1</a>

<ul>
<li><a href="#">подпункт1</a></li>
<li><a href="#">подпункт2</a></li>
</ul>
</li>
<li><a href="#">пункт2</a>

<ul>
<li><a href="#">подпункт1</a></li>
<li><a href="#">подпункт2</a></li>
<li><a href="#">подпункт3</a></li>
</ul>
</li>
<li><a href="#">пункт3</a>

<ul>
<li><a href="#">подпункт1</a></li>
</ul>
</li>
</ul>
</nav>

Вот CSS

/* задаем цвет фона для контейнера nav. */
nav {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
background-color: #9C9A9A;
}

/* убираем отступы и поля, а также list-style для "ul",
* и добавляем "position:relative" */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}

/* применяем inline-block позиционирование к элементам навигации */
nav ul li {
margin: 0px -4px 0 0;
display:inline-block;
background-color: #9C9A9A;
}

/* стилизуем ссылки */
nav a {
display: block;
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 0;
color: #FFF;
font-size: 18px;
line-height: 40px;
text-decoration: none;
}

/* изменяем цвет фона при наведении курсора */
nav a:hover {
background-color: #000000;
}

/* скрываем выпадающие списки по умолчанию
* и задаем абсолютное позиционирование */
nav ul ul {
display: none;
position: absolute;
top: 100%;
}

/* отображаем выпадающий список при наведении */
nav ul li:hover > ul {
display: list-item;
}

/* первый уровень выпадающего списка */
nav ul ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
background-color: #494747;
}

@esculap_ra · 15.11.2019, 19:26

Использование фрейма для этой цели - не лучший вариант. В нем совершенно другая страница, поэтому список не может выпадать на основную страницу.

@meteor12 · 15.11.2019, 20:33 **[ТС]**

esculap_ra, Что можно использовать для этой цели?
Так чтобы вставить содержимое одной html страницы (панель навигации с выпадающим вниз меню) на другую html страницу?

Php, java или что-нибудь другое?

Можно сделать все по старинке - обойтись без iframe, вставить код панели навигации на каждую страницу сайта и все будет хорошо отображаться. Но при этом если нужно будет что-либо изменить в панели навигации придется вносить изменения в каждую страницу сайта. Это сделать не быстро.

@esculap_ra · 15.11.2019, 21:59

Вот примерно так, как я делал мануал для своего антихакера под опенкарт (админчать).

Есть узел где будет инициализован редактор.

HTML5
1
2
3
4
    <div style="width:70%;float:right;padding:20px">
    <textarea id="editor" class="mce_editable" style="width:700px;" rows="20">{$topic}</textarea>
  </div>
  </div>

Дальше подключается скрипт (вообще-то сюда включается файл)

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
36
37
38
39
40
41
42
43
44
45
46
  <script type="text/javascript">
   $(document).ready(function()
   {
      return tinyMCE.init(
     {
       editor_selector : "mce_editable",
       mode:"specific_textareas",
       theme:"modern"
     }
     );
   }
   );
 
 function getInfo(id)
   {
     $('#progressbar').toggleClass('off on');
     var url=// какой-то урл контроллера
     $.ajax(
     {
       url : url,
       type:"post",
       dataType:"json",
       data :
       {
         controller:"manual",
         topic: id
       }
       ,
       success: function (data)
       {
           if(data.status!='Error')
         {
           $('#progressbar').toggleClass('on off');
           tinyMCE.activeEditor.setContent("");
           tinyMCE.execCommand('mceInsertContent',false,data.result);
         }
           else
         {
           $('#progressbar').addClass('red');
           $('#progressbar').html('<center>'+jtext('OSE_'+data.status)+data.result+'</center>');
         }
       }
     }
     );
   }
   </script>

Где-нибудь в конце страницы html можно добавить

JavaScript
1
2
3
4
5
6
<script type="text/javascript">
   $(document).ready(function()
   {
getInf();
}
</script>

Ну это в качестве примера. То есть после загрузки документа идет посылка на контроллер, а тот возвращает html-код, но без <html> и <body>
Этот код размещается в моем случае в редакторе, а ты можешь сделать специальный див.
Необходимо учесть, что все стили и файлы скриптов должны подключаться на главной странице.

@meteor12 · 15.11.2019, 22:07 **[ТС]**

esculap_ra, Спасибо. Попробую использовать этот вариант. Потом сообщу как все прошло.

Все три части кода в один файл html помещать?

Вот в этой части: "var url=// какой-то урл контроллера" - тут указать url адрес файла с панелью навигации который я пытался через фрейм вставить?

@esculap_ra · 15.11.2019, 22:38

1. Код javascript можно подключить в виде файла, как обычно, только убрать первый и последний тэги. Этот файл должен подключаться после jquery
2. url в принципе да, только нужно изменить в скрипте dataType:"json" на dataType:"html"

3. Оставляем только функцию

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 function getInfo()
   {
     var url=// нужный урл, например, nav.php
     $.ajax(
     {
       url : url,
       type:"get",
       dataType:"html",
       data :
       {
// у нас нет данных на отправку
       }
       ,
       success: function (data)
       {
 $('#navbar').html(data);
       }
     }
     );
   }

4. В нужном месте главной страницы вставим

HTML5
1
<div id="navbar"></div>

Вот примерно так.

Новые блоги и статьи Все статьи Все блоги /
Программный отбор элементов справочника Номенклатура по группе 1С Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор под наименованию группы (на. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор элементов справочника Сотрудники по перечислениям 1С Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .

@meteor12 84 / 2 / 1 Регистрация: 07.04.2018 Сообщений: 255

	iframe поверх всего на странице 15.11.2019, 18:51. Показов 3686. Ответов 5 Метки нет (Все метки) Вставляю на html страницу через iframe полосу навигации по сайту. В этой полосе навигации есть выпадающие вниз меню. <iframe width="100%" height="65" frameborder="0" src = "http://site.ru/navigation.html"></iframe> Когда выбираю пункт меню где есть выпадающие меню, то появляется скролинг (полоса прокрутки фрейма) сбоку от фрейма. Сам выпадающий список на странице не виден, он внутри фрейма отображается. Как сделать чтобы выпадающий список меню навигации выпадал не внутрь фрейма, а поверх страницы на которую вставлен фрейм? Вот меню навигации <nav> <ul> <li><a href="#">пункт1</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">подпункт1</a></li> <li><a href="#">подпункт2</a></li> </ul> </li> <li><a href="#">пункт2</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">подпункт1</a></li> <li><a href="#">подпункт2</a></li> <li><a href="#">подпункт3</a></li> </ul> </li> <li><a href="#">пункт3</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">подпункт1</a></li> </ul> </li> </ul> </nav> Вот CSS /* задаем цвет фона для контейнера nav. / nav { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; background-color: #9C9A9A; } / убираем отступы и поля, а также list-style для "ul", * и добавляем "position:relative" / nav ul { padding:0; margin:0; list-style: none; position: relative; } / применяем inline-block позиционирование к элементам навигации / nav ul li { margin: 0px -4px 0 0; display:inline-block; background-color: #9C9A9A; } / стилизуем ссылки / nav a { display: block; padding-top: 0; padding-right: 20px; padding-left: 20px; padding-bottom: 0; color: #FFF; font-size: 18px; line-height: 40px; text-decoration: none; } / изменяем цвет фона при наведении курсора / nav a:hover { background-color: #000000; } / скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование / nav ul ul { display: none; position: absolute; top: 100%; } / отображаем выпадающий список при наведении / nav ul li:hover > ul { display: list-item; } / первый уровень выпадающего списка */ nav ul ul li { min-width: 170px; float: none; display: list-item; position: relative; background-color: #494747; } 0

@esculap_ra 462 / 265 / 55 Регистрация: 22.08.2010 Сообщений: 1,204 Записей в блоге: 4
	15.11.2019, 19:26
	Использование фрейма для этой цели - не лучший вариант. В нем совершенно другая страница, поэтому список не может выпадать на основную страницу. 1

@meteor12 84 / 2 / 1 Регистрация: 07.04.2018 Сообщений: 255
	15.11.2019, 20:33 [ТС]
	esculap_ra, Что можно использовать для этой цели? Так чтобы вставить содержимое одной html страницы (панель навигации с выпадающим вниз меню) на другую html страницу? Php, java или что-нибудь другое? Можно сделать все по старинке - обойтись без iframe, вставить код панели навигации на каждую страницу сайта и все будет хорошо отображаться. Но при этом если нужно будет что-либо изменить в панели навигации придется вносить изменения в каждую страницу сайта. Это сделать не быстро. 0

@meteor12 84 / 2 / 1 Регистрация: 07.04.2018 Сообщений: 255
	15.11.2019, 22:07 [ТС]
	esculap_ra, Спасибо. Попробую использовать этот вариант. Потом сообщу как все прошло. Все три части кода в один файл html помещать? Вот в этой части: "var url=// какой-то урл контроллера" - тут указать url адрес файла с панелью навигации который я пытался через фрейм вставить? 0