• A
    User Attivo •

    Menu a tendina a 2 colonne

    Salve a tutti,
    sapete come posso realizzare un menù a tendina a due colonne?

    In questo momento cliccando su di un link presente nella barra dei menu, si apre un menu a tendina con una sola colonna, dato che in questo menu ci sono molte voci e non è possibile visualizzarli tutti in una singola colonna vorrei che cliccando sul link si aprisse un menu con due colonne.

    Vi ringrazio anticipatamente per il Vostro aiuto,
    Alfio.

    0
  • E
    User Attivo •

    http://dposorio.com/wordpress/269/white-house-style-navigation-using-jquery-and-superfish/

    0
  • A
    User Attivo •

    Carissimo Elmanisero,
    da come hai potuto dedurre dal mio precedente WPpost è da poco che mi sono avvicinato a WP.

    Ecco il perchè di questi errori banali:

    ho deciso di utilizzare il suggerimento di Istemci (vedi commenti)
    No Superfish and Superfish?s complex CSS for to create a menu like whitehouse.gov

    trovato il commento a cui mi riferisco?

    Bene, allora per prima cosa ho importato la libreria per abilitare jquery

    Ho inserito nel file header prima della funzione <?php wp_head(); ?>
    le seguenti righe:
    <?php wp_enqueue_script('jquery'); ?>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/menu-doble.js" type="text/javascript"></script>

    Successivamente ho creato il file menu-double.js (posizionandolo nella cartella js dello stile) in questo modo:

    $(document).ready(function(){
    var menu_item_length = $('#main-menu>li').length;
    $('#main-menu>li').each(function(i) {
    if (i>(menu_item_length/2))
    $(this).find('ul').css('margin-left', $(this).width()-$(this).find('ul').width());
    });
    $('#main-menu>li').hover(
    function() {
    $(this).addClass('hover');
    $(this).find('ul').css('display', 'block');
    },
    function() {
    $(this).removeClass('hover');
    $(this).find('ul').css('display', 'none');
    }
    );
    });

    E infine ho incollato (in fondo) nel file screen.css il seguente codice:
    #main-menu, * {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Georgia;
    }
    {
    background-color: #185087;
    width: 100%;
    float: left;
    font-size: 12px;
    }
    li {
    border: none;
    display: block;
    float: left;
    }
    a {
    color: #eee;
    text-decoration: none;
    padding: 7px 39px;
    display: block;
    font-weight: bold;
    }
    li.hover a {
    background-color: #fff;
    color:;
    border-top: 3px solid #bd1e12;
    padding-top: 4px;
    }
    ul {
    width: 500px;
    display: none;
    position: absolute;
    z-index: 10;
    border-bottom: 3px solid;
    background-color:;
    padding: 5px 0;
    }
    li.hover ul li {
    width: 250px;
    }
    li.hover ul a {
    color:;
    border: none;
    font-weight: normal;
    text-decoration: none;
    }
    li.hover ul a:hover {
    text-decoration: underline;
    }

    Risultato? Non è cambiato nulla! 😢

    Vi ringrazio anticipatamente per il vostro supporto, spero possa "salvare" anche altre persone.

    0
  • E
    User Attivo •

    Dalla tua descrizione non parli di nessuna modifica del file header.php.
    Ogni tema ha una sua propria chiamata del menu nel file header.php e in quel tutorial non si fa cenno a questa cosa dando per scontato che chi lo attui sappia quale classe usare e nel tuo ultimo esempio in particolare quale id [html]id="main-menu"[/html]Per cui ti consiglio di provare magari cercando anche qualche altro tutorial dove si indichi anche come modificare il file header.php.
    Quel tipo di menu si chiama mega dropdown menu, utilizza queste parole per cercare sul web.
    Aiutarti a cambiare il menu non è cosa che si possa fare senza avere il tema completo a disposizione.

    0
  • A
    User Attivo •

    Caro elmanisero,
    esiste anche un widget per creare il mega dropdown menu (ma non so se la versione attuale è completa o bisogna registrarla) cmq io ho risolto optando per il menu a tendina doppio, a cascata 🙂

    Grazie mille per il tuo aiuto.

    0
  • E
    User Attivo •

    Bene, magari se descrivessi meglio cosa hai fatto potrebbe essere di aiuto per altri.
    Grazie

    0
  • A
    User Attivo •

    Si certo, come dicevo ho optato per il menu a tendina (a cascata), praticamente dato che avevo più elenchi con moltissime voci,
    ho raggruppato per lettera, quindi ho creato delle categorie A-C , D - F, etc..

    es.:
    Menu 1

    • categoria 1 (A-C)
      -- sottocategoria (elenco da A a C)
      -- sottocategoria (elenco da A a C)
      -- sottocategoria (elenco da A a C)

    • categoria 2 (D-F)
      -- sottocategoria (elenco da D a F)
      -- sottocategoria (elenco da D a F)
      -- sottocategoria (elenco da D a F)
      etc..

    Tutto questo creando un menù personalizzato dalla sezione menu del pannello amministrativo di WP.

    0
Effettua l'accesso per rispondere