Форум 1С
Программистам, бухгалтерам, администраторам, пользователям
Задай вопрос - получи решение проблемы
22 ноя 2024, 09:46

HTML в 1С. Делаем "выпадающее" меню

Автор 1СNachalo, 13 апр 2018, 11:23

0 Пользователей и 1 гость просматривают эту тему.

Вниз Страницы1

1СNachalo

13 апр 2018, 11:23
Создавая в Блокноте - всё работает как планировалось (прилагаю html-код).



Переношу в 1С.

Между тегами <head><style> .............  </style></head> ставлю скопированный css-код:

---------------------------------------

|ul {    | display: block;    | margin: 0;    | padding: 0;    | list-style: none;|}|ul:after {  |  display: block;   | content: ' ';   | clear: both;    |float: none;|}|ul.menu > li {    |float: left;    |position: relative;|}|ul.menu > li > a {   | display: block;   | padding: 10px;    | color: white;    | background-color: red;     | text-decoration: none;| }| ul.menu > li > a:hover {   | background-color: black;| }| ul.submenu {   | display: none;    | position: absolute;    | width: 120px;    | top: 37px;    | left: 0;    | background-color: white;    | border: 1px solid red;| }| ul.submenu > li {    | display: block;| }| ul.submenu > li > a {   |  display: block;   |  padding: 10px;    | color: white;   |  background-color: red;    | text-decoration: none;| }| ul.submenu > li > a:hover {   |  text-decoration: underline;| }

| ul.menu > li:hover > ul.submenu {   |  display: block;| }                                 

---------------------------------------



Между тегами <body> .............  </body>  html-код:



----------------------------------------

HTMLТекст = HTMLТекст + "<ul class=""menu""> <li><a href=#>Menu 1</a><ul class=""submenu""><ul> <li><a href=#>Sudmenu 1bnvbvnbvnbvnbvnbvnbvnbvnbvnbvnbvnvnvnvnvbnvnbmbmnbmnbmnbmnbmnbnmbmnbnmbmbmbmbmbmbmbmbmbmbmbmbmbmnbmbmbmbmn</a></li> </ul>  </li> </ul>";

---------------------------------------



Не изменяла ничего, кроме 3 вещей в html-коде:

1) двойные кавычки вместо одинарных,

2) собрала в одну строку,

3) встроила в формулу  HTMLТекст = HTMLТекст + "...";

и одной вещи в css: перед каждой строкой поставила "|"





Но результат: при наведении на "Menu 1" не открывается поменю. Почему так? Что надо поправить?

AIFrame

#1
13 апр 2018, 20:17
Код Выделить
HTMLТекст = "<html>
|<head>
| <style>
| ul {
|     display: block;
|     margin: 0;
|     padding: 0;
|     list-style: none;
| }
| ul:after {
|     display: block;
|     content: ' ';
|     clear: both;
|     float: none;
| }
| ul.menu > li {
|     float: left;
|     position: relative;
| }
| ul.menu > li > a {
|     display: block;
|     padding: 10px;
|     color: white;
|     background-color: red;
|     text-decoration: none;
| }
| ul.menu > li > a:hover {
|     background-color: brown;
| }
| ul.submenu {
|     display: none;
|     position: absolute;
|     width: 120px;
|     top: 37px;
|     left: 0;
|     background-color: white;
|     border: 1px solid red;
| }
| ul.submenu > li {
|     display: block;
| }
| ul.submenu > li > a {
|     display: block;
|     padding: 10px;
|     color: white;
|     background-color: brown;
|     text-decoration: none;
| }
| ul.submenu > li > a:hover {
|     text-decoration: underline;
|     background-color: white;
|     color: black;
| }
|
|
| ul.menu > li:hover > ul.submenu {
|     display: block;
| }
| </style>
|</head>
|<body>
| <ul class='menu'>
| <li><a href=#>Menu 1</a>
| <ul class='submenu'>
| <li><a href=#>Submenu 1</a></li>
| <li><a href=#>Submenu 2</a></li>
| </ul>
| </li>
| <li><a href=#>Menu 2</a>
| <ul class='submenu'>
| <li><a href=#>Submenu 1</a></li>
| <li><a href=#>Submenu 2</a></li>
| </ul>
| </li>
| </ul>
|</body>
|</html>";

