Непонятное поведение меню

@vlad-55 · Регистрация: 21.02.2009

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

Нашел в сети меню, которое функционально устраивает, хотя это разработка 2012 года. Но есть два нюанса.

1. На экранах шире 767рх это горизонтальное верхнее меню, а на экранах уже 767рх это вертикальное меню. А нужно, чтобы оно на любом экране было вертикальным. Как я ни пытался этого добиться, ничего не получается! Хотя и в скрипте, и в CSS видна эта градация 767, при ее замене на любое число все равно переломной точкой остается 767. Как заколдованное!

2. При открытии меню контент уползает вниз. А нужно, чтобы он оставался на месте, а меню накладывалось бы сверху.

Как бы решить обе эти проблемы? Чтобы меню оставалось вертикальным на экране любой ширины и чтобы открывалось поверх контента?

(Макет расположен вод здесь: http://fh7929mi.bget.ru/maket/. Мне показалось, что это удобнее, чем приводить здесь все коды.)

@Balanaar · 11.02.2022, 20:53

Всё, что под @media нужно вынести наружу с перезаписью.
Ну и скрипт переделать.
script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var ww = document.body.clientWidth;
 
$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    
    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    
    $(".nav li a.parent").unbind('click').bind('click', function(e) {
        // Необходимоо привязать к элементу ссылки для предотвращения "всплывания"
        e.preventDefault();
        $(this).parent("li").toggleClass("hover");
    });
})

style.css

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
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
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  inline-block;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
     display: none;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
    display: block;
    width: 100%;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: none;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}
.nav li li .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
.nav > li.hover > ul , .nav li li.hover ul {
    position: static;
}

@vlad-55 · 11.02.2022, 21:10 **[ТС]**

Мистика! Все прекрасно работает! Большое спасибо!

Там используется довольно старая версия jquery-1.7.2.min.js. Сейчас уже есть jQuery 1.12.4, jQuery 2.2.4 и jQuery 3.3.1. Есть смысл заменить на одну из них? На какую?

@Balanaar · 11.02.2022, 21:14

vlad-55, 3.6.0 сейчас актуальная.
У вас могут быть проблемы при смене мажорной версии. Хотя при таком количестве кода, даже если проблемы будут, поправить будет не сложно.
А вообще в идеале рекомендую обходиться без JQ вообще, если есть такая возможность.

@vlad-55 · 11.02.2022, 21:25 **[ТС]**

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

А вообще в идеале рекомендую обходиться без JQ вообще

Сам об этом мечтаю! Но, к сожалению, всплывающие формы обычно требуют JQ...

Добавлено через 6 минут
Версия jquery-3.6.0.min.js заработала! Спасибо еще раз!

@vlad-55 · 27.02.2022, 15:31 **[ТС]**

Валидатор указывает данный код как не валидный, поскольку nav - это не обертка. Как ни удивительно, избавиться от этой проблемы, использовав <div> и обеспечив валидность, оказалось очень сложным и у меня не получилось, не смотря на множество попыток.

Как решить эту проблему?

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. 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. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,792

	Непонятное поведение меню 11.02.2022, 19:20. Показов 1095. Ответов 5 Метки нет (Все метки) Нашел в сети меню, которое функционально устраивает, хотя это разработка 2012 года. Но есть два нюанса. 1. На экранах шире 767рх это горизонтальное верхнее меню, а на экранах уже 767рх это вертикальное меню. А нужно, чтобы оно на любом экране было вертикальным. Как я ни пытался этого добиться, ничего не получается! Хотя и в скрипте, и в CSS видна эта градация 767, при ее замене на любое число все равно переломной точкой остается 767. Как заколдованное! 2. При открытии меню контент уползает вниз. А нужно, чтобы он оставался на месте, а меню накладывалось бы сверху. Как бы решить обе эти проблемы? Чтобы меню оставалось вертикальным на экране любой ширины и чтобы открывалось поверх контента? (Макет расположен вод здесь: http://fh7929mi.bget.ru/maket/. Мне показалось, что это удобнее, чем приводить здесь все коды.) 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,792
	11.02.2022, 21:10 [ТС]
	Мистика! Все прекрасно работает! Большое спасибо! Там используется довольно старая версия jquery-1.7.2.min.js. Сейчас уже есть jQuery 1.12.4, jQuery 2.2.4 и jQuery 3.3.1. Есть смысл заменить на одну из них? На какую? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	11.02.2022, 21:14
	vlad-55, 3.6.0 сейчас актуальная. У вас могут быть проблемы при смене мажорной версии. Хотя при таком количестве кода, даже если проблемы будут, поправить будет не сложно. А вообще в идеале рекомендую обходиться без JQ вообще, если есть такая возможность. 1

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,792
	27.02.2022, 15:31 [ТС]
	Валидатор указывает данный код как не валидный, поскольку nav - это не обертка. Как ни удивительно, избавиться от этой проблемы, использовав <div> и обеспечив валидность, оказалось очень сложным и у меня не получилось, не смотря на множество попыток. Как решить эту проблему? 0

Непонятное поведение меню

Решение