0 / 0 / 0
Регистрация: 31.03.2014
Сообщений: 5

Не работает мобильное меню select

31.03.2014, 20:23. Показов 2378. Ответов 2
Метки нет (Все метки)

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

Делаю респонсивный сайт с отдельными стилями для мобильной версии. Нужно сделать меню селект для мобильных.
Перепробовала уже кучу скриптов, но почему-то не работает. Сайт на вордпрессе, поэтому начала поиски с подходящего плагина. Все они выводили меню, которое я задавала для мобильной версии в футере. Я так понимаю, что где-то есть конфликт либо с другим скриптом, либо с плагином.

Сейчас использую для меню скрипт:
JavaScript
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
(function($){
 
  //variable for storing the menu count when no ID is present
  var menuCount = 0;
  
  //plugin code
  $.fn.mobileMenu = function(options){
    
    //plugin's default options
    var settings = {
      switchWidth: 960,
      topOptionText: 'Select menu item',
      indentString: '   '
    };
    
    
    //function to check if selector matches a list
    function isList($this){
      return $this.is('ul, ol');
    }
  
  
    //function to decide if mobile or not
    function isMobile(){
      return ($(window).width() < settings.switchWidth);
    }
    
    
    //check if dropdown exists for the current element
    function menuExists($this){
      
      //if the list has an ID, use it to give the menu an ID
      if($this.attr('id')){
        return ($('#mobileMenu_'+$this.attr('id')).length > 0);
      } 
      
      //otherwise, give the list and select elements a generated ID
      else {
        menuCount++;
        $this.attr('id', 'mm'+menuCount);
        return ($('#mobileMenu_mm'+menuCount).length > 0);
      }
    }
    
    
    //change page on mobile menu selection
    function goToPage($this){
      if($this.val() !== null){document.location.href = $this.val()}
    }
    
    
    //show the mobile menu
    function showMenu($this){
      $this.css('display', 'none');
      $('#mobileMenu_'+$this.attr('id')).show();
    }
    
    
    //hide the mobile menu
    function hideMenu($this){
      $this.css('display', '');
      $('#mobileMenu_'+$this.attr('id')).hide();
    }
    
    
    //create the mobile menu
    function createMenu($this){
      if(isList($this)){
                
        //generate select element as a string to append via jQuery
        var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';
        
        //create first option (no value)
        selectString += '<option value="">'+settings.topOptionText+'</option>';
        
        //loop through list items
        $this.find('li').each(function(){
          
          //when sub-item, indent
          var levelStr = '';
          var len = $(this).parents('ul, ol').length;
          for(i=1;i<len;i++){levelStr += settings.indentString;}
          
          //get url and text for option
          var link = $(this).find('a:first-child').attr('href');
          var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();
          
          //add option
          selectString += '<option value="'+link+'">'+text+'</option>';
        });
        
        selectString += '</select>';
        
        //append select element to ul/ol's container
        $this.parent().append(selectString);
        
        //add change event handler for mobile menu
        $('#mobileMenu_'+$this.attr('id')).change(function(){
          goToPage($(this));
        });
        
        //hide current menu, show mobile menu
        showMenu($this);
      } else {
        alert('mobileMenu will only work with UL or OL elements!');
      }
    }
    
    
    //plugin functionality
    function run($this){
      
      //menu doesn't exist
      if(isMobile() && !menuExists($this)){
        createMenu($this);
      }
      
      //menu already exists
      else if(isMobile() && menuExists($this)){
        showMenu($this);
      }
      
      //not mobile browser
      else if(!isMobile() && menuExists($this)){
        hideMenu($this);
      }
 
    }
    
    //run plugin on each matched ul/ol
    //maintain chainability by returning "this"
    return this.each(function() {
      
      //override the default settings if user provides some
      if(options){$.extend(settings, options);}
      
      //cache "this"
      var $this = $(this);
    
      //bind event to browser resize
      $(window).resize(function(){run($this);});
 
      //run plugin
      run($this);
 
    });
    
  };
  
})(jQuery);
Само меню - стандартное меню вордпреса.

При уменьшении экрана меню селект пояаляется, но не работает на с компа, ни с планшета. Хотя с телефона - работает отлично
В чем подвох? И где конфликт?

Сам сайт: http://test.med-ebox.ch

Заранее спасибо.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
31.03.2014, 20:23
Ответы с готовыми решениями:

При клике на мобильное меню открывается и закрывается
На сайте который делала не я и делался очень давно. Перестало работать мобильное меню. Я переписала...

select + select
Спецы! помогите решить задачку, значит есть select1, при выборе обьекта из selecta1 внизу или в...

Перекидывание данных из одного <select>...</select> в другой
Yest dve korobki tipa &lt;select&gt;...&lt;/select&gt;: odna bitkom nabitaya dannimi s bazi dannih, a vtoraya...

2
 Аватар для Артур Аралин
45 / 11 / 8
Регистрация: 21.05.2012
Сообщений: 132
Записей в блоге: 2
31.03.2014, 22:19
А не варит для мобильной версии использовать отдельный layout?
0
0 / 0 / 0
Регистрация: 31.03.2014
Сообщений: 5
31.03.2014, 22:53  [ТС]
Просто сайт то почти готов уже. И для респонсива используются стили разные для разных размеров экранов.
И вот работает все-все, кроме меню этого.

Если есть возможность - там на сайте можно сейчас глянуть. Само меню генерируется, но не на всех устройствах срабатывает..

Добавлено через 23 минуты
По каким вообще причинам селект может работать на телефоне, но не работать ни в одном из браузеров на компе?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
31.03.2014, 22:53
Помогаю со студенческими работами здесь

Нужно сделать так чтобы при выборе некоторых значений в первом select, изменялись значения второго select
Помогите пожалуйста мне нужно сделать так чтобы при выборе некоторых значений в первом select,...

Как сделать <select name="sel" disabled></select> ????
Приветствую всех. Я только новичёк в этом деле. есть такой кусочек кода: &lt;form name='Form'&gt;...

Как при выборе определённого значения поля select показать новое поле select
Такая задача, у меня есть список значений в поле типа select. Value1 Value2 Value3 Value4 При...

Установить позицию комбобокса (<select> </select>)
Здравствуйте, возникла такая проблема: имеется конструкция: &lt;select name='class' size='1'&gt; ...

Отключить элементы select на странице, пока страница не загрузится после выбоар элемента в select
Как это можно сделать ?


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

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

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru