Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.61/103: Рейтинг темы: голосов - 103, средняя оценка - 4.61
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7

Как сделать так, чтобы после нажатия на пункт меню страница прокручивалась до якоря и меню закрывалось?

23.07.2018, 13:38. Показов 21335. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет всем, у меня есть html код страницы со вставками javascript кода.
Имеется два javascripta, один отвечает за прокрутку страницы к якорю, а другой отвечает за открытие и закрытие меню сбоку (слева).

Проблема состоит в следующем:
Это меню открывается нажатием на "гамбургер" и зарывается на крестик(в который превращается гамбургер).

Мне надо сделать так, что бы после нажатия на определенный пункт меню, страница прокручивалась до якоря и меню после нажатия на пункт меню само закрывалось. А так же если пользователь передумал нажимать на пункт меню, он нажал на оверлей, который немного затемняет страницу и меню так же само закрывалось.

Я просто не понимаю как написать скрипт так что бы это все вместе работало!

Помогите пожалуйста, буду очень признателен Вам за это!
Вложения
Тип файла: rar index - копия.rar (5.8 Кб, 9 просмотров)
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
23.07.2018, 13:38
Ответы с готовыми решениями:

Как сделать так, чтобы выпадающее меню в Проводнике отображалась постоянно, а не закрывалось после нажатия?
Приветствую форумчане! В окнах windows (любой) в каждом практически окне есть строка меню (файл, вид...). Нажимаешь на любую кнопку на...

MenuStrip. Как сделать что бы после клика по пункту меню, меню не закрывалось
Здравствуйте. В MenuStrip необходимо несколько items отметить checked, то есть поставить галочки на нескольких пунктах меню. Но после...

Сделать, чтобы меню не закрывалось после выбора пункта
Как сделать так, чтобы меню не закрывалось после выбора пункта, а то так получается только массив заполнить Вот код: from random import...

