Menu a tendina a 2 colonne

[AlfioP]

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.

[elmanisero]

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

[AlfioP]

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, #main-menu * {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Georgia;
}
#main-menu {
background-color: #185087;
width: 100%;
float: left;
font-size: 12px;
}
#main-menu li {
border: none;
display: block;
float: left;
}
#main-menu a {
color: #eee;
text-decoration: none;
padding: 7px 39px;
display: block;
font-weight: bold;
}
#main-menu li.hover a {
background-color: #fff;
color: #185087;
border-top: 3px solid #bd1e12;
padding-top: 4px;
}
#main-menu ul {
width: 500px;
display: none;
position: absolute;
z-index: 10;
border-bottom: 3px solid #bd1e12;
background-color: #fff;
padding: 5px 0;
}
#main-menu li.hover ul li {
width: 250px;
}
#main-menu li.hover ul a {
color: #185087;
border: none;
font-weight: normal;
text-decoration: none;
}
#main-menu 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.

[elmanisero]

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

id="main-menu"

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.

[AlfioP]

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.

[elmanisero]

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

[AlfioP]

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.