Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 0
Регистрация: 31.03.2014
Сообщений: 5

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

31.03.2014, 20:23. Показов 2365. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через 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
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru