Скрыть меню при отображении на мобильном телефоне

@usrash · Регистрация: 15.07.2011

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

есть меню нужно скрыть его на мобильном телефоне

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
<div id='menu'><!--стили для меню-->
                    <ul>
                            <li> <a href='#'>Главная </a></li><!--это пункты меню, они будут являться ссылками-->
                            <li> <a href='#'>О играх</a>
                        <ul>
                                <li> <a href='#'>Подраздел 1</a></li>
                                <li> <a href='#'>Подраздел 2</a>
                            <ul>
                                <li> <a href='#'>Подраздел 1.1</a></li>
                            </ul>
                        </ul>
                            <li> <a href='#'>Программирование</a>   <!-- <li> jпределяет отдельный элемент списка-->
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Мобильные телефоны </a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Планшеты и консоли</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Софт</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Прочее</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Форум</a></li>
                    </ul>       
                </div>

в

CSS
1
2
3
#menu{
    display: none;/*  удаляет элемент из документа*/
    }

ноль эмоций

@Пифагор · 13.04.2016, 13:05

Кликните здесь для просмотра всего текста

PHP
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
$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match("/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|'.
    'wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|'.
    'lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|'.
    'mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|'.
    'm881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|'.
    'r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|'.
    'i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|'.
    'htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|'.
    'sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|'.
    'p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|'.
    '_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|'.
    's800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|'.
    'd736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |'.
    'sonyericsson|samsung|240x|x320vx10|nokia|sony cmd|motorola|'.
    'up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|'.
    'pocket|kindle|mobile|psp|treo|android|iphone|ipod|webos|wp7|wp8|'.
    'fennec|blackberry|htc_|opera m|windowsphone)/", $agent)){
    echo '';
}
else {
    echo "<div id='menu'><!--стили для меню-->
                    <ul>
                            <li> <a href='#'>Главная </a></li><!--это пункты меню, они будут являться ссылками-->
                            <li> <a href='#'>О играх</a>
                        <ul>
                                <li> <a href='#'>Подраздел 1</a></li>
                                <li> <a href='#'>Подраздел 2</a>
                            <ul>
                                <li> <a href='#'>Подраздел 1.1</a></li>
                            </ul>
                        </ul>
                            <li> <a href='#'>Программирование</a>   <!-- <li> jпределяет отдельный элемент списка-->
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Мобильные телефоны </a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Планшеты и консоли</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Софт</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Прочее</a>
                        <ul>
                            <li> <a href='#'>Подраздел 1</a></li>
                            <li> <a href='#'>Подраздел 2</a></li>
                        </ul>
                        <li> <a href='#'>Форум</a></li>
                    </ul>       
                </div>";
}

@Jaller · 13.04.2016, 17:30

1) Привязываем еще одни стили к сайту. Ну, можно сделать и в основных, но когда медиа много, то замучаешься их искать, поэтому выводим их в отдельный файл стилей.

HTML5
1
<link href="/css/media.css" rel="stylesheet" type="text/css">

2) Создаем файл в соответствующей директории с соответствующим именем и пишем туда следующее:

CSS
1
2
3
@media screen and (max-width: 400px) {
    #menu {display: none;}
}

Теперь, когда размер экрана будет менее 400px, меню будет пропадать. Соответственно, тут же можно прописать диплей:блок; для меню-гамбургера, чтобы оно выводилось вместо основного.

@usrash · 17.04.2016, 20:52 **[ТС]**

CSS
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
@charset "utf-8";
@media  screen and (max-width: 480px) /* стили дл¤ мобильных устройств*/
 {
    .hide  /* прячем элементы у которых есть такой класс добавл¤ем к классам слово hide (пр¤тать)или show(показывать)затем id*/
    {
        display: none;/*  удаляет элемент из документа*/
    }
    /*   настраиваем как доложны показыватьс¤ основные элементы на смартфоне  */
    header, #contentwrapper, body, footer/*  #contentwrapper это класс дл¤ левой и правой колонок и страницы с содержимым (можно и без клонок делать)*/
        {
        width: 100%;/*  показываем на все 100% ширины экрана */
        margin: 0;
        overflow: hidden; /* ќтображаетс¤ только область внутри элемента, остальное будет скрыто.*/
        }
 
    /* пр¤чем элементы на мобильных устройствах меню и т.д.(все что хотим спр¤тать*/
      
 
      
 
    /*показываем элементы дл¤ мобильного устройства*/
 
        #menu {display: none;}
}
 
@media  screen and (min-device-width:768px) and (max-device-width:1024px)/*стили дл§ планшетов Target iPhone */
    {
        
    }
    /*Target Galaxy Tab*/
@media  screen and (min-width:1280px) and (max-width:1280px)
{
 
}
@media  screen and (min-width:1280px) and (max-width:1280px)
{
    
}
 
@media  screen and (min-width:800px) and (max-width:800px)"
    }
    }

Добавлено через 2 минуты
не сработало

Добавлено через 23 часа 49 минут
жду решения

@usrash · 18.04.2016, 20:01 **[ТС]**

пожалуйста подскажите почему в пикселях не работает только в ем и как их (пиксели)пересчитывать

@denisbelyy · 19.04.2016, 12:02

Добавь в head
<meta name="viewport" content="width=device-width">

@usrash · 20.04.2016, 21:47 **[ТС]**

HTML5
1
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Добавлено через 2 минуты
так что не в этом прболема

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@denisbelyy 0 / 0 / 0 Регистрация: 19.04.2016 Сообщений: 2
	19.04.2016, 12:02
	Добавь в head <meta name="viewport" content="width=device-width"> 0