Форум

рони · #21 (**permalink**) 09.08.2017, 21:45

dupre,

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Lato", sans-serif;
    position: relative;
    height: 1700px;
    transition: all 0.3s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    position:  fixed;
    left: 0px;
    transition: left .5s;
    padding: 4px 2px;
    width: 36px;
    height: 36px;
    background-color: #000000;
    text-align: center;
    margin-left: 8px;
    line-height: 36px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.openclosebtn{
   font-size:30px;cursor:pointer;
   color: #FFFFFF;
}
 h1{
   margin: 0 auto;
   text-align: center;
 }

</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" >&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <span class="openclosebtn">&#9776;</span>
</div>
<h1>test</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var a = 0;
    $(".openclosebtn").on("click", function(b) {
        b.stopPropagation();
        a ^= 1;
        $(".sidenav").stop().animate({
            width: 250 * a
        }, 500);
        $("#main").stop().animate({
            left: 250 * a
        }, 500);
        $("body").stop().animate({
            "margin-left": 250 * a + "px"
        }, 500)
    });
    $(document).on("click", function(b) {
        !a || !$(b.target).closest(".closebtn").length && $(b.target).closest(".sidenav").length || $(".openclosebtn").click()
    })
});
  </script>
</body>
</html>

dupre · #22 (**permalink**) 10.08.2017, 03:36

рони,
извини, пожалуйста, за мои вечно кривые вопросы. Старательно, попробую спросить более кратко: чтобы

<span class="openclosebtn">☰</span>

при открытии сайдбара

<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" >&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

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

рони · #23 (**permalink**) 10.08.2017, 08:10

Сообщение от dupre

попробую спросить

не понял

Dilettante_Pro · #24 (**permalink**) 10.08.2017, 10:14

dupre,

Сообщение от dupre

с помощью анимации сместился влево и остановился сверху на пунктами меню открывшегося сайдбара

В примере рони он изначально стоит слева вверху - откуда и куда ему смещаться?
Может, его просто оставлять на месте, а сайдбар открывать под ним?
Крестик же просто убрать из сайдбара.

dupre · #25 (**permalink**) 10.08.2017, 15:28

Сделал скрин, взгляните — https://yadi.sk/i/a1AJDQsX3Lsq4j

dupre · #26 (**permalink**) 10.08.2017, 15:36

рони, сделал скрин, с ним наверное уже нагляднее будет. Дублирую ссылку https://yadi.sk/i/a1AJDQsX3Lsq4j

рони · #27 (**permalink**) 10.08.2017, 16:48

dupre,
далее лучше к сециалистам по css ...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    font-family: "Lato", sans-serif;
    position: relative;
    height: 1700px;
    transition: all 0.3s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;

    top: 40px;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    z-index: 1;
    position:  fixed;
    top: 0;
    left: 0;
    color: #FFFFFF;
    background-color: #000000;
    text-align:  left;
    width: 250px;
    height: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.openclosebtn{
  line-height: 36px;
   background-color: #000000;
   width: 36px;
   height: 36px;
   font-size:30px;cursor:pointer;
   color: #FFFFFF;
}
 h1{
   margin: 0 auto;
   text-align: center;
 }

</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div id="main">
  <span class="openclosebtn">☰</span>  меню сайта
</div>

<h1>test</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var a = 0;
    $(".openclosebtn").on("click", function(b) {
        b.stopPropagation();
        a ^= 1;
        $(".sidenav").stop().animate({
            width: 250 * a
        }, 500);
        $("body").stop().animate({
            "margin-left": 250 * a + "px"
        }, 500)
    });
    $(document).on("click", function(b) {
        !a || !$(b.target).closest(".closebtn").length && $(b.target).closest(".sidenav").length || $(".openclosebtn").click()
    })
});
  </script>
</body>
</html>

Dilettante_Pro · #28 (**permalink**) 10.08.2017, 16:53

Вариант

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Lato", sans-serif;
    position: relative;
    height: 1700px;
    transition: all 0.3s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 36px;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

#main {
    position:  fixed;
    top:0px;
    left: 300px;
    transition: left .5s;
    padding: 4px 2px;
    width: 245px;
    height: 36px;
    background-color: #000000;
    margin-left: 1px;
    line-height: 36px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.openclosebtn{
   font-size:30px;cursor:pointer;
   color: #FFFFFF;
}
 h1{
   margin: 0 auto;
   text-align: left;
 }

</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <span class="openclosebtn">☰ Меню сайта</span>
</div>
<h1>test</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var a = 0, b;
    $(".openclosebtn").on("click", function(b) {
        b.stopPropagation();
        b = a;
        a ^= 1;
        $(".sidenav").stop().animate({
            width: 250 * a
        }, 500);
        $("#main").stop().animate({
            left: 300 * b
        }, 500);
        $("body").stop().animate({
            "margin-left": 250 * a + "px"
        }, 500)
    });
    $(document).on("click", function(b) {
        !a || !$(b.target).closest(".closebtn").length && $(b.target).closest(".sidenav").length || $(".openclosebtn").click()
    })
});
  </script>
</body>
</html>

dupre · #29 (**permalink**) 10.08.2017, 19:12

рони,
а, если попробовать без анимации. То есть:
1.над списком в html физически прописать дубликат

<span class="openclosebtn">☰</span>

в css задав ему 100% прозрачности

2. а при открытии сайдбара, задать ему цвет, следовательно он станет видимым

3. а основной "openclosebtn", при помощи которого мы открывает сайдбар, при этом примет 100% прозрачность и станет видимым лишь если закроется сайдбар

P.s Вариант с анимацией буду искать, если найду выложу сюда, глянуть для интереса просто.

dupre · #30 (**permalink**) 10.08.2017, 19:20

Dilettante_Pro, спасибо за помощь!
Имеющиеся варианты реализации не совсем то, что ищется. Скинул сообщение на имя Рони, с иной идеей, глянь пожалуйста.

Форум

Справочник

Discord чат

Курсы javascript