Menu responsive

**dami93** · 09-05-2017, 11:13

Buongiorno ragazzi

Sono alle prese con un grosso scoglio, premetto che sono le prime volte che cerco di ottenere questo risultato. Ho un problema con la creazione di un toggle menu per Tablet e Smartphones. Per ora ho agito senza successo la logica di svariati tutorial di Youtube:

Ho cercato l'immagine del menu toggle su Internet e l'ho inserita nella struttura Html del mio sito rendendolo un link <a href="#" class="toggle-nav"><img src=""></a> prima del menu classico <ul id="nav"><li></li>...........</ul>.

Nel Css oltre alla formattazione in se dell'elemento toggle( width e height) l'ho reso invisibile nella risoluzione per lo schermo (.toggle-nav{display:none}) e tramite una media query ho fatto in modo che appaia in dispositivi tablet e smartphones sostituendosi al menu classico (#nav{display:none} .toggle-nav{display:block}).

Infine ho utilizzato jquery per fare in modo che cliccando sul toggle appaia il menu.
$(document).ready(function(){
$('.toggle-nav').click(function(){
$('#nav').slideToggle();
)};
});

Evidentemente mi sfugge qualcosa, poiché non ho ottenuto alcun risultato potete aiutarmi?

Grazie

**Roby140569** · 09-05-2017, 12:24

Il consiglio che posso darti è quello di cercare di avere una visione d'insieme del responsive design, piuttosto che cercare dei pezzettini di codice online e andare avanti (quasi) alla cieca.
Qui una guida: http://www.html.it/guide/responsive-...sign-la-guida/

Posta il codice della tua pagina, senza diventa difficile darti una mano.
Inserisci il codice che posterai all'interno dei tag [ C O D E ] e [ / C O D E ].

**dami93** · 09-05-2017, 16:17

QUESTA è la struttura tml, premetto che subito prima di </body>(ora non c'è) ho messo uno script con un collegamento ad un file js con il codice jquery identico a quello che ti ho scritto sopra in un messaggio successivo ti linko la parte css

codice:

<!DOCTYPE html>
<html>
    <head>
        <title>Home-page</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/stile.css" type="text/css">
        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
        <script type="text/javascript" src="Js/jquery.js"></script>
        <script type="text/javascript">
$(document).ready(function () {    
    
    $('#nav li').hover(
        function () {
            //mostra sottomenu
            $('ul', this).stop(true, true).delay(50).slideDown(100);

        }, 
        function () {
            //nascondi sottomenu
            $('ul', this).stop(true, true).slideUp(200);        
        }
    );
    

});
</script>
    </head>
    <body>
        <div class="container">
        
        <!-- Intestazione della pagina -->
        <header>
                <p class="logo">
                    <img src="img_logo/Logo__piccolo.jpg">
                </p>
                <p class="Titolo">
                    <h1>1778 Tradizionale Infiorata Genzano di Roma</h1>
                </p>
        </header>
        
        <!-- Menu di navigazione principale -->
         <a href="#" class="toggle-nav"> <img src="toggle.png"> </a>
        <ul id="nav">
                <li class="first"><a href="#"><span style="color:#C00">Home</span></a></li>
                <li><a href="#">Infiorata</a>
                    <ul>
                        <li><a href="Nostra_Trad.html">La Nostra Tradizione</a></li>
                        <li><a href="Hanno_detto.html">Hanno detto che..</a></li>
                    </ul>
                </li>
                <li><a href="Evento.html">Evento</a></li>    
                <li><a href="#">Archivio foto</a>
                <ul>
                    <li><a href="Trad_Infiorata.html">Tradizionale Infiorata</a></li>
                    <li><a href="Infiorata_ragazzi.html">Infiorata dei Ragazzi</a></li>
                    <li><a href="Infiorata_pane.html">Infiorata di Pane</a></li>
                    <li><a href="Infiorate_Est.html">Infiorate Estemporanee</a></li>
                    <li><a href="Pittori_Ospiti.html">Pittori Ospiti</a></li>
                    <li><a href="Stilisti_Ospiti.html">Stilisti Ospiti</a></li>
                    <li class="last"><a href="Personaggi_Ospiti.html">Personaggi Ospiti</a></li>
                </ul>            
                    <div class="clear"></div>
                </li>
                <li><a href="Ringraziamenti.html">Ringraziamenti</a></li>
                <li class="last" ><a href="Bibliografia.html">Bibliografia</a></li>
        </ul>
        
        <!-- Contenuto della pagina-->
        <section>
            <div>
                <div class="tagline">
                    <h3>Benvenuti!</h3>
                    <p>
                        Una delle pi&ugrave belle manifestazioni di arti effimere da non perdere per nulla al mondo.<br><br>
                        Vi aspettiamo numerosi
                    </p>
                </div>
                <div id="slider" class="nivoSlider">
                    <img src="img_carousel/carousel1.jpg" alt="realizzazione delle opere su strada">
                    <img src="img_carousel/carousel2.jpg" alt="realizzazione delle opere su strada">
                    <img src="img_carousel/carousel5.jpg" alt="realizzazione delle opere su strada">
                    <img src="img_carousel/carousel6.jpg" alt="realizzazione delle opere su strada">
                </div>
            </div>
        </section>
        
        <!-- Pié di pagina-->
        <footer>
        
            <div>
            <div class="contatti"><a href="Contatti.html"> Contatti</a></div>
            <div class="master"> Webmaster: Damiano Riello</div>
            </div>
            <p>
            Copyright      &#9400 1999 Sito Ufficiale dell'Accademia dei Maestri Infioratori
            </p>
        </footer>
        </div>
        <script type="text/javascript" src="Js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="Js/jquery.nivo.slider.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
          $('#slider').nivoSlider({
            effect: 'slideInLeft',
            animSpeed: 1000, 
            pauseTime: 6000,
            directionNav: false,
            controlNav: false,
            });
        });
        </script>
    </body>
