Фиксированное меню для старых браузеров "safari" - HTML, CSS - Ответ 6525206

@Игор35 · Регистрация: 26.08.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте, перехожу сразу к проблеме,
делаю фиксированное меню для экранов 800 пикселей и меньше, вообщем, когда указываю высоту блока 100%, в некоторых браузерах safari текст (после высоты экрана телефона) исчезает. Пробовал указывать высоту блока в пикселях, но тогда на мониторе компьютеров у меню пропадает скролл, и становится неподвижным.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body * {
              -webkit-transition: width 0.5s, margin-left 0.5s;
              -moz-transition: width 0.5s, margin-left 0.5s;
              -ms-transition: width 0.5s, margin-left 0.5s;
              -o-transition: width 0.5s, margin-left 0.5s;
              transition: width 0.5s, margin-left 0.5s;
            }
            body {
              margin:0 auto;
            } 
            #open { 
              position:absolute; 
              cursor: pointer;
            }   
            #menu {
              display:none; 
              height: 100%; 
              width: 0px;    
              border: 1px solid;
              position:fixed; 
              overflow-y: scroll;
            }
            .margin {
              margin:10px;
              font-size: 1.3em;
              font-family: Arial;
            }
            .margin li {
              border-top: 1px solid;
              margin-top: 5px;
            }
            .margin li:hover {
              color: #137000;
              cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="open">Откройся</div>
        <div id="menu">
          <div class="margin">
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li> 
            <li>блаблабла</li>
            <li>блаблабла</li>  
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li> 
            <li>блаблабла</li>
            <li>блаблабла</li> 
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li> 
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li> 
            <li>блаблабла</li>
            <li>блаблабла</li>
            <li>блаблабла</li>
            </div>
          </div>
        <script>
            var menu = document.getElementById('menu');
            open = document.getElementById('open');
 
            function go(click) {
              click = click || window.event;
              var cl = click.target || click.srcElement;
              
              function prov() {
                if(cl.tagName.indexOf('LI') == -1 && cl.id.indexOf('menu') == -1) {
                 setTimeout("menu.style.display = 'none'",600);
                 menu.style.width = '0px';
                 open.style.marginLeft = '0px';
                }
              }
              
               function current() {
               if(menu.currentStyle) return parseInt(menu.currentStyle.width);
               else return 9999;
               }
              
              if(cl.id.indexOf('open') != -1) {
               if(parseInt(getComputedStyle(menu).width) < 20 || current() < 20)  {  
                 menu.style.display = 'block';
                 menu.style.width = document.getElementsByTagName('html')[0].clientWidth/100*40+'px';
                  open.style.marginLeft = document.getElementsByTagName('html')[0].clientWidth/100*40+'px';   
               }
                else {
                return prov();
                }
              } 
              else {
               return prov();
              }
            }
            
            document.onclick = go;
            
        </script>
    </body>
</html>

У такой проблемы есть решение? Пожалуйста, подскажите.

Благодарю

Добавлено через 18 часов 37 минут
ещё актуально!
Пожалуйстаа

Вернуться к обсуждению:
Фиксированное меню для старых браузеров "safari" HTML, CSS

Следующий ответ