Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   боковое выдвижное меню - исчезание (https://javascript.ru/forum/dom-window/60059-bokovoe-vydvizhnoe-menyu-ischezanie.html)

wowez 09.12.2015 12:39
боковое выдвижное меню - исчезание
 
Здравствуйте это мой первый пост здесь и да я ещё очень слаб в javascript. подскажите пожалуйста как сделать что бы данное меню пропадало при клике вне триггера, и если я делаю несколько таких меню как сделать что бы при килике на одном другие прятались.

вот код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<style>

.panel {
position: absolute;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
}



.panel-1 {
position: absolute;
top: 150px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
}






a.trigger{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#333333 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 40px;
font-weight: 700;
background:#222222 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}




a.trigger-1{
position: absolute;
text-decoration: none;
top: 180px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#333333 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.trigger-1:hover{
position: absolute;
text-decoration: none;
top: 180px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 40px;
font-weight: 700;
background:#222222 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.active.trigger-1 {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}




</style>





<script type="text/javascript">
$(document).ready(function(show){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});

$(".trigger-1").click(function(){
		$(".panel-1").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});

});
</script>



</head>

<body>



<div class="panel">
	<h3>Sliding Panel</h3>
	</div>



<a class="trigger" href="#">infos</a>


<div class="panel-1">
	<h3>Sliding Panel</h3>
	</div>



<a class="trigger-1" href="#">infos</a>


</body>
</html>

рони 09.12.2015 13:59
Открывашка 239 + боковое меню + закрытие по клику вне блока
 
Цитата:
Сообщение от wowez
jquery-1.3.2.js
ненадо тревожить бабушку!!!
Открывашка 204 + закрытие по клику вне блока
Открывашка 239 на основе открывашки 204
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>

.panel {
position: absolute;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
}



.panel:nth-of-type(2) {
top: 150px;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#333333 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 40px;
font-weight: 700;
background:#222222 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}
a.trigger:nth-of-type(2){
top: 180px;
}</style>





<script>
    $(function() {
    var $but = $(".trigger"),
        $blocks = $(".panel");
    $but.each(function(i, elem) {
        var $el = $(elem);
        $el.click(function() {
            $but.not($el).removeClass("active");
            $el.toggleClass("active");
            $blocks.filter(function(j, el) {
                i == j && $(el).toggle();
                return i != j
            }).hide();
        })
    });
    $('html').click(function (event) {
          if ($(event.target).closest('.trigger, .panel' ).length) return;
          $but.filter('.active').click()
      });
});
</script>



</head>

<body>

<div class="panel">
	<h3>Sliding Panel</h3>
	</div>
<a class="trigger" href="#">infos</a>
<div class="panel">
	<h3>Sliding Panel</h3>
	</div>
<a class="trigger" href="#">infos</a>
</body>
</html>

wowez 09.12.2015 17:22
Спасибо Вам огромное вот я искалко.. но не факт что бы додумал даже еслиб нашёл.


Часовой пояс GMT +3, время: 06:58.