Egg reference and javascript



  • The switch on the anchor link only works once. After that, the menu is closed once without a transition. If js is removed, the crossings are fine, but there's an open menu.

    $('a.small').click(function() {
      var layout = document.querySelector('.mdl-layout');
      layout.MaterialLayout.toggleDrawer();
    });
    <!doctype html>
    <html lang="en">
    

    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_green-orange.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
    <div class="mdl-layout-title">
    <img style="height: 50px" src="LOGO-SD.png">
    </div>
    <span class="mdl-layout-spacer"></span>
    <nav class="mdl-navigation mdl-layout--large-screen-only">
    <a class="mdl-navigation__link" href="#main">Главная</a>
    <a class="mdl-navigation__link" href="#timetable">Расписание</a>
    <a class="mdl-navigation__link" href="#tasks">Задачи</a>
    <a class="mdl-navigation__link" href="#extratasks">Сверхзадачи</a>
    <a class="mdl-navigation__link" href="">Контакты</a>
    <a class="mdl-navigation__link" href="">Регистрация</a>
    </nav>
    </div>
    </header>
    <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title" style="color: black;">Игронет</span>
    <nav class="mdl-navigation">
    <a class="mdl-navigation__link small" href="#main">Главная</a>
    <a class="mdl-navigation__link small" href="#timetable">Расписание</a>
    <a class="mdl-navigation__link small" href="#tasks">Задачи</a>
    <a class="mdl-navigation__link small" href="#extratasks">Сверхзадачи</a>
    <a class="mdl-navigation__link small" href="">Контакты</a>
    <a class="mdl-navigation__link small" href="">Регистрация</a>
    </nav>
    </div>
    <main class="mdl-layout__content">
    <div class="page-content">
    <div class="mdl-grid">
    <div id='main' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp" style="margin: auto;">
    <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">
    «ПРОФЕССИИ БУДУЩЕГО»
    </h2>
    </div>
    <div class="mdl-card__supporting-text">
    <p><b>
    ОБРАЗОВАТЕЛЬНЫЕ ФОРУМЫ
    ДЛЯ ПОДГОТОВКИ ИГРОТЕХНИКОВ
    «ПРОФЕССИИ БУДУЩЕГО»
    РОССИЙСКОГО ДВИЖЕНИЯ ШКОЛЬНИКОВ
    </b>
    </p>
    <p>Наша главная задача не передать вам знания, наша задача побороть ваш страх перед незнанием, научить вас учиться.</p>
    <b>Участники:</b>
    <p>250-300 человек, педагоги, студенты, специалисты по работе с РДШ</p>
    <b>Фокус-группа:</b>
    <p>300-400 детей в каждом регионе</p>
    </div>
    <div class="mdl-card__media mdl-cell--middle">
    <img src="air_professii.jpg">
    </div>
    <div class="mdl-card__actions mdl-card--border">
    <a style='color: white;' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    Зарегистрироваться
    </a>
    </div>
    </div>
    </div>
    <div class="mdl-grid">
    <div id='timetable' class="mdl-layout-title" style="margin: auto; color: black;"><b>Наше расписание:</b>
    </div>
    </div>
    <div class="mdl-grid mdl-cell--middle">
    <div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
    <div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    День 1
    </div>
    <ul class="demo-list-icon mdl-list">
    <li class="mdl-list__item">

                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Открытие
                                &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Пленарное заседание
                              &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Брейн Фитнес
                              &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Обучение игровым кейсам и практикам
                              &lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell mdl-cell--8-col-phone mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
              День 2
            &lt;/div&gt;
            &lt;ul class="demo-list-icon mdl-list"&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Практикум в школах региона по отработке игр
                                &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Обучение игровым кейсам и практикам
                              &lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell--2-offset-desktop  mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
              День 3
            &lt;/div&gt;
            &lt;ul class="demo-list-icon mdl-list"&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Практикум в школах региона по отработке игр
                                &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Тренинги по выстраиванию образовательных и карьерных траекторий
                              &lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored"&gt;
              День 4
            &lt;/div&gt;
            &lt;ul class="demo-list-icon mdl-list"&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Подведение итогов
                                &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Оформление договоров на аттестацию робототехников
                              &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Подписание соглашений
                              &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Торжественное закрытие форума
                              &lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="mdl-list__item"&gt;
                &lt;i class="material-icons"&gt;done&lt;/i&gt;
                &lt;span class="mdl-list__item-primary-content"&gt;
                                Культурная программа
                              &lt;/span&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="mdl-grid"&gt;
          &lt;div id='tasks' class="mdl-layout-title" id='tasks' style="margin: auto; color: black;"&gt;&lt;b&gt;Наши задачи:&lt;/b&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="mdl-grid"&gt;
          &lt;div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div class="left-top"&gt;1&lt;/div&gt;
            &lt;div class="text"&gt;Подготовка 10 -15 новых профориентационных игр и использование игр из «Атласа новых профессий»&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div class="left-top"&gt;2&lt;/div&gt;
            &lt;div class="text"&gt;Обучение педагогов и активистов, работающих с РДШ 3 компетенциям:
              &lt;br&gt;-проведение тренинговых и активных образовательных форм работы;
              &lt;br&gt;-проведение конкретных кейсов деловых игр и отработка на фокус-группах;
              &lt;br&gt;- принципы создание собственных деловых игр;
              &lt;br&gt;- обучение работе с атласом новых профессий.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div class="left-top"&gt;3&lt;/div&gt;
            &lt;div class="text"&gt;
              Формирование профессионального сообщества игротехников, создание собственных кейсов игр
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div class="left-top"&gt;4&lt;/div&gt;
            &lt;div class="text"&gt;
              Проведение чемпионата игротехников, запуск профессионального движения игротехников в образовании
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="mdl-grid"&gt;
          &lt;div id='extratasks' class="mdl-layout-title" style="margin: auto; color: black;"&gt;&lt;b&gt;Сверхзадача:&lt;/b&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="mdl-grid"&gt;
          &lt;div style='margin: auto' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp"&gt;
            &lt;div id="canvas"&gt;
              &lt;p class="task first left"&gt;Включение РДШ в работу с Атласом Новых Профессий (фактически привнести атлас в каждую школу)&lt;/p&gt;
              &lt;p style="margin-top: 60px" class="task second right"&gt;Создание интерактивной формы образования (в перспективе могут осуществлять сами школьники по принципу старшие-младшим)&lt;/p&gt;
              &lt;p style="margin-top: 60px" class="task third left"&gt;Формирование в школах и педагогической среде повестки НТИ&lt;/p&gt;
              &lt;p style="margin-top: 40px" class="task fourth right"&gt;Создание готовой программы ежедневной работы для актива РДШ в регионах&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class="mdl-mega-footer"&gt;
        &lt;div class="mdl-mega-footer__middle-section"&gt;
    
          &lt;div class="mdl-mega-footer__drop-down-section"&gt;
            &lt;input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked&gt;
            &lt;h1 class="mdl-mega-footer__heading"&gt;Партнёры&lt;/h1&gt;
            &lt;ul class="mdl-mega-footer__link-list"&gt;
              &lt;li&gt;&lt;a href="http://www.ranepa.ru/"&gt;РАНХиГС&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://alterschool.com"&gt;Школа Будущих Президентов&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://asi.ru"&gt;Агенство Стратегических Инициатив&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://www.oprf.ru/"&gt;Общественная палата РФ&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://kremlin.ru/"&gt;Администрация Президента РФ&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://xn----ctbbfgafpccvblxfoe7o3c.xn--p1ai/"&gt;Российское движение школьников&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    
        &lt;div class="mdl-mega-footer__bottom-section"&gt;
          &lt;div class="mdl-logo"&gt;Школа Будущих Президентов&lt;/div&gt;
          &lt;ul class="mdl-mega-footer__link-list"&gt;
            &lt;li&gt;&lt;a href="#"&gt;О нас &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Контакты&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
    
      &lt;/footer&gt;
    &lt;/main&gt;
    

    </div>
    </body>



  • If onclick='s every element of the menu, window.location="index.php#main"; var layout = document.querySelector(".mdl-layout");layout.MaterialLayout.toggleDrawer(); return false; Everything will work.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2