menu a tendina a scomparsa potete darmi una mano

**quiris!** · 24-04-2020, 18:12

purtroppo non posso far vedere html perche non me lo permette il sistema volevo sapere se questo script è scritto giusto perche non mi funziona va a vuoto quando clicco è un tasto dedicato per smartphone a scomparsa
<script type="text/javascript">
$(document).ready(function(){
$(".header_icon-bar").click(function(e){
$(".header_menu").Toggleclass('.is-open');
e.preventDefault();

});
});

so che purtoppo la domanda e incompleta ma piu di cosi non mi permette di di fare!!!!

**quiris!** · 24-04-2020, 18:14

<body>

<header class="header clearfix">
<a href="" class="header_logo">logo</a>
<a href="" class="header_icon-bar">
<span></span>
<span></span>
<span></span>
</a>
<ul class="header_menu animate">
<li class="header_menu_item"><a href="javascript:apri('popup-tes.html');">contattaci</a></li>
<li class="header_menu_item"><a href="single.html">single</a></li>
<li class="header_menu_item"><a href="page.html">page</a></li>
<li class="header_menu_item"><a href="">item</a></li>
<li class="header_menu_item"><a href="">item</a></li>
</ul>
</header>
<section class="cover">
<div class="cover_caption_filter"></div>
<div class="cover_caption">
<div class="cover_caption_copy">
<h1>primary message of the home</h1>
<h2>subtitle of the home page</h2>
<a href="" class="button">call to action</a>

</div>
</div>
</section>
<section class="cards clearfix">
<div class="card">
<img class="card_image" src="https://source.unsplash.com/collection/190727/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
<div class="card">
<img class="card_image" src="https://source.unsplash.com/category/nature/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
<div class="card">
<img class="card_image" src="https://source.unsplash.com/category/people/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
</section>

<section class="banner clearfix">
<div class="banner_image"></div>
<div class="banner_copy">
<div class="banner_copy_text">
<h3>banner title</h3>
<h4>banner subtitle</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quo quibusdam eligendi nobis eveniet amet! Mollitia culpa expedita cupiditate accusantium qui placeat quasi aliquam nostrum. Ex iusto dolore eligendi consequuntur.</p>
</div>
</div>
</section>

**quiris!** · 24-04-2020, 18:15

section class="cards clearfix">
<div class="card">
<img class="card_image" src="https://source.unsplash.com/collection/190727/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
<div class="card">
<img class="card_image" src="https://source.unsplash.com/category/nature/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
<div class="card">
<img class="card_image" src="https://source.unsplash.com/category/people/400x260"alt="">
<div class="card_copy">
<h3>title card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
</div>
</div>
</section>

<section class="banner clearfix">

<div class="banner_copy">
<div class="banner_copy_text">
<h3>banner title</h3>
<h4>banner subtitle</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quo quibusdam eligendi nobis eveniet amet! Mollitia culpa expedita cupiditate accusantium qui placeat quasi aliquam nostrum. Ex iusto dolore eligendi consequuntur.</p>
</div>
</div>
<div class="banner_image"></div>
</section>

<div class="overlay" id="pop">
<div class="popup">
<h2>Questo è un popup</h2>
<p>Potete utilizzarmi per inserire pubblicità</p>
<p>o per fare un annuncio</p>
<span id="close">X</span>
</div>
</div>

<footer class="footer">
<p>copiright - 2020 picopallinodesign.net</p>

</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".header_icon-bar").click(function(e){
$(".header_menu").Toggleclass('.is-open');
e.preventDefault();

});
});

setTimeout(
function() {
console.log("run");
document.getElementById('pop').style.display="block" ;
}, 2000);

document.getElementById("close").onclick = function(e){
document.getElementById('pop').style.display="none";
}

document.getElementById("pop").onclick = function(e){
document.getElementById('pop').style.display="none";
}

function apri(url) { newin = window.open(url,'titolo','scrollbars=no,resizable=yes, width=200,height=200,status=no,location=no,toolbar =no'); }

</script>

</body>
</html>

**quiris!** · 24-04-2020, 18:16

css
html,body{height: 100%;}
body {background: #eee;}

/*-------------------
general
---------------------*/

animate {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.button{display: inline-block; background: #fff; color: #000; padding: 15px 30px; border-radius: 3px; text-decoration: none;}
p{line-height: 22px;}
a{color: #16dd94;}
a:hover{color: #16dd}
/*-------------------
header
---------------------*/

.header {background:#333;}
.header_logo {color:#fff; float: left;display: block; padding: 20px;text-decoration: none;}
.header_menu {float: right; margin: 0; padding: 0;}
.header_menu_item {display: inline-block;}
.header_menu_item a{color: #fff; display: block;padding: 20px;text-decoration: none;}
.header_menu_item a:hover{background: #000;}

.header_icon-bar{display:block; float: right; padding: 20px; display: none;}
.header_icon-bar span{display:block; height: 3px; width: 30px; background: #fff; margin-bottom: 5px;}
/*-------------------
cover
---------------------*/
.cover{height: 70%;
background-image: url(https://source.unsplash.com/category/buildings);
background-size: cover;
--background-size: cover;
-moz-background-size: cover;
background-position: center center;
position: relative;
}

.cover_caption_filter{
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
opacity: 0.5;
}

.cover_caption{display: table;
height: 100%;
width: 100%;
position: relative;
z-index: 1;
padding:0 20px;
}
.cover_caption_copy{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}

.cover--single{height: 50%;}
.cover--single h1{font-size: 42px;}

/*-------------------
cards
---------------------*/
.cards { max-width: 1200px; margin: 40px auto;}
.card { width: 30%; margin:0 1.5%;background: #fff; float: left;}
.card_image{width: 100%; height: auto;}
.card_copy{padding: 5px 20px;}
.card_copy h3{margin-bottom: 0;}

/*-------------------
banner
---------------------*/
.banner{background: #fff; height: 50%;}
.banner_image{width: 30%; float: left; height: 100%;
background-image: url("https://source.unsplash.com/category/nature/400x400");
background-size: cover;
--background-size: cover;
-moz-background-size: cover;
background-position: center center;
}
.banner_copy{width: 70%; float: left; height: 100%; display: table;}
.banner_copy_text{display: table-cell; vertical-align: middle; padding: 30px;}

.banner_copy_text h3{font-size: 36px; margin-bottom: 0;}
.banner_copy_text h4{font-size: 28px; margin: 5px 0;}

/*-------------------
footer
---------------------*/

.footer{background: #333; padding: 30px; color:#fff; margin-top: 40px;}

/*-------------------
single
---------------------*/

.single
.single_copy{max-width: 800px; margin: 0px auto; margin-top: -40px; background: #fff; padding: 20px 40px;
position: relative; z-index: 1;}
.single_copy_meta{font-weight: bold; font-size: 18px; font-style: italic;}
.single_copy_title{font-size: 32px;}

**quiris!** · 24-04-2020, 18:16

/*-------------------
popup
---------------------*/

.popup{
width: 500px;
height: 400px;
background: #fefefe;
margin: 40px auto;
padding: 10px 20px;
position: relative;
color: #333;
}

.overlay{
position: fixed; /* schermo intero*/
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
background: rgba(0,0,0,0.7); /* colore sfondo e opcità */
text-align: center;
display: none
}

#close{
position: absolute;
top: -20px;
right: -20px;
color: #fff;
}

#close:hover{
cursor: pointer;
}

/*-------------------
popuph1
---------------------*/
.popuph1{width: 500px;
height: 400px;
background: #fefefe;
margin: 40px auto;
padding: 10px 20px;
position: relative;
color: #333;
}

/*-------------------
tablet
---------------------*/
@media (max-width: 998px){
/* banner*/
.banner_image,
.banner_copy{width: 50%; height: 50%;}
}
/*-------------------
page
---------------------*/
.page
.page_copy{margin-top: 20px;}

/*-------------------
smartphone
---------------------*/
@media (max-width: 767px){
.header{position: fixed; z-index: 100; width: 100%;}
.header_icon-bar{display: block;}

.header_menu{width: 100%; height: 0px; overflow: hidden;}
.is-open{height: 300px; overflow: auto;}
/* cover */
.cover{height: 100%;}

/* cards */
.card {width: 90%; margin: 5%;}

/* banner */
.banner{height: 100%;}

.banner_image,
.banner_copy{width: 100%; height: 50%;}

}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

**quiris!** · 24-04-2020, 18:18

ho inviato a spezzoni il codice html spero che possiate trovarmi errore sto impazzendo.
grazie

**KillerWorm** · 24-04-2020, 22:25

Ciao e benvenuto, quando il codice è eccessivo meglio non postarlo in questo modo - ci vuole più tempo a ricomporlo che a trovare l'errore - se hai la pagina online posta direttamente il link altrimenti prova a riprodurre il problema usando un qualche playground (ad es. SoloLearn o JSFiddle o CodePen).

Puoi inoltre verificare tu stesso nella console del tuo browser (F12 per aprirla) se ricevi degli errori di script. In tal caso, se non riesci a risolvere autonomamente, posta le indicazioni compresi i messaggi di errore eventualmente riscontrati nella console.

**KillerWorm** · 26-04-2020, 10:00

Ho visto dove sta il problema.

Questo script a due errori:

codice:

$(".header_menu").Toggleclass('.is-open');

1 - il metodo si chiama toggleClass(), non Toggleclass(). Fai attenzione all'uso delle maiuscole e minuscole. In genere, nel caso di nomi composti, per funzioni e variabili in jQuery si segue quella convenzione che in gergo tecnico viene chiamata "dromedary case" ("notazione a dromedario").

2 - il valore dell'argomento di tale metodo deve essere il nome della classe (o la serie di nomi separati da spazi), escluso il punto "." (che di fatto non è parte del nome).

Prova a correggere in questo modo:

codice:

$(".header_menu").toggleClass('is-open');

**quiris!** · 26-04-2020, 22:46

mi spiace ma ho provato ma non funziona ugualmente

**KillerWorm** · 26-04-2020, 22:53

Bene. Io ho provato ad assemblare quanto hai postato e ciò che ti ho indicato risolve. Provato chiaramente anche sul mio smartphone.

Tu noti lo stesso identico problema anche con quelle correzioni?
Hai verificato sulla console web del tuo browser se riscontri errori di script?
Puoi postare lo script da te corretto (solo lo script senza il resto dell'HTML e del CSS)? Così verifichiamo se hai fatto in modo giusto.

Fai sapere.

Discussione: menu a tendina a scomparsa potete darmi una mano

Strumenti discussione

Ricerca discussione

Visualizza

menu a tendina a scomparsa potete darmi una mano

Permessi di invio