PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: меню не полностью раскрывается при экране 320
DonQuijote
Отправлено: 05 Июля, 2017 - 20:47:51
Post Id


Новичок


Покинул форум
Сообщений всего: 48
Дата рег-ции: Май 2015  


Помог: 0 раз(а)




Всем привет!
Помогите разобраться уже второй день сижу нифига не понимаю почему при экране 320, не раскрывается список второго уровня.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="windows-1251">
  6. <title>Тест меню</title>
  7. <link href="style2.css" rel="stylesheet" type="text/css" media="all">
  8. <link href="fonts.css" rel="stylesheet" type="text/css" media="all">
  9. <link href="lightbox/css/lightbox.css" rel="stylesheet">
  10. <script src="lightbox/js/lightbox-plus-jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.         var pull = $('#pull');
  14.                 menu = $('#nav ul');
  15.                 menuHeight = menu.height();
  16.  
  17.         $(pull).on('click', function(e) {
  18.                 e.preventDefault();
  19.                 menu.slideToggle();
  20.         });
  21.  
  22.         $(window).resize(function(){
  23.                 var w = $(window).width();
  24.                 if(w > 320 && menu.is(':hidden')) {
  25.                         menu.removeAttr('style');
  26.                 }
  27.         });
  28. });
  29. </script>
  30. </head>
  31.  
  32. <body>
  33. <div id="nav">
  34.     <a href="#" id="pull">МЕНЮ</a>
  35.         <ul id="menu">
  36.         <li><a href="/">Главная</a></li>
  37.         <li><a href="/index.php?people&page=HeroesMarshals">Люди</a>
  38.                 <ul>
  39.                 <li><a href="/index.php?people&page=heroes">Герои СССР</a></li>
  40.                 <li><a href="/index.php?people&page=marshals">Маршалы СССР</a></li>
  41.             </ul>
  42.         </li>
  43.         <li><a href="/index.php?honors&page=honors">Ордена и Медали</a></li>
  44.         <li><a href="/index.php?equipment&page=equipment">Техника</a>
  45.                 <ul>
  46.                 <li><a href="/index.php?equipment&page=aviation">Авиация</a></li>
  47.                 <li><a href="/index.php?equipment&page=marine">Морская</a></li>
  48.                 <li><a href="/index.php?equipment&page=land">Сухопутная</a></li>
  49.             </ul>
  50.         </li>
  51.         <li><a href="/?media&page=media">Медиа</a>
  52.                 <ul>
  53.                 <li><a href="/?media&photo_archives&page=photo">ФотоАрхив</a></li>
  54.                 <li><a href="/?media&cards&page=cards">Карты</a></li>
  55.                 <li><a href="/?media&songs&page=songs">Песни о войне</a></li>
  56.                 <li><a href="/?media&films&page=films">Фильмы о войне</a></li>
  57.             </ul>
  58.         </li>
  59.         <li><a href="/index.php?page=about">О сайте</a></li>
  60.         <li><a href="/message">Контакты</a></li>
  61.     </ul>
  62. </div>
  63.  
  64. </body>
  65. </html>
  66.  


