Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2015, 02:14
Новичок на форуме
Отправить личное сообщение для wiserfild Посмотреть профиль Найти все сообщения от wiserfild
 
Регистрация: 20.10.2015
Сообщений: 3

Исчезновение меню при клике на ссылку
Всем привет! Возник такой вопрос, в мобильной версии сайта есть меню, которой всплывает при клике на слово "меню", к ссылкам привязаны анкоры, так вот проблема в том, что при клике на ссылку, например "Факты", страница опускается, но меню само не исчезает.
Вот код скрипта:

Код:
    <script type="text/javascript">
        $(document).ready(function(){
            var touch = $('#touch-menu');
            var menu = $('.nav');
         
            $(touch).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });
            $(window).resize(function(){
                var wid = $(window).width();
                if(wid > 760 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
            
        });
</script>

Так вот, как сделать так, чтобы меню скрывалось при клике на ссылку или на боди сайта?
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2015, 13:15
Новичок на форуме
Отправить личное сообщение для wiserfild Посмотреть профиль Найти все сообщения от wiserfild
 
Регистрация: 20.10.2015
Сообщений: 3

Вот код, который плавного перехода по ссылкам, может в него что-то дописать, чтобы всплывающее меню исчезало?
// 
			$('a[href^="#"]').click(function () { 
			    elementClick = $(this).attr("href");
				destination = $(elementClick).offset().top;
				if($.browser.safari){
				$('body').animate( { scrollTop: destination }, 1000 );
				} else {
			    	$('html').animate( { scrollTop: destination }, 1000 );
				}
				return false;
		   });
		});
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2015, 19:31
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Сообщение от wiserfild Посмотреть сообщение
Вот код, который плавного перехода по ссылкам, может в него что-то дописать, чтобы всплывающее меню исчезало?
// 
			$('a[href^="#"]').click(function () { 
			    elementClick = $(this).attr("href");
				destination = $(elementClick).offset().top;
				if($.browser.safari){
				$('body').animate( { scrollTop: destination }, 1000 );
				} else {
			    	$('html').animate( { scrollTop: destination }, 1000 );
				}
				return false;
		   });
		});
Скинь html код
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2015, 09:45
Новичок на форуме
Отправить личное сообщение для wiserfild Посмотреть профиль Найти все сообщения от wiserfild
 
Регистрация: 20.10.2015
Сообщений: 3

html
<header id="header">
        <div class="logo">
           <a href="#" class="font1"><span style="color: #ffffff">ДЕМО</span><span style="color: #cfc91d">САЙТ</span></a>
        </div>

<div id="message">

        <a href="#" id="touch-menu">МЕНЮ</a>
        <nav>
            <ul class="nav">
                <li><a href="#about">ОБО МНЕ</a></li>
                <li><a href="#service">УСЛУГИ</a></li>
                <li><a href="#facts">ФАКТЫ</a></li>
                <li><a href="#contacts">КОНТАКТЫ</a></li>               
            </ul>
        </nav>
</div>

    </header>



css
Код:
header {
	background: #02918c;
	width: 100%;
	z-index: 9999;
	position: fixed;
	height: 60px;

}
.logo {float: left;
	font-size: 26px;
	line-height: 60px;
	margin-left: 88px;
	font-family: "Open Sans";}
.nav {float: right;}
.nav {margin-right: 22px;}
.nav li {float: left;}
.nav li a,
#touch-menu {
	display: block;
	font-weight: bold;
	color: #fff;
	line-height: 60px;
	padding: 0 22px;

}
.nav li a:hover, #touch-menu:hover
 {
	background: #28a19d;
	}

#touch-menu {display: none;}

@media (max-width: 1000px) {
	body {padding-top: 60px}
	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
	}
	.logo {
		font-size: 18px;
		line-height: 60px;
		margin-left: 20px;
	}
	.nav {
		position: absolute;
		top: 100%;
		left: 50%;
		right: 0;
		display: none;
		width: 50%;

	}
	.nav li {float: none;}
	.nav li a {
		color: #ffffff;
		background: #02918c;
		text-align: center;
	}
	.nav li:first-child a {border-top: none;}
	.nav li a:hover {
		color: #ffffff;
		background: #28a19d;
	}
	#touch-menu {
		display: block;
		float: right;
		height: 60px;
		padding: 0 20px;
		line-height: 60px;
		/*margin-right: 20px;*/
	}
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2015, 19:50
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

смотри
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать всплывающее Popup окно при клике на ссылку dimkaja Элементы интерфейса 1 19.06.2014 11:15
Выделение при клике на элемент haacki jQuery 2 16.03.2014 12:56
Редирект при клике на любую ссылку joreg Events/DOM/Window 5 19.02.2014 06:49
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 10:11
ПОМОГИТЕ !!! Активные пункты меню при наведении на ссылку Salo jQuery 4 08.12.2010 11:49