1СNachalo

#2
13 апр 2018, 20:48
Цитата: AIFrame от 13 апр 2018, 20:17
Код Выделить
HTMLТекст = "<html>
|<head>
| <style>
| ul {
|     display: block;
|     margin: 0;
|     padding: 0;
|     list-style: none;
| }
| ul:after {
|     display: block;
|     content: ' ';
|     clear: both;
|     float: none;
| }
| ul.menu > li {
|     float: left;
|     position: relative;
| }
| ul.menu > li > a {
|     display: block;
|     padding: 10px;
|     color: white;
|     background-color: red;
|     text-decoration: none;
| }
| ul.menu > li > a:hover {
|     background-color: brown;
| }
| ul.submenu {
|     display: none;
|     position: absolute;
|     width: 120px;
|     top: 37px;
|     left: 0;
|     background-color: white;
|     border: 1px solid red;
| }
| ul.submenu > li {
|     display: block;
| }
| ul.submenu > li > a {
|     display: block;
|     padding: 10px;
|     color: white;
|     background-color: brown;
|     text-decoration: none;
| }
| ul.submenu > li > a:hover {
|     text-decoration: underline;
|     background-color: white;
|     color: black;
| }
|
|
| ul.menu > li:hover > ul.submenu {
|     display: block;
| }
| </style>
|</head>
|<body>
| <ul class='menu'>
| <li><a href=#>Menu 1</a>
| <ul class='submenu'>
| <li><a href=#>Submenu 1</a></li>
| <li><a href=#>Submenu 2</a></li>
| </ul>
| </li>
| <li><a href=#>Menu 2</a>
| <ul class='submenu'>
| <li><a href=#>Submenu 1</a></li>
| <li><a href=#>Submenu 2</a></li>
| </ul>
| </li>
| </ul>
|</body>
|</html>";

Спасибо.
Подскажите, чем это отличается от моего варианта? И Вы попробовали, у Вас реально выдается подменю при наведении на Меню именно в 1С?
Загрузила Ваш код в 1Ску. Пока опять не работает.Всё, что видно, это уровень Меню (в этом случае "Menu 1"и ""Menu 2"). Субменю опять не появляются.
В принципе, как и было раньше.
У Вас это работает в 1С?

AIFrame

#3
15 апр 2018, 16:41
Цитата: 1СNachalo от 13 апр 2018, 20:48У Вас это работает в 1С?
Ага.
Цитата: 1СNachalo от 13 апр 2018, 20:48Загрузила Ваш код в 1Ску
Не увидел, что кусок старый или не оттуда копирнул.
Нужно ж мету и доктайп расписать
Код Выделить
HTMLТекст = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
|<html>
|<head>
| <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
| <style>
|        ul {
|            display: block;
|            margin: 0;
|            padding: 0;
|            list-style: none;
|        }
|        ul:after {
|            display: block;
|            content: ' ';
|            clear: both;
|            float: none;
|        }
|        ul.menu > li {
|            float: left;
|            position: relative;
|        }
|        ul.menu > li > a {
|            display: block;
|            padding: 10px;
|            color: white;
|            background-color: red;
|            text-decoration: none;
|        }
|        ul.menu > li > a:hover {
|            background-color: brown;
|        }
|        ul.submenu {
|            display: none;
|            position: absolute;
|            width: 120px;
|            top: 37px;
|            left: 0;
|            background-color: white;
|            border: 1px solid red;
|        }
|        ul.submenu > li {
|            display: block;
|        }
|        ul.submenu > li > a {
|            display: block;
|            padding: 10px;
|            color: white;
|            background-color: brown;
|            text-decoration: none;
|        }
|        ul.submenu > li > a:hover {
|            text-decoration: underline;
|            background-color: white;
|            color: black;
|        }
|       
|       
|        ul.menu > li:hover > ul.submenu {
|            display: block;
|        }
|    </style>
|</head>
|<body>
|    <ul class='menu'>
|        <li><a href=#>Menu 1</a>
|            <ul class='submenu'>
|                <li><a href=#>Submenu 1</a></li>
|                <li><a href=#>Submenu 2</a></li>
|            </ul>
|        </li>
|        <li><a href=#>Menu 2</a>
|            <ul class='submenu'>
|                <li><a href=#>Submenu 1</a></li>
|                <li><a href=#>Submenu 2</a></li>
|            </ul>
|        </li>
|    </ul>
|</body>
|</html>";
Даже проверил.


1СNachalo

#4
16 апр 2018, 22:16
Спасибо, буду пробовать. Результат на фото реально тот, кот.нужен)

