Problemi chiusura menù laterale

nicolato

Nuovo Utente
4 Lug 2014
5
0
1
Ciao a tutti, volevo chiedere un aiuto su una cosa molto banale ma che mi sta facendo uscire pazzo.

Allora, sto creando un menù laterale e voglio che quando clicco su menù scompaia la scritta menù e compaia il menù con una x per chiuderlo. Ho fatto tutto ma l'unico problema è che la x di chiusura mi rimane anche quando il menu non è aperto (come vedete nella foto che ho postato).

Immagine.png

Qualcuno riesce ad aiutarmi con il javascript per far si che scompaia la x quando il menù non è aperto?

vi posto il codice...

Questo è il menù

Codice:
<div class="container">
  <div class="overlay"></div>
  <header>
    <div class="navBtn"><span style="font-size:17px,margin-top:1px;">≡</span> MENU</div>
    <nav> 
	<a href="index.html">Home</a> 
	<a href="#About">About</a> 
	<a href="#Service">Service</a> 
	<a href="#contact">Contact</a> 
	</nav>
	<div class="close"></div>
  </header>
  </div>

Questo è lo script che credo mi crei l'errore

Codice:
<script>
$(document).ready(function () {	

  var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
  };

	//Nav
	$('.navBtn').click(function() {
    toggleMenu();
	});

	$('.close').click(function () {
    toggleMenu();
	});

  
});

</script>

Infine questo è il css

Codice:
.close {
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 30px;
}

.close:before {
    content: "X";
    font-size: 15px;
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
	overflow-y:visible;
}
.close:hover {
    color: #ff3e3e;
	text-decoration:none;
}

nav {
  padding: 80px 0 0 20px;
  overflow: hidden;
  position: absolute;
  transition: .3s ease-out;
  top: 0px;
  left: 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  background: #fff;
  
}

nav  img{
  width:70px;
  position:absolute;
  top:250px;
  left:66px;
  
}

nav a {
  float: left;
  padding: 8px 0 0 0px;
  opacity: 0.5;
  width: 100%;
  margin-left:-22px!important;
  transition: .3s ease;
  font-family: georgia, serif;
  text-align: center;
}

nav a:hover,
.current,
.toggle 
.navBtn { display:none; }


.toggle nav {
  padding-left: -120px!important;
  opacity: 1;
}

.navBtn {
  font-size:14px;
  font-weight:bold;
  margin: 30px 0 0 0px;
  width: 100%;
  text-align: center;
  -webkit-transform: rotate(0deg);
  transition: .3s ease-out;
  display: block;
  cursor: pointer;
  position: absolute;
  z-index: 99999999!important;
  opacity: 0.5;
  left: 0;
  font-family: arial, sans-serif;
}

.toggle .navBtn {
  color: #333;
  left: -41.5px;
}

.navBtn:hover { opacity: 1; }

.block { display: block; }


Vi ringrazio anticipatamente....
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi aggiungere questo nel css
Codice:
display: none;
in questo modo quando apri la pagina sarà nascosto
e aggiungere alla funzione toggleMenu
Codice:
$('.close').toggle();
 

nicolato

Nuovo Utente
4 Lug 2014
5
0
1
Grazie mille per il consiglio ma non ho ancora risolto del tutto, probabilmente perchè sto sbagliando qualcosa.

allora questo l'ho modif
Codice:
$(document).ready(function () {	

  var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
  };

	//Nav
	$('.navBtn').click(function() {
    toggleMenu();
	});
	
	$('.close').toggle();

	$('.close').click(function () {
    toggleMenu();
	});

  
});

mentre il css in questo modo

Codice:
.close {
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 30px;
	display: none;
}

.close:before {
    content: "X";
    font-size: 15px;
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
	overflow-y:visible;
	display: none;
}
.close:hover {
    color: #ff3e3e;
	text-decoration:none;
}

tuttavia è sparita la x ma anche nel menù!La posso cliccare ma non si vede!
mi basterebbe che la x si vedesse e poi sarei apposto...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
$('.close').toggle(); devi metterlo nella funzione toggleMenu
Codice:
var toggleMenu = function() {
	  $('header').toggleClass('toggle');
	  $('.main').toggleClass('push');
	  $('.overlay').toggleClass('block');
	  $('#social, .logo').toggleClass('reveal');
          $('.close').toggle();
  };
edit
e display: none; devi metterlo solo nella classe .close {
 

nicolato

Nuovo Utente
4 Lug 2014
5
0
1
Perfetto ora funziona tutto benissimo...Sei un grande!Ti ringrazio infinitamente!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non mi ero accorto che i tuoi messaggi non erano visibili; ho appena sistemato.
Dai un occhiata qui.
 
Discussioni simili
Autore Titolo Forum Risposte Data
P problemi di chiusura con la query PHP 3
L Problemi con chiusura di popup e passaggio argomenti Javascript 0
D Problemi apertura chiusura pop-up Flash 1
T Problemi con la chiusura dei Popup PHP 0
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
S Problemi Javascript + Aruba Javascript 2
A Problemi con move_uploaded_file PHP 7
M Problemi con la stampa dei valori in php PHP 1
L Problemi con il login PHP 2
L Problemi form Pagina php HTML e CSS 3
R Tutto su utf-8 ma ancora problemi con i caratteri speciali in mysql MySQL 1
Z problemi con foreach insert into PHP 10
B javascript per problemi con pdf e Safari Javascript 0
N Problemi kit videosorveglianza IP Cam e Videosorveglianza 0
M Problemi con creazione maschere Presentati al Forum 1
M Problemi con query a più tabelle PHP 3
R Problemi anomalo insermento in db PHP 9
S Problemi delle funzioni eliminate con PHP e MySQL PHP 4
S Problemi di un principiante PHP 3
M Problemi con blog Grav CMS (Content Management System) 0
F Problemi di visualizzazione di un sito su più browser WordPress 0
S Problemi di visualizzazione form contatti sito web HTML e CSS 2
S incoerenza di stampa. problemi con il magenta Photoshop 3
A problemi con paypall Java 1
A Problemi di accesso da remoto a Ipcam IP Cam e Videosorveglianza 6
michele81 [WordPress] problemi plug meteo api key WordPress 4
E Problemi in registrazione telecamere Dahua IP Cam e Videosorveglianza 6
felino [Windows 8.1] Problemi con connessione WiFi Windows e Software 0
M [PHP] Problemi su inserimento array nel db PHP 7
E [PHP] problemi nuova riga con fwrite su piattaforma android PHP 5
M [PHP] Problemi di salvataggio su campo calcolato PHP 0
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
M [PHP] Problemi con query unione PHP 11
M [PHP] Problemi con select PHP 6
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
ANDREA20 [HTML] problemi con il footer HTML e CSS 1
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
M [PHP] Problemi con il riconoscimento login. PHP 21
A [WordPress] problemi con xampp WordPress 2
M Problemi con database Apache/2.4.37 (Win32) OpenSSL/1.1.1a PHP/7.3.1 PHP 6
P Problemi comunicazioni Comunicazioni dallo Staff 8
G I problemi non vengono solo per nuocere Presentati al Forum 0
A Problemi Wi-Fi Fastweb Reti LAN e Wireless 4
C [WordPress] Url vulnerability e problemi sito da mobile WordPress 0
S [PHP] problemi con le sessioni PHP 3
B Problemi accesso Instagram Smartphone e tablet 1
T [PHP] problemi con il browser PHP 0
M [Flash] Problemi conversione formato swf Flash 20
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1

Discussioni simili