8
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
23.07.2018, 13:50  [ТС]
Прошу прощения, что-то файл не корректно отображается, вот новый в нем все нормально
Вложения
Тип файла: rar index - копия.rar (6.4 Кб, 11 просмотров)
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
23.07.2018, 14:37  [ТС]
Помогите пожалуйста, только не ссылками на форум, потому что я уже все ссылки облазил!
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
24.07.2018, 13:01  [ТС]
есть скрипт открытия и закрытия меню выезжающего слева
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
<script>
$(document).ready(function () {
 var trigger = $('.hamburger'),
 overlay = $('.overlay'),
 isClosed = false;
 
 trigger.click(function () {
 hamburger_cross(); 
 });
 
 function hamburger_cross() {
 
 if (isClosed == true) { 
 overlay.hide();
 trigger.removeClass('is-open');
 trigger.addClass('is-closed');
 isClosed = false;
 } else { 
 overlay.show();
 trigger.removeClass('is-closed');
 trigger.addClass('is-open');
 isClosed = true;
 }
 }
 $('[data-toggle="offcanvas"]').click(function () {
 $('#wrapper').toggleClass('toggled');
 }); 
});
</script>
я хочу написать что бы при нажатии на ссылку, меню автоматически закрывалось
вот как я написал код (не рабочий),
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  $(document).ready(function(){
$("a[href*=#]").on("click", function() {
var trigger = $('.hamburger'),
 overlay1 = $('.overlay'),
 
 overlay.hide();
 trigger.removeClass('is-open');
 trigger.addClass('is-closed');
 isClosed1 = false;
 }
 
});
 $('[data-toggle="offcanvas"]').click(function () {
 $('#wrapper').toggleClass('toggled');
});
</script>
вообще не знаю как написать его, ни в какую не хочет работать, попробуйте может быть у вас получится?

вот 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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
body {
 position: relative;
 overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}
/* Wrappers */
#wrapper {
 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
#wrapper.toggled {
 padding-left: 220px;
}
#sidebar-wrapper {
 z-index: 1000;
 left: 220px;
 width: 0;
 height: 100%;
 margin-left: -240px;
 overflow-y: auto;
 overflow-x: hidden;
 background: #1a1a1a;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
 display: none;
}
#wrapper.toggled #sidebar-wrapper {
 width: 220px;
}
#page-content-wrapper {
 width: 100%;
 padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
 position: absolute;
 margin-right: -220px;
}
/* Sidebar nav styles */
.sidebar-nav {
  font-family: 'Montserrat', sans-serif;
 position: absolute;
 top: 0;
 width: 230px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.sidebar-nav li {
 position: relative; 
 line-height: 20px;
 display: inline-block;
 width: 100%;
}
.sidebar-nav li:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 height: 100%;
 width: 3px;
 background-color: #1c1c1c;
 -webkit-transition: width .2s ease-in;
 -moz-transition: width .2s ease-in;
 -ms-transition: width .2s ease-in;
 transition: width .2s ease-in;
 
}
.sidebar-nav li:first-child a {
 color: #fff;
 background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
 background-color: #ec1b5a; 
}
.sidebar-nav li:nth-child(3):before {
 background-color: #79aefe; 
}
.sidebar-nav li:nth-child(4):before {
 background-color: #314190; 
}
.sidebar-nav li:nth-child(5):before {
 background-color: #279636; 
}
.sidebar-nav li:nth-child(6):before {
 background-color: #7d5d81; 
}
.sidebar-nav li:nth-child(7):before {
 background-color: #ead24c; 
}
.sidebar-nav li:nth-child(8):before {
 background-color: #2d2366; 
}
.sidebar-nav li:nth-child(9):before {
 background-color: #35acdf; 
}
.sidebar-nav li:nth-child(10):before {
 background-color: #279636; 
}
.sidebar-nav li:nth-child(11):before {
 background-color: #7d5d81; 
}
.sidebar-nav li:nth-child(12):before {
 background-color: #279636; 
}
.sidebar-nav li:nth-child(13):before {
 background-color: #79aefe; 
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
 width: 100%;
 -webkit-transition: width .2s ease-in;
 -moz-transition: width .2s ease-in;
 -ms-transition: width .2s ease-in;
 transition: width .2s ease-in;
 
}
.sidebar-nav li a {
 display: block;
 color: #ddd;
 text-decoration: none;
 padding: 10px 15px 10px 30px; 
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
 color: #fff;
 text-decoration: none;
 background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
 height: 70px;
 font-size: 11px;
 line-height: 44px;
 font-family:  TransgenderGrotesque-Book;
}
.sidebar-nav .dropdown-menu {
 position: relative;
 width: 100%;
 padding: 0;
 margin: 0;
 border-radius: 0;
 border: none;
 background-color: #222;
 box-shadow: none;
}
/* Hamburger-Cross */
.hamburger {
 position: fixed;
 top: 20px; 
 z-index: 999;
 display: block;
 width: 32px;
 height: 32px;
 margin-left: 15px;
 background: transparent;
 border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
 outline: none;
}
.hamburger.is-closed:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #696969;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
 position: absolute;
 left: 0;
 height: 4px;
 width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
 background-color: #696969;
}
.hamburger.is-closed .hamb-top { 
 top: 5px; 
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
 top: 50%;
 margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
 bottom: 5px; 
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
 top: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
 bottom: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
 background-color: #696969;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
 top: 50%;
 margin-top: -2px; 
}
.hamburger.is-open .hamb-top { 
 -webkit-transform: rotate(45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
 -webkit-transform: rotate(-45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #696969;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0,0,0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px,0,0);
 -webkit-transition: all .35s ease-in-out;
}
/* Overlay */
.overlay {
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(87, 87, 87,.4);
 z-index: 1;
}
Знающие люди, помогите!

Добавлено через 16 минут
ну и само меню html
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
 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="general.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/boot
<div id="wrapper">
 <div class="overlay"></div>
 
 <!-- Sidebar -->
 <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
 <ul class="nav sidebar-nav">
 <li class="sidebar-brand">
   <a href="#start">
 ЛЕНПОЛИГРАФМАШ
 </a>
 </li>
 <li>
 <a href="#text"><b>Описание</b></a>
 </li>
 <li>
 <a href="#rasp"><b>Расположение</b></a>
 </li>
 <li>
 <a href="#zona"><b>Зонирование</b></a>
 </li>
 <li>
 <a href="#kowork"><b>Коворкинг</b></a>
 </li>
  <li>
 <a href="#futur"><b>Корпус футурист</b></a>
 </li>
 <li><a href="#flore1"><b>1 этаж</b></a></li>
 <li><a href="#flore2"><b>2 этаж</b></a></li>
 <li><a href="#flore3"><b>3 этаж</b></a></li>
 <li><a href="#remont"><b>Ремонт</b></a></li>
 <li><a href="#uslov"><b>Условия</b></a></li>
 <li><a href="#FabLab"><b>FabLab</b></a></li>
 <li>
 <a href="#contacts"><b>Контакты</b></a>
 </li>
 </ul>
 </nav>
 
 
<script src="js/bootstrap.js"></script>
</body>
</html>
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
24.07.2018, 13:09
а че просто функцию не вызовешь? так пробовал?
JavaScript
1
2
3
$("a[href*=#]").on("click", function() {
   hamburger_cross();
});
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
24.07.2018, 13:19  [ТС]
Цитата Сообщение от Уф Посмотреть сообщение
а че просто функцию не вызовешь? так пробовал?
JavaScript
1
2
3
$("a[href*=#]").on("click", function() {
   hamburger_cross();
});
Так я пробовал, перестает работать другой скрипт, скрипт прокрутки страницы при нажатии на ссылку(якорь)
вот код этого скрипта который отвечает за прокрутку страницы
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        e.preventDefault();
        return false;
    });
});
</script>
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
24.07.2018, 17:54
ну да, ты же два действия на одно событие хочешь приделать, а че туда нельзя вписать?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        hamburger_cross();
        e.preventDefault();
        return false;
    });
});
</script>
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
25.07.2018, 09:36  [ТС]
Цитата Сообщение от Уф Посмотреть сообщение
ну да, ты же два действия на одно событие хочешь приделать, а че туда нельзя вписать?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        hamburger_cross();
        e.preventDefault();
        return false;
    });
});
</script>
Так тоже не работает, скрипт прокручивания страницы до якоря работает, а скрипт закрытия меню не работает!