Dethmontt

#5
17 апр 2018, 15:14
Все зависит от настроек IE
Если долго всматриваться в учебник...то в голову может прийти мысль его открыть!

AIFrame

#6
17 апр 2018, 17:52
Цитата: Dethmontt от 17 апр 2018, 15:14Все зависит от настроек IE
От каких?

1СNachalo

#7
30 мая 2018, 14:54
Цитата: AIFrame от 15 апр 2018, 16:41
Цитата: 1СNachalo от 13 апр 2018, 20:48У Вас это работает в 1С?
Ага.
Цитата: 1СNachalo от 13 апр 2018, 20:48Загрузила Ваш код в 1Ску
Не увидел, что кусок старый или не оттуда копирнул.
Нужно ж мету и доктайп расписать
Код Выделить
HTMLТекст = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
|<html>
|<head>
| <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
| <style>
|        ul {
|            display: block;
|            margin: 0;
|            padding: 0;
|            list-style: none;
|        }
|        ul:after {
|            display: block;
|            content: ' ';
|            clear: both;
|            float: none;
|        }
|        ul.menu > li {
|            float: left;
|            position: relative;
|        }
|        ul.menu > li > a {
|            display: block;
|            padding: 10px;
|            color: white;
|            background-color: red;
|            text-decoration: none;
|        }
|        ul.menu > li > a:hover {
|            background-color: brown;
|        }
|        ul.submenu {
|            display: none;
|            position: absolute;
|            width: 120px;
|            top: 37px;
|            left: 0;
|            background-color: white;
|            border: 1px solid red;
|        }
|        ul.submenu > li {
|            display: block;
|        }
|        ul.submenu > li > a {
|            display: block;
|            padding: 10px;
|            color: white;
|            background-color: brown;
|            text-decoration: none;
|        }
|        ul.submenu > li > a:hover {
|            text-decoration: underline;
|            background-color: white;
|            color: black;
|        }
|       
|       
|        ul.menu > li:hover > ul.submenu {
|            display: block;
|        }
|    </style>
|</head>
|<body>
|    <ul class='menu'>
|        <li><a href=#>Menu 1</a>
|            <ul class='submenu'>
|                <li><a href=#>Submenu 1</a></li>
|                <li><a href=#>Submenu 2</a></li>
|            </ul>
|        </li>
|        <li><a href=#>Menu 2</a>
|            <ul class='submenu'>
|                <li><a href=#>Submenu 1</a></li>
|                <li><a href=#>Submenu 2</a></li>
|            </ul>
|        </li>
|    </ul>
|</body>
|</html>";
Даже проверил.
Да, спасибо, классно, работает!
Вверх Страницы1
Теги: html CSS выпадающее меню меню выпадающее окно 

Похожие темы (4)

Рейтинг@Mail.ru

Поиск