Отменить свойство "overflow: hidden;" для дочерних элементов

@fuelcs · Регистрация: 23.01.2013

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

Добрый день.
Вот кусочек кода:

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
<nav>
    <div id = "m01" class = "menu_item">
        <div class = "hidden">
            <div class = "submenu">
                <div id = "m01" class = "menu_item">
                    <div class = "hidden">
                        <div class = "submenu">
                            <a href="#"><p>submenu item #1</p></a><hr>
                            <a href="#"><p>submenu item #2</p></a><hr>
                            <a href="#"><p>submenu item #8</p></a>
                        </div>
                    </div>
                    <a href="#">
                        <a href="#"><p>submenu item #1</p></a><hr>
                    </a>    
                </div>
                <a href="#"><p>submenu item #2</p></a><hr>
                <a href="#"><p>submenu item #8</p></a>
            </div>
        </div>
        <a href="#">
            <p>main menu item #1</p>
        </a>    
    </div>
</nav>

Стили:

CSS
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
*{
            margin: 0;
        }
        nav{
            width: 300px;
            position: relative;
            -webkit-user-select: none;
        }
        nav #m01 p{
            padding: 10px 50px;
            background: lightgreen;
        }
        nav #m02 p{
            padding: 10px 50px;
            background: lightblue;
        }
        nav #m03 p{
            padding: 10px 50px;
            background: lightgrey;
        }
        #m01 p:hover,#m02 p:hover,#m03 p:hover{
            background: white;
        }
        .hidden{
            position: absolute;
            left: 301px;
            width: 0px;
            overflow: hidden;
        }
        .submenu{
            position: absolute;
            right: 0px;
            width: 300px;
        }

Вопрос: можно ли сделать видимыми дочерние элементы, которые выходят за рамки элемента с overflow: hidden; Примечание: все элементы с position: absolute;

@rockpro · 22.11.2013, 16:51

Непонятно, что вы хотите сделать.
Скрываем то, что выходит за рамки блока, но хотим показать то, что выходит за рамки блока?

@fuelcs · 22.11.2013, 17:00 **[ТС]**

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

Непонятно, что вы хотите сделать.
Скрываем то, что выходит за рамки блока, но хотим показать то, что выходит за рамки блока?

хочу сделать выпадающее меню

выпадающее меню с горизонтальной анимацией...

Добавлено через 7 минут

HTML5
1
2
3
4
5
<div class = "hidden">
      <div class = "submenu">
             <div id = "m01" class = "menu_item">
                   <div class = "hidden">
                        <div class = "submenu">

hidden содержит оверфлов -> submenu пускай режит, а дальше menu_item что бы показывало и так далее до произвольной глубины

@rockpro · 22.11.2013, 22:18

Принципиально так делать меню?
Вообще, лучше через списки, накидал навскидку (без оверфлов и абсолютного позиционирования)

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
ul {list-style-type: none;}
 
#GeneralNav {
    width: 480px;
    height: 59px;
    //overflow: hidden;
    margin: 0 auto;
    }
 
#GeneralNav li{
    float:left;
    height: 39px;
    width: 160px;
    text-align: center;
    font-size: 18px;
    background: #c1c1c1;
    padding-top: 20px; 
    }
 
#GeneralNav li a {color: #494949; display: block; text-decoration: none;}   
#GeneralNav li:hover, #GeneralNav li.selected {background: #000;}   
#GeneralNav li:hover a, #GeneralNav li.selected a {color: #fff;}
 
#GeneralNav li ul{
    margin-top: 15px;
    display:none;
    height:auto;
    width:160px;
    background:#d6d4d4;
    }
#GeneralNav li:hover ul{display:block;}
#GeneralNav li li{width:100px;text-align:left;font-size:10px;color:#000000;padding:5px;height:auto;color:#000000;}
#GeneralNav li li:hover{background:#708090;}
#GeneralNav li li a{text-decoration:none;color:#000000;}
#GeneralNav li li a:hover{text-decoration:underline;}
</style>
<ul id="GeneralNav">
    <li><a href="#">Item 1</a>
        <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
            <li><a href="#">Item 2.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
        </ul>
    </li>
</ul>

@fuelcs · 23.11.2013, 00:02 **[ТС]**

rockpro, задание сделать вертикальное меню с горизонтальной анимацией (но это уже немного другой раздел форума)
Вот что у меня получилось:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src = "jquery-1.10.2.js"></script>
    <script type="text/javascript" src = "1.js"></script>
    <style type="text/css">
        *{
            margin: 0;
        }
        nav{
            width: 300px;
            position: relative;
            -webkit-user-select: none;
        }
        nav #m01 p{
            padding: 10px 50px;
            background: lightgreen;
        }
        nav #m02 p{
            padding: 10px 50px;
            background: lightblue;
        }
        nav #m03 p{
            padding: 10px 50px;
            background: lightgrey;
        }
        #m01 p:hover,#m02 p:hover,#m03 p:hover{
            background: white;
        }
        .hidden{
            position: absolute;
            left: 301px;
            width: 0px;
            overflow: hidden;
        }
        .submenu{
            position: absolute;
            right: 0px;
            width: 300px;
        }
    </style>
</head>
<body>
    <nav>
        <div id = "m01" class = "menu_item">
            <div class = "hidden">
                <div class = "submenu">
                    <a href="#"><p>submenu item #1</p></a><hr>
                    <a href="#"><p>submenu item #2</p></a><hr>
                    <a href="#"><p>submenu item #3</p></a><hr>
                    <a href="#"><p>submenu item #4</p></a><hr>
                    <a href="#"><p>submenu item #5</p></a><hr>
                    <a href="#"><p>submenu item #6</p></a><hr>
                    <a href="#"><p>submenu item #7</p></a><hr>
                    <a href="#"><p>submenu item #8</p></a>
                </div>
            </div>
            <a href="#">
                <p>main menu item #1</p>
            </a>    
        </div>
        <hr>
        <div id = "m02" class = "menu_item">
            <div class = "hidden">
                <div class = "submenu">
                    <a href="#"><p>submenu item #1</p></a><hr>
                    <a href="#"><p>submenu item #2</p></a><hr>
                    <a href="#"><p>submenu item #3</p></a><hr>
                    <a href="#"><p>submenu item #4</p></a><hr>
                    <a href="#"><p>submenu item #5</p></a><hr>
                    <a href="#"><p>submenu item #6</p></a><hr>
                    <a href="#"><p>submenu item #7</p></a><hr>
                    <a href="#"><p>submenu item #8</p></a>
                </div>
            </div>
            <a href="#">
                <p>main menu item #2</p>
            </a>    
        </div>
        <hr>
        <div id = "m03" class = "menu_item">
            <div class = "hidden">
                <div class = "submenu">
                    <a href="#"><p>submenu item #1</p></a><hr>
                    <a href="#"><p>submenu item #2</p></a><hr>
                    <a href="#"><p>submenu item #3</p></a><hr>
                    <a href="#"><p>submenu item #4</p></a><hr>
                    <a href="#"><p>submenu item #5</p></a><hr>
                    <a href="#"><p>submenu item #6</p></a><hr>
                    <a href="#"><p>submenu item #7</p></a><hr>
                    <a href="#"><p>submenu item #8</p></a>
                </div>
            </div>
            <a href="#">
                <p>main menu item #3</p>
            </a>    
        </div>
    </nav>
    <script type="text/javascript">
        one();
    </script>
 
</body>
</html>

и js:

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
function one(){
    $(".submenu").each( function (){
        var temp = $(this).css("height");
        $(this).parent().css("height", temp);
    });
 
    $(".menu_item").hover(function (){
        $(this).children(".hidden").stop(true, false);
        $(this).children(".hidden").animate({
            width: "300px"},
            500
        );
    });
 
    $(".menu_item").mouseleave(function (){
        $(this).children(".hidden").stop(true, false);
        $(this).children(".hidden").animate({
            width: "0px"},
            1000
        );
 
    });
 
    $(".menu_item").click(function (){
        $(".hidden").each( function (){
            $(this).stop(true, false);
            $(this).css("width", "0px");
 
        });
        $(this).children(".hidden").stop(true, true);
        $(this).children(".hidden").css("width", "300px");
    });
 
}

Тоесть каскадное меню, но не получается его делать "мультикасданым" (с множественными вложениями)...

Добавлено через 3 минуты
rockpro, хочу по структуре такое, только мне нужно с горизонтальной анимацией:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src = "jquery-1.10.2.js"></script>
    <script type="text/javascript" src = "1.js"></script>
    <style type="text/css">
        *{
            margin: 0;
        }
        nav{
            width: 300px;
            position: absolute;
        }
        nav p{
            padding: 10px 50px;
            background: lightblue;
        }
        nav p:hover{
            background: white;
        }
        .submenu{
            position: absolute;
            left: 301px;
            width: 300px;
            display: none;
            opacity: 0;
        }
    </style>
</head>
<body>
    <nav>
        <div class = "menu_item">
                <div class = "submenu">
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #1</p>
                        </a>    
                    </div>
                    <hr>
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #2</p>
                        </a>    
                    </div>
                    <hr>
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #3</p>
                        </a>    
                    </div>
                    <hr>
                </div>
            <a href="#">
                <p>menu item #1</p>
            </a>    
        </div>
        <hr>
        <div class = "menu_item">
                <div class = "submenu">
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #1</p>
                        </a>    
                    </div>
                    <hr>
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #2</p>
                        </a>    
                    </div>
                    <hr>
                    <div class = "menu_item">
                            <div class = "submenu">
                                <a href="#"><p>menu item #1</p></a><hr>
                                <a href="#"><p>menu item #2</p></a><hr>
                                <a href="#"><p>menu item #3</p></a><hr>
                            </div>
                        <a href="#">
                            <p>menu item #3</p>
                        </a>    
                    </div>
                    <hr>
                </div>
            <a href="#">
                <p>menu item #2</p>
            </a>    
        </div>
        <hr>
    </nav>
    <script type="text/javascript">
        one();
    </script>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function one(){
 
    $(".menu_item").hover(function (){
        $(this).children(".submenu").css("display", "block");
        $(this).children(".submenu").stop(true, false);
        $(this).children(".submenu").delay(200).animate({opacity: "1"},500);
    });
 
 
 
    $(".menu_item").mouseleave(function (){
        $(this).children(".submenu").stop(true, false);
        $(this).children(".submenu").animate({opacity: "0"}, 500, function (){$(this).css("display", "none")});
    });
}

Добавлено через 1 минуту
Вот к чему все замочки...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@rockpro 67 / 67 / 11 Регистрация: 20.11.2013 Сообщений: 282
	22.11.2013, 16:51
	Непонятно, что вы хотите сделать. Скрываем то, что выходит за рамки блока, но хотим показать то, что выходит за рамки блока? 0