Тема еще является актуальной!
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
26.07.2018, 10:58  [ТС]
Все, всем "спасибо" сам решил проблему.

Не так то уж и сложно оказалось!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        trigger1 = $('.hamburger'),
 overlay1 = $('.overlay'),
 wrapper = $('#wrapper');
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        e.preventDefault();
         trigger1.removeClass('is-open');
 trigger1.addClass('is-closed');
  wrapper.removeClass('toggled');
  overlay1.hide();
        return false;
    });
});
</script>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.07.2018, 10:58
Помогаю со студенческими работами здесь

Разделить меню так, чтобы каждый пункт меню был немного отдален друг от друга
Здравствуйте, на сайте есть меню: Мне нужно разделить его. Чтобы каждый пункт меню был немного отдален друг от друга. Как это...

Как сделать так, чтобы на экране была страница сайта без панели задач и без меню браузера?
Ребят есть терминал который при включении открывает браузер и в нем портал . Но панель задач и верхнее окно браузера тоже открыт . Надо...

Как сделать, чтобы Окрашивался выбранный пункт меню, в который перешёл
Есть готовое меню. Как сделать, чтобы при переходе по Выбранному пункту меню, он был окрашен. Т.е. чтобы цвет на нём зафиксировался, и...

Как сделать, чтобы при наведении на пункт меню двигалась стрелка
Здравствуйте! Подскажите пожалуйста, как сделать такое меню, чтобы при нажатии на пункт меню двигалась стрелка и менялась картинка. ...

Что нужно сделать, чтобы меню закрывалось, если пользователь захочет перейти к контенту?
$('.burger_menu').on('click', function(){ $( '.header_menu' ).toggleClass('active', true); }); Что нужно прописать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru