• 0
XopicT

Почему боковое меню не заезжает обратно?

Вопрос

Здравствуйте. Вот такая проблема. Слайдер красиво выезжает, а при повторном клике просто пропадает. Как сделать так что бы он красиво выезжал и так же красиво заезжал?)
https://jsbin.com/yuyawic/1/edit?html,css,js,output

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

У вас задано `transition: left 0.3s;`, плавное изменение будет только у свойства left, а про прозрачность ничего не сказано, следовательно, слайдер будет моментально исчезать, когда opacity возвращается в ноль.

Может сделать так `transition: 0.3s;` — будут плавно меняться все свойства (все допустимые свойства). Или точечно — `transition: left 0.3s, opacity 0.3s;`

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
37 минут назад, mrnobody сказал:

У вас задано `transition: left 0.3s;`, плавное изменение будет только у свойства left, а про прозрачность ничего не сказано, следовательно, слайдер будет моментально исчезать, когда opacity возвращается в ноль.

Может сделать так `transition: 0.3s;` — будут плавно меняться все свойства (все допустимые свойства). Или точечно — `transition: left 0.3s, opacity 0.3s;`

Спасибо Большое!)помогло)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: qwerty_me
      Здравствуйте.Возникла проблема со следующим заданием:вывести всплывающее окно, запрашивающее имя пользователя, затем вывести сегодняшнюю дату на экран(её можно увидеть после всего цикла окон),потом задать вопрос касательно обучения в группе(если да-цикл продолжается, нет-вывести окно с отказом),далее ещё одно вводное окно,а потом через всплывающие окна запросить у пользователся значения a,b,c для решения квадратного уравнения.Суть проблемы:как только после  if-а, отвечающего за запрос о принадлежности к группе,браузер перестаёт отображать остальные окна и простую инфу о дате,которая просто выводится на экран. Подскажите,пожалуйста,как можно пофиксить эту проблему.Всё никак не могу найти причину этого.Мой одногруппник написал похожий код и у него всё работает,но при сравнении я не увидел каких-то кардинальных различий.Свой и его код прикрепил ниже.Буду весьма признателен за вашу помощь,у меня уже просто нет вариантов,что не так с моим кодом:/
      Мой код:
      <html>
      <head>
      <title>вывод различной инфы через всплывающие окна</title>
      </head>
      <body>
      <p id="nameUser"></p>
      <script>
        var nameUser=prompt("Введите Ваше имя пользователя.");
        if (nameUser) {
            document.getElementById("nameUser").innerHTML = nameUser +",Здравствуйте, добро пожаловать на сайт!";
          }
          else {
            document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!";
          }
          Data = new Date();
          Year = Data.getFullYear();
          Month = Data.getMonth();
          Day = Data.getDate();
          switch (Month)
          {
            case 0:  Month="января"; break;
            case 1:  Month="февраля"; break;
            case 2:  Month="марта"; break;
            case 3:  Month="апреля"; break;
            case 4:  Month="мае"; break;
            case 5:  Month="июня"; break;
            case 6:  Month="июля"; break;
            case 7:  Month="августа"; break;
            case 8:  Month="сентября"; break;
            case 9:  Month="октября"; break;
            case 10: Month="ноября"; break;
            case 11: Month="декабря"; break;
          }
          document.write("Сегодня "+Day+" "+Month+" "+Year+" года.");
          if(confirm("Вы учитесь в группе ЭИ-38?"))
            {
            alert("Добро пожаловать на страницу, посвященную лабораторной работе по изучению основ JavaScript!")
            alert("Решите квадратное уравнение: ax^2 + bx + с = 0, где а не равно 0,используя введённые числа для a,b,c")
            a=prompt("Введите значение а")
            b=prompt("Введите значение b")
            c=prompt("Введите значение c")
            var d = b * b - 4 * a * c;
            if(d > 0)
            {
            x1=(( - b)+(Math.sqrt(d)))/(2 * a)
            x2=(( - b)-(Math.sqrt(d)))/(2 * a)
            alert("Корни уравнений:x1="+ x1 +"x2="+ x2 +)
            document.write("Корни уравнений:x1="+ x1 +"x2="+ x2 +);
            }
            if(d == 0)
            {
            x1 = (- b) /( 2 * a)
            alert("Корень уравнения:x1= ",+ x1)
            document.write("Корень уравнения:x1="+ x1 +);
            }
            if(d < 0)
            {
            alert("с введёнными значениями квадратное уравнение не имеет корней")
            }
          }
            else
            {
            alert("Извините, вход только для своих.")
          }
      </script>
      </body>
      </html>
      ниже оригиналы моего кода и одногруппника.
      index try2.htm
      variant znakomogo.htm
    • Автор: HR_Oleg
      Добрый день, форумчане!
       
      Ищем ведущего фронтенедера в компанию DataLight!
       
      Наша команда создает уникальную платформу для анализу данных по крипто-активам, ориентированную на профессиональных инвесторов.
      Мы делаем доступными и понятными инструменты, направленные на оптимизацию и автоматизацию инвестиционных стратегий. Горизонтальная структура, отсутствие строгих регламентов, дресс-кода, инструкций и бюрократии.
       
      О Вакансии:
      Быстрорастущий проект с глобальными амбициями ищет опытного Front-end разработчика.
      Наша команда создает уникальную платформу для анализу данных по крипто-активам, ориентированную на профессиональных инвесторов.
      Мы делаем доступными и понятными инструменты, направленные на оптимизацию и автоматизацию инвестиционных стратегий.
       
      Задачи:
      - Искать оптимальные технологические и архитектурные решения, развивать функционал платформы;
      - Создание API платформы, использующее WebSocket для быстрого взаимодействия между сервером и
      клиентом;
      - Front-end разработка на JavaScript (React, CSS Modules), работой над инфраструктурой.
       
      Требования:
      - Опыт front-end разработки с использованием технологии WebSocket;
      - Профессиональное владение JavaScript, HTML и CSS;
      - Опыт использования React;
      - Знание технологий TypeScript, Redux;
      - Знание систем сборки Webpack;
      - Владение системой контроля версий Git;
      - Знание принципов работы HTTP.
       
      Дополнительным преимуществом будет являться:
      - Знакомство с методологией BEM;
      - Опыт работы с SCSS;
      - Опыт работы с высоконагруженными проектами.
       
      Условия:
      - ЗП от 150 000 до 180 000 руб. на руки
      - Полная занятость, гибкий график
      - Работа в одной из самых востребованных индустрий;
      - Возможность неограниченного профессионального и карьерного роста;
      - Работа в сильной, мотивированной команде над сложными и интересными задачами;
      - Конкурентоспособная заработная плата, бонусы;
      - Уютный офис в центре Москвы, удобный офис в 5 минутах ходьбы от метро Охотный ряд.
       
      Свои резюме просьба присылать на почту: hr.oleg.s@yandex.ru, а также примеры 2-3 выполненных работ с кратким описанием каждого из проектов
    • Автор: Zasadaa
      Здравствуйте,
      Я начинающий специалист в верстке. Знаю HTML и CSS. Изучаю фреймворки и JS.
      Очень хочу реализоваться в сфере Frontend - разработки.

      Готов пройти стажировку ( рассматриваю и не оплачиваемый вариант ), с дальнейшим трудоустройством.

      Буду рад интересным предложениям!
      мой почтовый ящик: mrcojuhari@yandex.ru
  • Спрашивают сейчас

  • Пишут сейчас

    • Разметка выглядит как минимум странно!          В любом случае надо сделать вашу разметку лучше!              и после этого уже ожидать хороших примеров.  ... Далее по:  <!DOCTYPE html> - #html5 - ок  <html lang="en"> - почему? в документе объявлена латиница а записи в этом доке сделаны кирилицей ! - #html5 -  <script type="text/javascript"></script> - type="text/javascript" это лишнее, достаточно <script> </script> - #html5 -  <section class="wrapper"> - <section>? где заголовок <h2-6>? - #html5 -  <ul class="sidebar-menu"> <?php include_once 'menu.php'; ?> </ul> </li> </ul> - оочень странная конструкция, для шаблона!  <section class="my-page"> - ещё <section>? где заголовок <h2-6>? - #html5 - + не о чем не говорящее имя класса! "my-page"(  <img width="100%" ...> - почему стилевые правила в разметке? тем более <img width="100%" ...> не приветствуется в  - #html5 -  ... далее имеются повторяющиеся моменты указанные выше, также своевременность открытия/закрытия тэгов...  <div class="menu"><div class="footer">«Играй в SAMP» Powered by Mihail Rusich ©2016 </div></menu> - нижний колонтитул просто эпик! что это за конструкция?  <divclass="menu"> <divclass="footer"></div> </menu> . итог: приведите в порядок - валидируйте вашу разметку!  Удачи) ....
    • Если вы знаете каким образом увидеть афиши прошедших мероприятий, пожалуйста, смотрите и парсите, но мне кажется сайт не выдает мероприятия из прошлого. Вы можете парсить начиная с сегодняшнего числа и копить эту информацию, на вашем сайте доступ к прошедшим мероприятиям может быть реализован. т.е. вы хотите, чтобы я вам сделал парсер?
      В чем проблемы возникли?
      Для работы с xml документами можно использовать http://simplehtmldom.sourceforge.net/
      Так же весь парсер можно разбить на функции, одна будет например парсить список мероприятий, другая данные по конкретному мероприятию....
        require_once('simple_html_dom.php'); function parser_get_list($p = 1) {     $url = 'https://www.culture.ru/afisha/chelyabinsk?page='.$p.'&limit=24';     $html = file_get_html($url);     if(is_object($html))     {         $items = $html->find('.container_inner .entity-cards_item');         if(is_array($items) && count($items) > 0)         {             foreach($items as $key=>$val)             {                 $url = $val->find('a',0)->href;                 parser_get_page($url);             }             parser_get_list($p+1);         }         else         {             $items = $html->find('.empty-data-message');             if(is_array($items) && count($items) > 0)             {                 //список мероприятий кончился             }             else             {                 //нет ни афиши ни информации о том что их нет - какая-то ошибка возможно                 //можно сделать обработку для них             }         }     } } function parser_get_page($url) {     //проверяем есть ли данная запись у нас, если нет     //аналогично функции parser_get_list, ищем нужные нам данные и записывать их куда-то }  
    • Спасибо большое, но я еще многое чего не понимаю. Да, хочу адаптивно сверстать.
  • Лучшие авторы

    Никто не получал репутацию за неделю

  • Текущие цели пожертвований