</html>

**dami93** · 09-05-2017, 16:24

la media query è alla fine

codice:

* {
    margin: 0;
    padding: 0;
}



.container {
    margin-right: auto;
    margin-left: auto;
    font-size:100%;
    max-width: 60em;
}

@font-face {
    font-family: Cardinal Alternate;
    src: url(../font/Cardinal-Alternate.ttf);
}

body {
    background-color:black;
}

/* Intestazioni */

header {
    overflow:hidden;
    height:9.895%;
    width:100%;
}

.logo{
    float:left;
    width:21.875%;
}

.Titolo{
    float:left;
    width:78.125%;
}
    
.logo img{
    width:95px;
    height:95px;
}
    
h1{
    font-size:2.0625em;
    text-align:left;
    font-family: Cardinal Alternate;
    color:white;
    margin-top:4.166%;
    
}
h3 {
    font-family: Palatino Linotype;
    font-size:1.875em;
    margin-bottom:12.5%;
    text-align:center;
}

h4{
    font-family: Palatino Linotype;
    font-size:1.5625em;
    margin-bottom:1.086%;
    text-align:center;
}


/* Menu di Navigazione*/

#nav {
        list-style:none;
        text-align:center;
        margin-bottom:1.041%;
    }
    #nav li {
            display:inline-block; 
            width:155px;
            height:45px;
            background: -webkit-linear-gradient(#F5BD9D, #F58E62); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#F5BD9D, #F58E62); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#F5BD9D, #F58E62); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#F5BD9D, #F58E62); /* Standard syntax */
            position:relative;
            z-index:500; 
            -webkit-transition: all 0.1s ease-in-out;
    
    }
#nav li.first {
            border-radius:5px 0 0 5px;
            -moz-border-radius:5px 0 0 5px;
            }
        #nav li.last {
            border-radius:0 5px 5px 0;
            -moz-border-radius:0 5px 5px 0;
            }
        #nav li li.last {
            border-radius:0 0 5px 5px;
            -moz-border-radius:0 0 5px 5px;
            }
        #nav li a {
            display:block; 
            font-weight:700;  
            line-height:2.5em; 
            font-size:1.125em;
            text-decoration:none; 
            text-align:center; 
            color:black;
        }

        #nav li :hover {
             
          background: -webkit-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* Safari 5.1 to 6.0 */
          background: -o-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* For Opera 11.6 to 12.0 */
          background: -moz-radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* For Firefox 3.6 to 15 */
          background: radial-gradient(#F5A46E,#F5BD8C,#F5BA93); /* Standard syntax */;
                }
                
        #nav li a:hover{
            color:#C00;
        }
        #nav li li:hover {
            -webkit-transform: translate(+10px,0);
            }
    
        #nav a.selected {
            color:#C00;
        }
    
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none; 
        }
        
        #nav ul li {
            width:200px;
            float:left; 
            border-top:1px solid black;
            background: -webkit-linear-gradient(#F5BD9D, #F58E62); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#F5BD9D, #F58E62); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#F5BD9D, #F58E62); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#F5BD9D, #F58E62); /* Standard syntax */
        }
        
        #nav ul a {
        
            display:block;  
            line-height:1.875em; 
            padding: 8px 5px; 
            color:black;
        }
        /* fix ie6, meglio inserirlo in un file .css separato */
        *html #nav ul {
            margin:0 0 0 -2px;
        }

    .toggle-nav{
       display:none;
    }
        
/*Contenuto delle pagine */        

section {
    background-color:#FFFBBD;
    min-height:190px;
}
section div {
    overflow:hidden; 
}

div.tagline{
    float:left;
    width:45.833%; 
    padding:2.083%;
    text-align:center;
    
}

div.tagline p{
    font-family:Palatino Linotype;
    font-size:1.4375em;
    
}

#map{
    float:right;
    width:50%;
}

#map iframe{
    width:100%;
    height:375px; 
    border:0;
}

.archivio {
    padding:2.083%;
}


