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

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

31.03.2014, 20:23. Показов 2354. Ответов 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
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru