Conversia meniului WordPress în dropdown pentru mobile

Question

Conversia meniului WordPress în dropdown pentru mobile

2 dec. 2012, 08:41:47

Vizualizări: 16.7K

Voturi: 1

Lucrez la un proiect WordPress cu o temă responsive.

Am un meniu de navigare cu un singur nivel în partea de sus a site-ului, pe care doresc să îl transform într-un tag Select Option pentru browserele mobile (ecrane mici), cu opțiuni pentru elementele de navigare, care este mult mai ușor de selectat pe versiunea mobilă. Astfel, meniul UL LI va fi înlocuit cu un tag Selection-Option pentru mobile.

Totuși, nu reușesc să aflu cum să transform meniul wp într-un dropdown cu select-option.

Krunal

221

meniuri mobil responsive

Toate răspunsurile la întrebare

Comentarii

Pare foarte cuprinzător.. O să fac asta mâine și te voi anunța. Mulțumesc

Krunal

2 dec. 2012 13:47:28

Dacă meniul tău include elemente copil, următorul cod funcționează bine (în locul scriptului JavaScript menționat anterior):

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"    : "Navighează la...",
    }).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 mai 2013 22:46:34

folosește simplu acest plugin. Este mai bun decât un simplu meniu derulant

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

Nirmal Ram

110

5 mar. 2014 09:58:31

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

Iată ce am adunat din diferite articole/teme:

fișiere de modificat:

functions.php

header.php

style.css

js (creează folderul "js" în directorul rădăcină al temei)

Javascript-ul:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Mergi la..."
      }).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();
      });    
     });

salvează ca custom.js și plasează în folderul js al directorului temei.

Fișierul functions.php:

Deschide fișierul functions.php al temei și localizează codul care încarcă orice stiluri sau scripturi existente și adaugă asta la init:

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

. adaugă această linie la Dacă tema ta nu încarcă, adaugă asta în fișierul 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');

Fișierul header.php:

Înlocuiește/adaugă id-ul sau clasa CSS curentă a wp-nav după cum urmează:

<nav>...Codul de navigare al temei tale aici</nav>

CSS-ul:

@media only screen and (min-width: 480px) {
/* == INTERMEDIAR: Meniu == */
#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;
}
/* == INTERMEDIAR: Remedieri 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;
}
}

Ajustează stilul CSS după preferințe.