Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
23 / 23 / 7
Регистрация: 26.08.2013
Сообщений: 334
1

Фиксированное меню для старых браузеров "safari"

17.08.2014, 21:20. Просмотров 1286. Ответов 3
Метки нет (Все метки)

Здравствуйте, перехожу сразу к проблеме,
делаю фиксированное меню для экранов 800 пикселей и меньше, вообщем, когда указываю высоту блока 100%, в некоторых браузерах safari текст (после высоты экрана телефона) исчезает. Пробовал указывать высоту блока в пикселях, но тогда на мониторе компьютеров у меню пропадает скролл, и становится неподвижным.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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 минут
ещё актуально!
Пожалуйстаа
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.08.2014, 21:20
Ответы с готовыми решениями:

Inset box-shadow для input[type="text"] в safari
При верстке возникла проблема с отображением inset-тени для текстбокса в браузерах firefox и...

Фиксированное меню для сайта
Есть адаптивное меню. html: &lt;div class=&quot;mainWrap&quot;&gt; &lt;a id=&quot;touch-menu&quot; class=&quot;mobile-menu&quot;...

Справа меню, над ним "картинки" нажимая на которые меню меняется на другое содержимое
не очень понимаю на чем работает меню ( http://wpnew.ru/ - справо меню, над ним &quot;картинки&quot; нажимая...

Правильно ли использовать атрибуты width="100%" height="auto" для изображений?
Добрый день. Пытаясь решить проблему что встроенные средства WP автоматически заменяют указанные...

3
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
18.08.2014, 17:58 2
попробуйте body задать height:100%
0
23 / 23 / 7
Регистрация: 26.08.2013
Сообщений: 334
19.08.2014, 16:21  [ТС] 3
Не помогло.

Добавлено через 2 минуты
Уже подумываю об фрейме

Добавлено через 17 часов 28 минут
Никто не знает как написать фиксированное меню для телефонов и компов?
Покажите на своем коде.
0
23 / 23 / 7
Регистрация: 26.08.2013
Сообщений: 334
28.08.2014, 21:55  [ТС] 4
Никто не знает?
Еще актуально!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.08.2014, 21:55

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Где расоплагаются иконки для кнопок "Like" и "Unlike"
Где хронятся изображения кнопок как на этом сайте Пробую просто button создать, ниче не...

Как отменить ":hover" для определенного "<li>"?
Создаю горизонтальное меню. Вот: http://jsfiddle.net/Yakymiv/oyh2m7fx/2/ По бокам пункты...

Одновременный hover для "img" и "a"
Здравствуйте, не могу понять, как сделать hover для img и ссылки вот пример как должно быть......

Как сменить цвет последней "кликнутой" ссылки меню
Добрый день! На сайте потребовалось менять цвет последней &quot;кликнутой&quot; ссылки меню. Страницы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.