Protostar - menu mobile

[byman64]

Salve a tutti, sapete come poter creare o impostare i menu del template protostar per i mobile.


Intendo dire cosi' come avviene per la parte Admin quando la vedi da un mobile o riduci la finestra.


Oppure come per i menu della documentazione di joomla.


Ad esempio i menu del sito ufficiale di joomla per la documentazione funzionano esattamente come vorrei io.
http://docs.joomla.org



Vedi screenshots allegati


grazie a tutti





[allegato eliminato automaticamente dopo un anno]

[Parossismo]

Credo sia una funzione di bootstrap framework:
http://getbootstrap.com/components/#navbar

Come vedi dalle schermate, è esattamente quello che cerchi tu. Se trovi il modo di implementarlo in Joomla, faccelo sapere naturalmente...

[allegato eliminato automaticamente dopo un anno]

[claudiocarrera]

Bisogna fare override del menu per bootstrap come dice Parossismo, ma bisogna anche inseire degli if dicendo "se il link è della voce di menu è uguale a #, allora inserisci questa classe al link", se invece è cosi, metti classe ecc..." se serve ti allego un esempio veloce veloce ma poi per adattarlo al template dovrai vedere tu

[byman64]

Si grazie, posta pure...mi sta diventando un'ossessione...pensa che con jQuery avevo iniziato a crearlo...

www.byman.it

Mentre qui ho un comportamento diverso del menu ... scroll...fixed...


www.quakearea.com


ciao
grazie

[claudiocarrera]

E su base boostrap 2, puoi farlo anche se usi la 3
Prima di tutto area del menu la crei cosi:

Codice: [Seleziona]

<div class="navbar">
                  <div class="navbar-inner">
                      <div class="container">
                        <div class="row">
                            <div class="span12">
                              <a class="btn btn-navbar pull-left" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                              [/url]
                                  <div class="nav-collapse">
                                      <jdoc:include type="modules" name="position-7" />
                                  </div>
                              </div>
                          </div>
                    </div>
                </div>
</div>

Il menu quindi devi caricarlo su position-7
Poi tramite ovverride cambi il file default_url.php e inserisci questo:

Codice: [Seleziona]

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';
if ($item->menu_image)
    {
        $item->params->get('menu_text', 1) ?
        $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
        $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
}
else { $linktype = $item->title;
}
$flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));

switch ($item->browserNav) :
    default:
    case 0:
?>
<?php if ($flink !='#') { ?>
<a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?>[/url]

<?php } else { ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $linktype; ?><b class="caret">[/url]
<?php
};
        break;
    case 1:
        // _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title; ?> class="be"><?php echo $linktype; ?>[/url]<?php
        break;
    case 2:
        // window.open
        $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$params->get('window_open');
            ?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?>[/url]<?php
        break;
endswitch;


Ora quando vuoi fare il menu a tendina, crei una voce di menu padre come url esterno e come link dai #, mentre le sottovoci figli li dai quello che vuoi.

in pratica $flink quarda che valore è stato impostato all'url, se url è uguale a #, inserisce:
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $linktype; ?><b class="caret">
se invece è diverso da #, carica il link normalmente

[byman64]

Sorry for delay...grazie per la risposta...


Ero preso dal lavoro e la sera provavo a far funzionare il meno dropdown....ma quando ci sono aggiornamenti mi aspettavo una mail  ...controllero meglio la mia posta.


Sono riuscito tramite jQuery e un po' di css, ma la tua soluzione mi sembra molto piu' elegante e corretta. Quindi provero' a riadattare quanto ho imparato mescolando il tutto con i tuoi suggerimenti.


Quanto ho fatto è visibile sul mio sito principale ma visto che ci lavoro è meglio che posto pure delle immagini in modo da lasciar traccia dello stato attuale.


In sostanza a me piace il nav-pills come look del menu main e quando passo ad uno schermointegrandolo con dropdown.


http://www.byman.it


Non appena termino le modifiche postero' tutto.


Qui potete trovare come ottenere il pulsante menu "mobile" e al suo click far visualizzare il menu.


http://www.byman.it/site/index.php?option=com_content&view=article&id=258:protostar-mobile-menu&catid=39:joomla&Itemid=154


gtg

















[allegato eliminato automaticamente dopo un anno]

[claudiocarrera]

Visto il link, più o meno è quello che ti ho segnato io con delle classi diverse, il problema è che fatto così ti crea il pulsante ecc...   ma non puoi fare le sottovoci di menu, dovrai comunque modificare il file default_url.php .