CODE (html):
скопировать код в буфер обмена
  1.  
  2. @charset "windows-1251";
  3. /* CSS Document */
  4. * {
  5.         margin:0;
  6.         padding:0;
  7. }
  8. /* Контейнер для меню */
  9. #nav {
  10.         width:100%;
  11.         height:50px;
  12.         background-color:#FFBF00;
  13.         font-family: "SCConvoy"; /* Шрифт, подгружаемый */
  14.         font-size: 18px/25px; /* Размер шрифта */
  15.         font-weight: bold; /* Жирное начертание */
  16. }
  17.  
  18. /* Дизайн меню */
  19. #menu:before, #menu:after {
  20.     content: " ";
  21.     display: table;  
  22. }  
  23. #menu:after {
  24.     clear: both;
  25. }
  26. #menu {
  27.     *zoom: 1;
  28. }
  29. ul#menu {
  30.         margin:0 auto; /* Выравнивание по центру */
  31.         width:910px; /* Ширина меню */
  32.         height:50px; /* Высота меню */
  33. }
  34. #menu li {
  35.         display:block; /* Ссылки отображаются в виде блока */
  36.         min-width:100px; /* Ширина блока */
  37.         background-color: #FFAF00; /* Цвет фона */
  38.         color: #000; /* Цвет текста */
  39.         float: left; /* Располагаем элементы по горизонтали */
  40.         position:relative; /* ??? */
  41. }
  42. #menu a { /* Ссылки основных пунктов меню */
  43.         display:block; /* Ссылки отображаются в виде блока */
  44.         font-weight:normal; /* Нормальное начертание текста */
  45.         font-size:18px/25px; /* Размер шрифта */
  46.         color:#000; /* Цвет текста */
  47.         text-decoration:none; /* Убираем подчёркивание */
  48.         white-space: nowrap; /* запрещаем перевод строк */
  49.         text-align:center; /* Центрируем текст */
  50.         height:40px; /* Высота пункта */
  51.         line-height:35px; /* Межстрочный интервал */
  52.         background-color:#FFAF00; /* Цвет фона */
  53.         border:1px solid #666; /* Параметры рамки */
  54.         border-bottom:none; /* Убираем границу снизу */
  55.         padding:5px; /* Поля вокруг текста */
  56. }
  57. #menu a:hover {
  58.         background-color:#000; /* Цвет фона при наведении */
  59.         color:#FFAF00; /* Цвет текста при наведении */
  60. }
  61. #menu li ul {
  62.         display:none; /* Отключаем отображение меню 2-го уровня */
  63.         position: absolute; /* абсолютное позиционирование внутренних списков */
  64. }
  65. #menu li ul a {
  66.         min-width: 150px; /* минимальная ширина подпунктов */
  67.         width: auto !important; /* для поддержки IE6 */
  68.         width: 150px; /* для IE6 */
  69. }
  70. #menu li:hover ul, #menu li.ie6 ul {
  71.         display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
  72. }
  73. #menu li:hover ul a, #menu li.ie6 ul a {
  74.         color: #000; /* цвет текста внутренних ссылок */
  75.         background: #FFAF00; /* цвет фона */
  76. }
  77. #menu li:hover a, #menu li ul a:hover, #menu li.ie6 a {
  78.         color: #FFAF00; /* цвет текста внешних ссылок при наведении курсора на LI,
  79.                     а также внутренних ссылок при наведении курсора на них самих */
  80.         background: #000; /* фон */
  81. }
  82. a#pull {        /* внешние ссылки будут скрыты (для экранов настольных систем) */
  83.         display:none;
  84. }
  85.  
  86.  
  87. /****************************************************
  88. *       Смартфон (портретная и альбомная ориентация)    *
  89. ****************************************************/
  90. @media only screen
  91. and (min-device-width : 320px)
  92. and (max-device-width : 480px) {
  93.         #nav {
  94.                 margin:0;
  95.                 min-width:320px;
  96.                 max-width:480px;
  97.                 height:50px;
  98.         }
  99.         ul#menu {
  100.                 width:100%;
  101.                 display:none;
  102.                 height:auto;
  103.         }
  104.         #menu li {
  105.                 display:block;
  106.                 float:none;
  107.                 width:100%;
  108.         }
  109.         #menu li a {
  110.                 border:none;
  111.                 border-bottom:1px solid #576979;
  112.                 padding:5px 0; /* Поля вокруг текста (верх-низ / лево-право) */
  113.         }
  114.         #menu a {
  115.                 text-align:left;
  116.                 width:100%;
  117.                 text-indent:15px;
  118.         }
  119.         /********** МЕНЮ 2-го уровня **********/
  120.         #menu li ul {
  121.                 display:block;
  122.         }
  123.         #menu li ul a {
  124.                 width:100%;
  125.                 border:none;
  126.                 border-bottom:1px solid #576979;
  127.                 padding:5px 0; /* Поля вокруг текста (верх-низ / лево-право) */
  128.         }
  129.         /********** КОНЕЦ МЕНЮ 2-го уровня **********/
  130.         #nav a#pull {
  131.                 display:block;
  132.                 width:100%;
  133.                 height:50px;
  134.                 background-color:#FFAF00;
  135.                 font-family: "SCConvoy"; /* Шрифт, подгружаемый */
  136.                 font-size: 18px/25px; /* Размер шрифта */
  137.                 font-weight: bold; /* Жирное начертание */
  138.                 color:#000;
  139.                 line-height:50px;
  140.                 position:relative;
  141.                 text-decoration:none;
  142.                 text-indent:5px;
  143.         }
  144.         #nav a#pull:after {
  145.                 content:"";
  146.                 background:url(nav-icon.png);          
  147.                 width:20px;
  148.                 height:20px;
  149.                 display:inline-block;
  150.                 position:absolute;
  151.                 right:15px;
  152.                 top:15px;
  153.         }
  154. }
  155.  
 
 Top
Vladimir Kheifets
Отправлено: 06 Июля, 2017 - 09:40:57
Post Id



Гость


Покинул форум
Сообщений всего: 78
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 2 раз(а)




Добрый день!
Несколько советов:
1. Добавить:
CODE (html):
скопировать код в буфер обмена
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


2. Отказаться от JS для проверки размеров экрана, а использовать только возможности CSS. В CSS отказаться от задания максимальных размеров экрана в явном виде(320px,480px), а использовать 100% и функцию calc
Например:
CODE (html):
скопировать код в буфер обмена
  1. width: -moz-calc(100% - 20px);
  2. width: -webkit-calc(100% - 20px);
  3. width: calc(100% - 20px);

3. В медиа запросах CSS ориентацию лучше проверять так:
CODE (html):
скопировать код в буфер обмена
  1. @media screen and (min-aspect-ratio: 13/9)  
  2. {  
  3.     /*orientation: landscape*/
  4. }    
  5. @media screen and (max-aspect-ratio: 13/9)
  6. {
  7.     /*orientation: portrait*/
  8. }


Можете посмотреть как это работает здесь:
Прикреплено изображение
QR www.alto-booking.jpg

(Отредактировано автором: 06 Июля, 2017 - 09:42:28)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB