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

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

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

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

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

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

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

Помогите пожалуйста, буду очень признателен Вам за это!
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Вложения
Тип файла: rar index - копия.rar (5.8 Кб, 6 просмотров)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.07.2018, 13:38
Ответы с готовыми решениями:

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

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

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

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

8
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
23.07.2018, 13:50  [ТС] 2
Прошу прощения, что-то файл не корректно отображается, вот новый в нем все нормально
0
Вложения
Тип файла: rar index - копия.rar (6.4 Кб, 9 просмотров)
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
23.07.2018, 14:37  [ТС] 3
Помогите пожалуйста, только не ссылками на форум, потому что я уже все ссылки облазил!
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
24.07.2018, 13:01  [ТС] 4
есть скрипт открытия и закрытия меню выезжающего слева
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
888 / 723 / 447
Регистрация: 13.07.2015
Сообщений: 2,254
24.07.2018, 13:09 5
а че просто функцию не вызовешь? так пробовал?
Javascript
1
2
3
$("a[href*=#]").on("click", function() {
   hamburger_cross();
});
0
0 / 0 / 0
Регистрация: 23.07.2018
Сообщений: 7
24.07.2018, 13:19  [ТС] 6
Цитата Сообщение от Уф Посмотреть сообщение
а че просто функцию не вызовешь? так пробовал?
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
888 / 723 / 447
Регистрация: 13.07.2015
Сообщений: 2,254
24.07.2018, 17:54 7
ну да, ты же два действия на одно событие хочешь приделать, а че туда нельзя вписать?
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  [ТС] 8
Цитата Сообщение от Уф Посмотреть сообщение
ну да, ты же два действия на одно событие хочешь приделать, а че туда нельзя вписать?
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  [ТС] 9
Все, всем "спасибо" сам решил проблему.

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

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
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.07.2018, 10:58

Помощь в написании контрольных, курсовых и дипломных работ здесь.

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.