.elementor-46 .elementor-element.elementor-element-2510e15c:not(.elementor-motion-effects-element-type-background), .elementor-46 .elementor-element.elementor-element-2510e15c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-46 .elementor-element.elementor-element-2510e15c > .elementor-container{min-height:80px;}.elementor-46 .elementor-element.elementor-element-2510e15c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-46 .elementor-element.elementor-element-2510e15c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );font-style:var( --e-global-typography-text-font-style );}.elementor-46 .elementor-element.elementor-element-a43e55a img{width:39%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-menu-toggle{margin-left:auto;background-color:#00000000;font-size:19px;border-width:0px;border-radius:0px;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:500;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-accent );padding-top:20px;padding-bottom:20px;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main .elementor-item:hover, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main .elementor-item.highlighted, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed .elementor-item:before, .elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed .elementor-item:before{border-width:5px;}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 5px 5px;}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:5px 5px 0 0;}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:5px 0 0 5px;}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 5px 5px 0;}.elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-underline .elementor-item:after, .elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-overline .elementor-item:before, .elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-double-line .elementor-item:before, .elementor-46 .elementor-element.elementor-element-45e099fb .e--pointer-double-line .elementor-item:after{height:5px;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-menu-toggle{color:var( --e-global-color-accent );}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown{background-color:#f2f2f2;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a:hover, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a.highlighted, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-menu-toggle:hover{color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a:hover, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-ae51129 );}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown a.elementor-item-active{color:#FFFFFF;background-color:#FFFFFF;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown .elementor-item, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-46 .elementor-element.elementor-element-45e099fb div.elementor-menu-toggle{color:var( --e-global-color-accent );}.elementor-46 .elementor-element.elementor-element-45e099fb div.elementor-menu-toggle:hover{color:#05FEF0;}.elementor-widget-search-form input[type="search"].elementor-search-form__input{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );font-style:var( --e-global-typography-text-font-style );}.elementor-widget-search-form .elementor-search-form__input, .elementor-widget-search-form .elementor-search-form__icon, .elementor-widget-search-form .elementor-lightbox .dialog-lightbox-close-button, .elementor-widget-search-form .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-widget-search-form.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{color:var( --e-global-color-text );}.elementor-widget-search-form .elementor-search-form__submit{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );font-style:var( --e-global-typography-text-font-style );background-color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form{text-align:left;}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__toggle i{font-size:40px;width:40px;height:40px;background-color:#FFFFFF00;}.elementor-46 .elementor-element.elementor-element-6f285ae5.elementor-search-form--skin-full_screen .elementor-search-form__container{background-color:rgba(0,0,0,0.87);}.elementor-46 .elementor-element.elementor-element-6f285ae5 input[type="search"].elementor-search-form__input{font-size:35px;}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__input, .elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__icon, .elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-lightbox .dialog-lightbox-close-button, .elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-46 .elementor-element.elementor-element-6f285ae5.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{color:var( --e-global-color-accent );}.elementor-46 .elementor-element.elementor-element-6f285ae5:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-color:var( --e-global-color-accent );border-radius:3px;}.elementor-46 .elementor-element.elementor-element-6f285ae5.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-color:var( --e-global-color-accent );border-radius:3px;}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__toggle{color:#FFFFFF;border-color:#FFFFFF;}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__toggle:hover{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-6f285ae5 .elementor-search-form__toggle i:before{font-size:calc(62em / 100);}@media(min-width:768px){.elementor-46 .elementor-element.elementor-element-4aaaed7a{width:28.274%;}.elementor-46 .elementor-element.elementor-element-2c9d65f1{width:67.165%;}.elementor-46 .elementor-element.elementor-element-291518f7{width:4.561%;}}@media(max-width:1024px){.elementor-46 .elementor-element.elementor-element-2510e15c{padding:30px 20px 30px 20px;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:45px !important;}}@media(max-width:767px){.elementor-46 .elementor-element.elementor-element-2510e15c{padding:20px 20px 20px 20px;}.elementor-46 .elementor-element.elementor-element-4aaaed7a{width:50%;}.elementor-46 .elementor-element.elementor-element-2c9d65f1{width:35%;}.elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-46 .elementor-element.elementor-element-45e099fb .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:35px !important;}.elementor-46 .elementor-element.elementor-element-291518f7{width:15%;}}/* Start custom CSS for section, class: .elementor-element-2510e15c */.elementor-46 .elementor-element.elementor-element-2510e15c.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5)!important } .elementor-46 .elementor-element.elementor-element-2510e15c{ transition: background-color 4s ease !important; } .elementor-46 .elementor-element.elementor-element-2510e15c.elementor-sticky--effects >.elementor-container{ min-height: 80px; } .elementor-46 .elementor-element.elementor-element-2510e15c > .elementor-container{ transition: min-height 1s ease !important; } /*** Menu ***/ #mainmenu ul {margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;} #mainmenu ul li {float: left;margin: 0 0px 0 0;position: relative;} #mainmenu a {color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;} #mainmenu a:hover {background:#666;} /* Button Responsive Menu*/ .btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin: 0px 20px 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);} .show{display:block!important} Da notare che il pulsante .btn-responsive-menu allo stato di default è nascosto tramite il codice display:block. Ora tramite la media query @media (max-width: 767px) { … } andiamo a nascondere il menu e mostrare il pulsante quando il dispositivo ha una larghezza di un iPad on un iPhone. @media (max-width: 767px) { /* Header */ #site-title a {font-size:25px;margin-left:10px;} #mainmenu {display:none;} #mainmenu ul li {float: none;} .btn-responsive-menu{display:block;} } Con la propietà #mainmenu ul li {float: none;} andiamo a “linearizzare” i link, impilandoli verticalmente e fancedoli occupare ognuno l’intera grandezza dello schermo. Questa struttura ottimizza il menu per l’uso mobile con link più grandi e facilmente cliccabili. C’è da ricordare che non abbiamo un mouse per cliccare ma utlizziamo le dita. Per far si che quando si clicca il pulsante .btn-responsive-menu venga visualizzato il div #mainmenu utlizziamo il metodo toggleClass() di jQuery. Questo aggiunge e toglia la classe .show con display:block al contenitore, visualizzando e nascondendo il menu. $(".btn-responsive-menu").click(function() { $("#mainmenu").toggleClass("show"); }); Per “triggerare” il menu viene utilizzato jQuery ma la visualizzazione avviene tramite i CSS (la classe .show con display:block visualizza il menu). Javascript si usa solo per “triggerare”, questo perchè su mobile le animazioni jQuery come slideDown() danno problemi. Cosi abbiamo una struttura che si ottimizza per il mobile, nascondendo e visualizzando il menu con un pulsante, aumentando l’area dei link. Stay tuned! DEMO DOWNLOAD CONDIVIDI SU FACEBOOK CONDIVIDI SU TWITTER Responsive Potrebbero interessarti: Slider Responsive Full Screen con testi animati utilizzando Flex Slider Slider Responsive Full Screen con testi animati utilizzando Flex Slider Come costruire un Sito Web Responsive Come costruire un Sito Web Responsive Creare un Parallax Design accattivante e Responsive con Bootstrap Creare un Parallax Design accattivante e Responsive con Bootstrap Realizzare un Layout a griglia Responsive con Isotope Realizzare un Layout a griglia Responsive con Isotope 10 Commenti LUCA ha detto: 15 Aprile 2015 alle 20:16 Ciao, non si possono fare i sottomenu? dove clicchi e ti apre appunto il sottomenu? Rispondi AFMARCHETTI ha detto: 30 Maggio 2015 alle 10:52 Ciao Luca, si devi creare una la struttura html corretta e poi animarla con jquery. Rispondi ANTONIO ha detto: 12 Ottobre 2015 alle 16:40 Ciao, Visto che per l’header sto utilizzando un immagine gif avrei bisogno di spostare più in basso il pulsante Button Responsive Menu. Ho cercato di agire sui margini della .icon-bar ma senza successo. Mi piacerebbe sapere come risolver il problema. Grazie per l’aiuto Rispondi ALESSANDRA ha detto: 10 Novembre 2015 alle 18:26 Ciao, non riesco a far funzionare questo menu con Firefox su Android. Ho provato sia da smartphone che da tablet. C’è modo di risolvere questo problema? Grazie Rispondi MAX ha detto: 31 Agosto 2016 alle 09:35 Ciao, articolo molto interessante e utile per chi è alle prime armi. L’unica cosa è che non vengono spiegate le righe di codice complete che si trovano nel file da scaricare…Ci sono istruzioni che non conosco (quelle di javascript ad esempio, oppure le googleapis, o i vari “if”…”end if”). Cosa significano e quando /come vanno usate? In ogni pagina? Ci sono libri che le spiegano bene? Sarebbe interessante vedere articoli su queste cose prossimamente sul sito. Grazie Rispondi AFMARCHETTI ha detto: 31 Agosto 2016 alle 12:17 Ciao Max, le “googleapis” sono per inserire il font da google font, gli if/end che vedi sono per mostrare un messaggio di aggiornare il browser se il sito viene visualizzato con versioni vecchie di IE. Entrambe queste cose non interferiscono con il menu, la cui logica è dentro il document ready 😉 Rispondi MAX ha detto: 31 Agosto 2016 alle 13:19 Ti ringrazio per la risposta. Quindi significa che entrambe le cose non sono obbligatorie in ogni pagina, giusto? Ma uno alle prime armi come me come le impara queste cose secondarie? Tu come hai fatto? Ciao Rispondi MAX ha detto: 31 Agosto 2016 alle 13:28 Sarebbe bello vedere una serie di articoli dedicati a queste cose… dove mettere le istruzioni jquery/javascript, gli end/if, font google, ecc… Rispondi NICOLA ha detto: 17 Febbraio 2017 alle 14:18 Ciao Andrea, ottima guida! Volevo integrare a questo sistema di menu quello di overlay, ossia di comparsa dello stesso su tutta la pagina solo in caso di visita via mobile, mentre da desktop lasciarlo direttamente nella modalità da te elencata. Credo sia abbastanza fattibile, ma sono un po’ alle prime armi e volevo sapere se avevi giusto qualche consiglio. Grazie infinite! Rispondi YUNIESKYS ha detto: 13 Agosto 2020 alle 14:27 Ottima guida, grazie per il tuo contributo. vorrei sapere si e possibile creare un menu senza javascript. Grazie mille Rispondi Lascia un commento Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati * Nome * Email * Sito web Do il mio consenso affinché un cookie salvi i miei dati (nome, email, sito web) per il prossimo commento. Rss Feed dei commenti Cerca Accedi alla community e ricevi video, tips e consigli su WooCommerce. Accedi ora > Accedi al gruppo Facebook e ricevi video, tips e consigli su WordPress. Accedi ora > Iscriviti alla community riceverai tutte le risorse realizzate nei video e le ultime news sul mondo del Web Design. Accedi ora > SHARE Marchetti Design Blog Tutti gli articoli Video WordPress Responsive Creare Un Sito One Page Scroll Parallax Bootstrap Map Guide Mega Raccolta WP I migliori Tutorial WordPress Bootstrap Efficace Html/Css Modulare Tema WordPress da zero Next Level WordPress Guida Html e CSS Javascript jQuery Sketch CSS float Corsi Next Level WP PRO Next Level Woo PRO Next Level Web DEV Creare un eCommerce da Zero Themes Wlow Theme Fullby Theme Swipy Theme Gridby Theme Portfolio Siti Web Progetti About About Me Contact Inizia da qui! © Copyright 2021 Marchetti Design Privacy Policy - Cookie Policy P.Iva 02463210183 Top Questo sito raccoglie dati statistici anonimi sulla navigazione mediante cookie, nel rispe/* End custom CSS */