caption {
        font-family:Palatino Linotype;
        font-weight:700;
        font-size:1.25em;
        border-top:2px solid;
        border-left:2px solid;
        border-right:2px solid;
        border-radius:5px  5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        background: -webkit-linear-gradient(#FF6E63,#FF1F1F); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#FF6E63, #FF1F1F); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#FF6E63, #FF1F1F); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#FF6E63, #FF1F1F); /* Standard syntax */
        
}

caption:hover{
          
          background: -webkit-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* Safari 5.1 to 6.0 */
          background: -o-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* For Opera 11.6 to 12.0 */
          background: -moz-radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* For Firefox 3.6 to 15 */
          background: radial-gradient(#FF4B45,#FF6E63,#FFB3B3); /* Standard syntax */;    
}

table {

    margin-right: auto;
    margin-left: auto;
    text-align:center;
    border:2px solid black;
    font-family:Palatino Linotype;
    font-size:1.125em;
    font-weight:700;
    background-color:#5C5C5C;
    border-radius: 0 0 5px  5px;
    -moz-border-radius: 0 0 5px  5px ;
}


td{
    width:6.25%;
    height:2.604%;
    border:2px solid;
    padding:0.208%;
    background-color:#D1D1D1;
    border-radius:5px  5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
}


table.elenco td{
    width:23.437%;
    height:2.604%;
    border:2px solid;
    padding:0.520%;
    text-align:left;
    background-color:#D1D1D1;
    border-radius:5px  5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
}

table.estemporanee td{
    width:26.041%;
    height:55px;
    text-align:left;
    border:2px solid;
    padding:0.312%;
    background-color:#D1D1D1;
    border-radius:5px  5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
}

a[href]{text-decoration:none;
        color:black;

}

a:hover {color:#1F1F1F}


div#bibliografia{
    font-family:Palatino Linotype;
    font-size:1.0625em;
    padding:3.125%;
    
}

div#bibliografia li{
    
    list-style-type:circle;
    margin-bottom:3.125%;
}

 div#bibliografia li span {
    font-weight:900;
 }
 
 div.description{
    width:47.916%;
    float:left;
    padding:1.041%;
    
 }
 
 div.description p{
    font-family:Palatino Linotype;
    font-size:1.0625em;
 }
  
  div.description p> span {
    font-weight:900;
  }
 
 div.ringraziamenti{
     width:50%;
     height:380px;
     float:left;
    
 }
 
  div.ringraziamenti img{
    width:480px;
    height:380px;
 }
    
  div.infiorata{
         width:50%;
         float:left;
         height:600px;
    }
    
 div.infiorata img{
         width:480px;
         height:600px;
    }
    
    div.citazioni{
         width:50%;
         float:left;
         height:800px;
        
        
    }
    
 div.citazioni img{
         width:480px;
         height:800px;
    }
    
img.contatti {
    -moz-border-radius: 180px;
    -webkit-border-radius: 180px;
    border-radius: 180px;
    width:200px;
    height:200px;

    }
    
    div.galleria{
        text-align:center;
        padding:2.083%;
        overflow:hidden;
        position:relative;
    }
    
    div.galleria p{
    text-align:left;
    position:absolute;
    top:20px;
    left:20px;;
    
    }
    
    div.galleria li{
        
        display:inline-block;
        margin-left: 1.354%;
    }

    div.galleria img{
    
        margin-top:10px;
        border:2px solid;
        border-radius:10px;
        box-shadow:5px 5px 3px 3px ;
        width:150px;
        height:150px;
    }
    
    


/* Piè di pagina*/

footer {
    background: -webkit-linear-gradient(#FF7247, #FF5E36); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FF7247, #FF5E36); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FF7247, #FF5E36); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FF845E, #FF5E36); /* Standard syntax */
    width:97.916%;
    padding:1.041%;
    margin-top:1.041%;
    font-weight:strong;
    border-radius:5px;
}
footer div {
    overflow:hidden;
    width:97.916%;
    font-family:Palatino Linotype;
    font-size:19px;
    font-weight:bold;
}

footer div .contatti{
    float:left;
    width:71.385%;
}

footer div .master{
    float:left;
    width:26.531%;
}

footer p {
    text-align:center;
    margin-top:3.125%;
    font-family:Palatino Linotype;
    font-size:1.125em;
    font-weight:bold;
    
}




/*============================*/
/*=== Stili per lo slider ===*/
/*============================*/
#slider {
    height:380px;
    margin:0px auto;
    float:left;
    width:50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width:480px;
    height:380px;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(../images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

@media screen and (min-width: 768px) {
 .toggle-nav{display:block};
 #nav {display:none}

}

**Roby140569** · 09-05-2017, 17:15

Correggi così la media query e dimmi se, in questo modo, al cambiare delle dimensioni della pagina, ti sparisce il menu orizzontale e ti appare il toggle.

codice:

@media screen and (max-width: 768px) {
 .toggle-nav{display:block}
 #nav {display:none}

}

Resta valido il mio suggerimento di leggerti una buona guida.

**dami93** · 09-05-2017, 18:05

Si mettendo max width appare, il problema è che cliccando il toggle, non appare il menu sotto, nonostante l'istruzione jquery. Una settimana fa avevo letto un aguida in base alla quale per avere un sito responsive occorrono grandezze relative e utillizzo di media query per ora ho fatto la prima e sto cercando di fare laseconda.

Discussione: Menu responsive

Strumenti discussione

Ricerca discussione

Visualizza

Menu responsive

Permessi di invio