Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Emilia Romagna - Modna
    Messaggi
    52

    Chiedo aiutone per capire come aggiungere sottomenu al mio menu

    Ciao a tutti e buone feste!

    Stò cercando, pur senza aver grandi capacità e conoscenze, di svecchiare il mio sitarello,
    ho copiato e modificato a mio piacere/capacità un template free ricavandone questo esempio
    http://www.cfsystem.it/news/tutti-index.html
    il menù c'è ma vorrei aggiungere sottomenu a tenda che si aprano a fianco o sotto in modo da suddividere meglio.

    Ho fatto varie prove, cercato di capire con l'aiuto di amici e www.w3schools.com, ma non riesco a ottenere nulla di accettabile ..

    Sotto PRODOTTO per SFUSO, alla 5° riga ho messo Soluzioni per prodotti SFUSI
    e sotto ho messo le voci di esempio che vorrei apparissero come sottomenu ... ma non mi riesce di farlo funzionare correttamente

    Vorrei chiedere aiuto ad un amico paziente che abbia la capacità di dirmi come modificare il codice in modo che il sottomenu resti aperto quando passo su Soluzioni per prodotti SFUSI ma anche quando scendo nel sottomenu e che mi spieghi come fare per formattare meglio sia il titolo menu che i sottomenu (immagino serva lavorare anche con i css ... che capisco poco ... )

    Spero di non aver chiesto troppo (lo sò che ho chiesto troppo, ma punto tutto sul buon samaritano paziente e sullo spirito natalizio ;-P) e di poter trovare aiuto

    Per ora grazie e a presto! ^__^

  2. #2

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Emilia Romagna - Modna
    Messaggi
    52
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    Ciao Vincent, grazie, ho tentato ma faccio solo più confusione perchè è completamente (per quello che capisco io) diverso dal mio...
    Saresti in grado di farmi capire cosa dovrei cambiare/aggiungere/togliere nel mio esempio per farlo funzionare correttamente?

    Grazie in ogni caso

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao reggio, ho visto ciò che stai tentando di fare ma in quella pagina ci sono vari errori (anche proprio nel codice del menu) per cui non è possibile consigliarti qualche semplice modifica; a mio parere bisogna necessariamente rielaborare meglio il tutto.

    Alcuni di questi errori possono essere verificati attraverso un validatore (vedi questo) e quindi corretti a livello di codice; è chiaro che a quel punto bisogna sapere dove mettere le mani.

    Quote Originariamente inviata da reggio
    (immagino serva lavorare anche con i css ... che capisco poco ... )
    Direi che serve lavorare soprattutto con i CSS. Se vuoi metterci mano tu è indispensabile studiare e avere chiari quei concetti e quelle nozioni utili per potersi approcciare al moderno web design. Il consiglio è sempre quello di leggere qualche guida, magari iniziando da quelle di base in modo da apprendere i meccanismi di funzionamento del CSS oltre che di HTML; diversamente, per chi vorrebbe aiutarti, viene difficile anche cercare di spiegarteli.

    Quote Originariamente inviata da reggio
    (lo sò che ho chiesto troppo,
    Lo hai detto. Anche per la "semplice" modifica che stai cercando di fare, bisogna avere una buona conoscenza di CSS oltre che di HTML: come funziona il box model, il posizionamento degli elementi e l'interazione con essi e vari altri meccanismi di funzionamento.

    A parte i vari errori nel resto della pagina, riguardo al menu posso giusto indicarti questi punti che vanno rivisti:

    Hai usato degli id duplicati. Gli id devono necessariamente essere univoci all'interno dello stesso documento. Usa invece le classi; vedi qualche guida per comprendere le differenze tra id e class.

    Gli elementi <a>, di norma, è meglio usarli solo dove ci sono effettivamente dei link. Non è buono usare dei link vuoti o fittizi solo per sopperire ad un layout male impostato. Se serve, puoi usare invece dei semplici contenitori (<span>) formattati opportunamente col CSS.

    Hai usato CSS in linea in modo ridondante e inutile (ad esempio quel width:250px; per ogni singolo <li>). Intanto avresti potuto metterlo solo per gli elementi contenitori <ul>, poi è sempre meglio evitare di sporcare la struttura HTML col CSS in linea, è preferibile invece mantenere tutto il CSS separato dalla struttura (come già ti ho indicato nell'altra discussione).

    Diversi elementi sono fuori posto oltre che essere superflui se non inutili. Vedo un <div> (questo <div id="iddeldiv">) che hai messo come figlio di un <ul> per raggruppare il sottomenu; chiaramente è un errore, i figli di <ul> possono solo essere elementi <li>. L'id che hai usato non si può nemmeno vedere, a quel punto sarebbe stato meglio metterci id="pippo"; ma a mio parere non ti serve né id né l'intero <div>, meglio elaborare la struttura in modo più lineare e che sia il più pulita possibile, il CSS farà poi tutto il lavoro sporco.

    Capisco che alcuni di questi errori siano magari dovuti al fatto che stai facendo delle prove, ma (senza offesa) è chiaro che sei carente di una buona base indispensabile per poter affrontare un lavoro del genere.

    Per capire e spiegarti come e dove poter intervenire ci vorrebbe un intero wikipedia. Non mi sembra il caso, quindi ti posto un elaborato di come imposterei personalmente la cosa, eventualmente fai qualche prova e se hai domande, riguardo il codice e il s funzionamento, chiedi pure.

    Qui un codePen di esempio.

    Qui il CSS (con qualche commento) da mettere in un file esterno oppure in un tag <style> dentro <head>:
    codice:
    .bar-top-menu{                                              /* Container bar */
      display: flex;
      justify-content: center;
      width: 100%;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .bar-top-menu *{                                            /* Reset box model */
      box-sizing: border-box;
    }
    ul.top-menu{                                                /* Menu wrapper level 1 */
      display: flex;
      padding: 0;
      margin: 0;
      font: 15px 'Montserrat', sans-serif;
    }
    ul.top-menu ul{                                             /* Menu wrapper any level */
      width: auto;
      min-width: 80px;
      white-space: nowrap;
      display: none;
      position: absolute;
      margin: 0;
      padding: 0;
      border-style: solid;
      border-width: 0 1px 1px;
      box-shadow: 0 2px 6px -3px #000;
    }
    ul.top-menu > li > ul{                                      /* Submenu wrapper level 2 */
      left: 0;
      font-size: .75em;
    }
    ul.top-menu ul ul{                                          /* Submenu wrapper level 3+ */
      top: 0;
      left: 100%
    }
    ul.top-menu li:hover > ul{                                  /* Submenu wrapper open */
      display: block;
      z-index: 1;
    }
    ul.top-menu li{                                             /* Menu items any level */
      position: relative;
      list-style-type: none;
    }
    ul.top-menu > li{                                           /* Menu items level 1 */
      margin: 0;
      padding: 0;
    }
    ul.top-menu ul > li{                                        /* Submenu items */
      width: 100%;
    }
    ul.top-menu a{                                              /* Link elements any level */
      color: inherit;
      text-decoration: none;
      outline: none;
    }
    ul.top-menu li > a:first-child,                             /* Menu items label any level */
    ul.top-menu li > span:first-child{
      display: inline-block;
      position: relative;
      border-style: solid;
      border-width: 1px 0;
      font-weight: normal;
      text-align: left;
      text-transform: none;
      letter-spacing: normal;
      line-height: normal;
      cursor: pointer;
    }
    ul.top-menu > li > :first-child{                            /* Menu items label level 1 */
      padding: 10px 11px;
    }
    ul.top-menu ul > li > a:first-child,                        /* Submenu items label */
    ul.top-menu ul > li > span:first-child{
      width: 100%;
      padding: 4px .9em;
    }
    ul.top-menu li{                                             /* Separator with text */
      text-align: center;
      letter-spacing: .2em;
      line-height: 2;
      cursor: default;
    }
    ul.top-menu li:empty{                                       /* Empty separator */
      height: 7px;
    }
    ul.top-menu > li > :first-child:not(:last-child):before{    /* Menu items arrow level 1 */
      content: "\25BE";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: .3em;
      font-size: .9em;
      text-align: center;
      line-height: 0;
      transform: scaleX(2);
      opacity: .7;
    }
    ul.top-menu ul > li > :first-child:not(:last-child):before{ /* Submenu items arrow */
      content: "\25B8";
      position: absolute;
      right: 0;
      font-size: .9em;
      line-height: 1.3;
      transform: scaleY(2);
      opacity: .7;
    }
    
    /* ------------------------------------- COLORS ------------------------------------- */
    
    .bar-top-menu{                                              /* Container bar */
      background: #28529e;
    }
    ul.top-menu ul{                                             /* Submenu wrapper */
      border-color: #aaa;
    }
    ul.top-menu > li > :first-child{                            /* Menu items level 1 */
      color: #fff;
      border-color: transparent;
    }
    ul.top-menu > li:hover > :first-child{                      /* Hover menu items level 1 */
      background: #eef2f8;
      color: #000;
    }
    ul.top-menu ul > li > a:first-child,                        /* Submenu items */
    ul.top-menu ul > li > span:first-child{
      background: #dfdfdf;
      color: #000;
      border-top-color: #eef2f8;
      border-bottom-color: transparent;
    }
    ul.top-menu ul > li:hover > a:first-child,                  /* Hover submenu items */
    ul.top-menu ul > li:hover > span:first-child{
      background: #eef2f8;
      color: #000;
      border-color: #aaa;
    }
    ul.top-menu > li.active > :first-child{                     /* Active menu item level 1 */
      background: #fff;
      color: #26282a;
      border-color: #eef;
    }
    ul.top-menu ul > li.active > a:first-child,                 /* Active submenu item */
    ul.top-menu ul > li.active > span:first-child{
      background: #fff;
      border-color: #aaa;
    }
    ul.top-menu ul > li{                                        /* Separator */
      background: #5771a1;
      color: #fb5;
      border-color: #555;
    }
    .
    Qui il codice HTML dove ho inserito giusto le voci dell'attuale struttura nella tua pagina:
    codice HTML:
    <nav class="bar-top-menu">
       <ul class="top-menu">
          <li class="active"><a href="#">HOME</a></li>
          <li><span>Prodotti per SFUSO</span>
             <ul>
                <li><a href="#">Serie TN medio leggera</a></li>
                <li><a href="#">Serie TPN medio pesante</a></li>
                <li><a href="#">Serie TNDP Nastri trasportatori Pesatori</a></li>
                <li><span>Soluzioni per prodotti SFUSI</span>
                   <ul>
                      <li><a href="#">Primo sottomenu Pietro</a></li>
                      <li><a href="#">Secondo sottomenu</a></li> 
                      <li><a href="#">3° sottomenu</a></li> 
                      <li><a href="#">VI sottomenu</a></li> 
                      <li><a href="#">Fifth sottomenu</a></li> 
                      <li><a href="#">IIIIII sottomenu</a></li> 
                   </ul>
                </li>
                <li><a href="#">Serie EDILVEYOR Nastri per Edilizia</a></li>
                <li></li>
                <li><a href="#">Serie WOODVEYOR Nastri per Legna</a></li>
                <li><a href="#">Serie EN Estrattore a nastro per tramogge</a></li>
                <li></li>
                <li><a href="#">Serie ETM Estrattore a TAPPARELLE</a></li>
                <li></li>
                <li><a href="#">Serie ET Elevatore a TAZZE</a></li>
                <li><a href="#">Serie ETL Elevatore a TAZZE leggeri</a></li>
                <li></li>
                <li><a href="#">Serie BND Elevatore a nastro SAGOMATO</a></li>
                <li><a href="#">Serie BND-L Elevatore a nastro SAGOMATO</a></li>
                <li></li>
                <li><a href="#">Serie BDL Estrattore silos a bocca di lupo</a></li>
                <li></li>
                <li><a href="#">Serie SBB Svuota big bags</a></li>
                <li></li>
                <li><a href="#">Serie PDP Ponte di pesatura</a></li>
                <li></li>
                <li><a href="#">Contatore sfere Allumina</a></li>
             </ul>
          </li>
          <li><a href="#">Prodotti per CONFEZIONATO</a>
             <ul>
                <li><a href="#">Rulliere motorizzate</a></li>
                <li><a href="#">Nastri per alimentazione Confezionatrici</a></li>
                <li><a href="#">Rulliere folli RF Serie leggera</a></li>
                <li><a href="#">Rulliere estensibili ES allungabili</a></li>
                <li><a href="#">Nastri trasportatori su misura in lamiera</a></li>
                <li><a href="#">Nastri trasportatori su misura in alluminio</a></li>
                <li><a href="#">Sushi conveyors per ristoranti</a></li>
                <li><a href="#">Nastro display presentatori</a></li>
             </ul>
          </li>
          <li><a href="#">Strumenti</a>
             <ul>
                <li><a href="#">Colori RAL</a></li>
                <li><a href="#">Zincatura Sendzimir</a></li>
                <li><a href="#">Tabelle Pesi specifici</a></li>
                <li><a href="#">Tabelle Protezione IP</a></li>
                <li><a href="#">Tabelle Dilatazione</a></li>
                <li><a href="#">Tabelle Attrito</a></li>
                <li><a href="#">Tabelle Tolleranza Fori</a></li>
                <li><a href="#">Tabelle Tolleranza Alberi</a></li>
                <li><a href="#">Cosa sono i Nastri trasportatori</a></li>
                <li><a href="#">Tabelle Trasportatori a nastro in gomma</a></li>
             </ul>
          </li>
          <li><a href="#">NEWS</a>
             <ul>
                <li><a href="#">Novità ultime realizzazioni</a></li>
             </ul>
          </li>
           <li><a href="#">Noi</a>
             <ul>
                <li><a href="#">Chi siamo</a></li>
                <li><a href="#">Dove siamo</a></li>
                <li><a href="#">Scrivi una mail</a></li>
                <li><a href="#">FOTO</a></li>
                <li><a href="#">VIDEO</a></li>
                <li><a href="#">NOVITÀ</a></li>
                <li><a href="#">ASSISTENZA</a></li>
                <li><a href="#">RICAMBI</a></li>
                <li><a href="#">CERTIFICAZIONI</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">CONTATTI</a></li>
             </ul>
          </li>
       </ul>
    </nav>
    Puoi notare come ho cercato di mantenere la struttura HTML il più pulita possibile.

    Prova e fai sapere.
    Buon proseguimento.
    Ultima modifica di KillerWorm; 09-01-2020 a 02:01 Motivo: correzione codice
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.