Не работает меню

Question

Меню вставлено в сайте через iframe, отдельно страница с меню собственно работает главная страница:

<!DOCTYPE html> 
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/glav.css">
    </head>
    <body>
        <div id="fon"> 
            <div id="zag">
                <h1 class="ep"></h1>
            </div>    
            <div id="osnov">
                <iframe id ="menu" src="main.html" frameborder="0"></iframe>
                <iframe  id = "osnova" src="" frameborder="0" name="frameone"></iframe>
                
            </div>
         </div>
         <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
         <script src="js/index.js"></script>
    </body>
</html>

страница с меню:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/menu.css">
       
    </head>
<body>
        <ul class="accordion-menu">
            <li>
              <div class="dropdownlink" id="OsnInfo">
                  Основная информация
              </div>
              <ul class="submenuItems">
                <li><a href="main1.html" target="frameone">Главная страница</a></li>
                <li><a href="annota.html" target="frameone">Аннотация</a></li>
              </ul>
            </li>
            <li>
              <div class="dropdownlink" id="Ycheba">
                Учебные материалы
              </div>
              <ul class="submenuItems">
                <li><a href="razdek 1.html"  id="razdel" target="frameone">Раздел 1.</a></li>
                <li><a href="radzel2.html" target="frameone" id="razdel">Раздел 2.</a></li>
                <li><a href="razdel3.html" target="frameone" id="razdel">Раздел 3.</a></li>
                <li><a href="razdel4.html" target="frameone" id="razdel">Раздел 4.</a></li>
                <li><a href="glosary.html" target="frameone" id="glos">Глоссарий</a></li>
              </ul>
            </li>
            <li>
              <div class="dropdownlink" id="Kontrol">
                Котроль знаний
              </div>
              <ul class="submenuItems">
                <li><a href="" target="frameone">Тесты</a></li>
                <li><a href="" target="frameone">Зачет</a></li>
              </ul>
            </li>
            <li>
              <div class="dropdownlink" id="Info">
                Информационный раздел
              </div>
              <ul class="submenuItems">
                <li><a href="" target="frameone">Список литературы</a></li>
                <li><a href="" target="frameone">Охрана труда</a></li>
                <li><a href="" target="frameone">Список требуемых программ</a></li>
              </ul>
            </li>
            <li>
              <div class="farm">
                <a href="index_login.html" id="login" target="frameone">Вход/Регистрация</a>
              </div>
            </li>
          </ul>
          <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
          <script src="js/index.js"></script>

    </body>
</html>

ксс главной:

body{
    background: #D0D0D0;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}
#fon{
    position: relative;
    z-index: -1;
    width: 75vw;
    height: 100vh;
    margin: auto;
    background: linear-gradient(183.68deg, rgba(229, 239, 235, 0.7) 23.92%, rgba(135, 155, 143, 0.392) 112.32%);
    box-shadow: 1.5vh 0px 2vh rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4vh 0px;
}
#zag{
    width: 30vw;
    height: 8.2vh;
    position: absolute;
    display: flex;
    top: 5vh;
    /*width: calc((100vw - 480px) / (1280 - 480) * (260 - 8) + 3vh);
    height: calc((100vh - 480px) / (1280 - 480) * (45 - 8) + 3vw);*/
    z-index: 1;
    background: #F6F7F9;
    border-radius: 0px 5vh 0px 0px;
    filter: drop-shadow(0.45vw -0.6vh 0.4vh rgba(0, 0, 0, 0.25));
    
}
h1.ep{
     font-size: calc((1280px - 480px) / (1280 - 480) * (20 - 19) + 3vh);
     margin: auto;
     color: #294382;
    
     
}
#osnov{
    background: #F5F7F9;
    position: relative;
    z-index: 0;
    top: 13.2vh;
    height: 87vh;
    width: 74vw;
   
    border-radius: 0px 0px 4vh 0px;
    filter: drop-shadow(0.5vw -0.6vh 0.4vh rgba(0, 0, 0, 0.25));
    
}
iframe#menu{
    background: linear-gradient(90deg, rgba(234, 243, 248, 0.7) 1%, rgba(226, 232, 236, 0.7) 13%, rgba(90, 92, 92, 0) 96.01%);
    position:relative;
    width: 15vw;
    height: 86.8vh;
    filter: drop-shadow(1vw -2vh 1vh rgba(0, 0, 0, 0.25));
    overflow: hidden;
    z-index: 5;
}
iframe#osnova{
    position: relative;
    width: 79.1%;
    height: 86.8vh;
    
    background: rgba(232, 239, 229, 0.4);
    box-shadow: -5px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 4vh 0px;
    z-index: 2;
}

js file menu:

$(function() {
  var Accordion = function(el, multiple) {
    this.el = el || {};
    // more then one submenu open?
    this.multiple = multiple || false;
    
    var dropdownlink = this.el.find('.dropdownlink');
    dropdownlink.on('click',
                    { el: this.el, multiple: this.multiple },
                    this.dropdown);
  };
  
  Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el,
        $this = $(this),
        //this is the ul.submenuItems
        $next = $this.next();
    
    $next.slideToggle();
    $this.parent().toggleClass('open');
    
    if(!e.data.multiple) {
      //show only one menu at the same time
      $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
    }
  }
  
  var accordion = new Accordion($('.accordion-menu'), false);
})

БЛОГ НА HUSL

Не работает меню

Ответы (0 шт):