Menu responsive

[roberto86pd]

Ciao a tutti,


Sto costruendo un template e sto cercando un menu orizzontale responsive.


Ho provato ad usare il "menu principale" di joomla e sarebbe perfetto ma non č responsive. Cosa posso modificare per renderlo tale?


Ho provato a cercare un menų dal JED ma non ho trovato nulla. Avete consigli?


Grazie

[steganoga]

Ho provato ad usare il "menu principale" di joomla
------------------------------------------------------------------------
no, ne avrai provato uno di quelli presenti nel pacchetto di Joomla e relativi ad un template.
magari bisogna solo leggere e settare qualcosa?

[roberto86pd]

Il template lo sto costruendo da zero utilizzando bootstrap. Ho usato il modulo di Joomla "Menu Principale" pubblicandolo in un modulo a mio piacimento. Il menų usciva verticale cosė ho aggiunto " nav-pills" come suffisso classe menu nelle impostazioni avanzate del modulo.

Ho provato a settarlo in vari modi, anche inserendo delle classi bootstrap ma rimane fisso e diminuendo la larghezza della pagina non diventa responsive.

A me il menų cosė va benissimo, soltanto che vorrei diventasse responsive, quindi verticale diminuendo la larghezza della pagina ;-)

[tomtomeight]

Fai confusione fra moduli e posizione, in genere č il template che genera la posizione responsive personalizzata per il menų.

[roberto86pd]

Ditemi dove sbaglio....

<nav class='menu'>
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
       <div class= "col-md-8"><jdoc:include type="modules" name="menu" style="navbar" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"/><>
      <div class= "col-md-4"><><jdoc:include type="modules" name="newsletter" style="none"/><>
      <>
 
    <>
  <>
<>
</nav>

il menų viene pubblicato ma non č responsive

[giusebos]

hai fatto un minestrone di cocomero e cetrioli

Codice: [Seleziona]

<?php if ($this->countModules('Mainmenu')): ?>
    <div class="main_menu">
<nav id="site-navigation-main" class="navbar" role="navigation">
<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
        <i class="fa fa-bars"></i>
      </button>
    </div>
<div id="main-navbar-collapse" class="collapse navbar-collapse">
<jdoc:include type="modules" name="Mainmenu" style="xhtml" />
</div>
</nav><!-- #site-navigation -->
    </div>
<?php endif; ?>

[roberto86pd]

Grazie mille Giusebos, ho inserito il tuo codice perō ho un problema: visualizzo il menų ma restringendo la pagina perō il menų scompare anzichč collassare 

come posso fare?

[giusebos]

naturalmente devi inserire tutta la parte dei css del caso

[roberto86pd]

ehm... hai un codice tipo? che lo uso.... oppure dove lo trovo?

[giusebos]

un codice tipo, mica č farina che ne metti una manciata, ci devi mettere il codice che serve.

[roberto86pd]

Lo so Giusebos ma il problema č che nonostante il codice php, le classi e il bootstrap giā installato "di serie" su Joomla 3 il menu non collassa restringendo la pagina ma scompare...cosa devo fare? 

[tomtomeight]

Sto costruendo un template e sto cercando un menu orizzontale responsive.

Il menų diventa responsivo dal codice del template, se il template lo stai facendo tu fallo responsivo anche per il menų. Se poi lo stai facendo col solito programma becero allora il discorso diventa improponibile da affrontare nel forum, a norma di regolamento.

[roberto86pd]

Ho risolto parzialmente applicando le regole di Bootstrap.


Il codice del menų č il seguente:

<div class='container'> 
<nav class="navbar navbar-default" role="navigation">


  <!—Logo e pulsante per barra ridimensionata -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Espandi barra di navigazione</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  <>


<!—Elementi della barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><jdoc:include type="modules" name="menu" style="xtml" />
    </ul>
  <>


</nav>  <>

Il menų perō appare verticale cosė sono andato nel modulo Joomla e ho inserito "_nav-pills" sulla classe. Risultato? Il menų funziona in modo orizzontale sulla versione dektop. Perō sulla versione mobile non mi appare verticale ma continua ad essere orizzontale 


So che devo modificare i @media... dicendo di attivare il menų orizzontale nella versione > di x px e di attivare il menų verticale nella versione < di x px.


Ma ho un po' di confusione e non so dove intervenire...


come faccio a scriverlo?

[tomtomeight]

Perché non vedi come fanno gli altri template?
Per il mobile si mette il menų offcanvas.