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

@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> и обеспечив валидность, оказалось очень сложным и у меня не получилось, не смотря на множество попыток.

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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

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

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

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

Опции темы

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

Решение