Преобразование меню WordPress в выпадающий список для мобильных браузеров

Question

Преобразование меню WordPress в выпадающий список для мобильных браузеров

2 дек. 2012 г., 08:41:47

Просмотры: 16.7K

Голосов: 1

Я работаю над проектом на WordPress с адаптивной темой.

У меня есть одноуровневое навигационное меню в верхней части сайта, которое я хочу заменить на тег Select Option для мобильных браузеров (маленькие экраны), с опциями для пунктов навигации, что гораздо удобнее для выбора на мобильной версии сайта. Таким образом, меню UL LI будет заменено на Selection-Option для мобильных устройств.

Однако, я не могу понять, как преобразовать меню WordPress в выпадающий список select.

Krunal

221

меню мобильный адаптивный

Все ответы на вопрос

Комментарии

Выглядит очень подробно.. Я займусь этим завтра и сообщу вам о результатах. Спасибо

Krunal

2 дек. 2012 г. 13:47:28

Если ваше меню включает дочерние элементы, следующий код отлично работает (вместо приведённого выше JavaScript):

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "MENUID");
   jQuery("ul#MENUID > li:has(ul)").addClass("hasChildren");
   jQuery("ul#MENUID > li:has(ul) > ul > li > a").addClass("isChild"); 
});

jQuery(function() {
    jQuery("<select />").appendTo("nav");
    jQuery("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Перейти к...",
    }).appendTo("nav select");

    jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text(),
           "class"   : el.attr("class")
       }).appendTo("nav select");
    });

    jQuery("nav select").change(function() {
      window.location = jQuery(this).find("option:selected").val();
    });    
 });

 jQuery(document).ready(function() {
   jQuery("nav select option").each(function() {
     var el = jQuery(this);
     if(el.hasClass("isChild")){
       jQuery(el.prepend("- "))
     }
 });
});

Nathanial Hesse

11

3 мая 2013 г. 22:46:34

просто используйте этот плагин. Он лучше, чем обычное выпадающее меню

https://wordpress.org/plugins/wp-responsive-menu/

Nirmal Ram

110

5 мар. 2014 г. 09:58:31

Jeremy Jared 3.36K · Accepted Answer · 2012-12-02T09:53:49Z

Вот что я собрал из разных статей/тем:

Файлы для изменения:

functions.php

header.php

style.css

js (создать папку "js" в корневой директории темы)

JavaScript код:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Перейти к..."
      }).appendTo("nav select");
      jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      jQuery("nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val();
      });    
     });

Сохраните как custom.js и поместите в папку js вашей темы.

Файл functions.php:

Откройте файл functions.php вашей темы, найдите код, который подключает существующие стили или скрипты, и добавьте это в init:

wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) )

Добавьте эту строку. Если ваша тема не использует систему очередей, добавьте это в functions.php:

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );
    }
  }
  add_action('init','add_themescript');

Файл header.php:

Замените/добавьте текущий CSS id или класс навигации WordPress следующим образом:

<nav>...Код навигации вашей темы здесь</nav>

CSS:

@media only screen and (min-width: 480px) {
/* == ПРОМЕЖУТОЧНЫЙ: Меню == */
#navigation-wrapper, nav ul a, nav ul {
width:75%;
font-size:82%;
}
nav ul {
width:90%;
}
nav a, .next-post a{
float:left;
margin:0 1%;
padding:5px 1%;
margin-bottom:0;
}
nav li:first-child a{
margin-left:0;
}
nav li:last-child  a{
margin-right:0;
}
/* == ПРОМЕЖУТОЧНЫЙ: Исправления для IE == */
nav ul li{
display:inline;
}
}
nav{
width:100%;
float:left;
background:#e44d26;
margin-bottom:9px;
padding:5px 0px 5px 0px;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     {
display: none;
}
nav select {
display: inline-block;
}
}

Настройте CSS стили по своему вкусу.