Menu codice?

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Salve, qualcuno sa dove posso trovare i codici per creare un menu con queste caratteristiche?
Menu laterale sinistra Fixed (che segue lo scrollbar) con un barra ricerca all'interno del menu(in cima) che cerca scritte internamente al menu. E poi con certi link che aprono pagina menù tipo ce browser lo si clicca, sparisce e esce ( dentro menu) crome firefox safari etc.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
I menu te l'ho trovato:
- http://www.raggiorosso.com/Style/Examples/007/menus.html

Il cerca basta che lo inserisci al posto della prima voce del Menù.
È quel: "...che cerca scritte internamente al menu..." che non capisco se vuoi che trovi risultati tra le voci del menù (insensato ma ciò che fa capire) oppure se vuoi che trovi i risultati tra le pagine (quindi nel corpo) e che magari te li elenchi.

Per quello che intendi con appare e scompare immagino tu intenda il fatto di avere delle voci submenu, che puoi realizzare con qualunque modulo già creato su internet cercando con le parole chiave:
- submenu
- accordion

Accordion è il nome dell'effetto grafico dei menu che si espandono e si richiudono (solitamente per le voci submenu ma non necessariamente) proprio come una fisarmonica e ne esistono a palate sia per l'effetto orizzontale che per quello verticale (che è quello che cerchi tu).
Questi nella maggior parte dei casi vengono realizzati con librerie js quali scriptaculous, jquery....

Spero di esserti stato di aiuto, Ciao.
 

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
I menu te l'ho trovato:
- http://www.raggiorosso.com/Style/Examples/007/menus.html

Il cerca basta che lo inserisci al posto della prima voce del Menù.
È quel: "...che cerca scritte internamente al menu..." che non capisco se vuoi che trovi risultati tra le voci del menù (insensato ma ciò che fa capire) oppure se vuoi che trovi i risultati tra le pagine (quindi nel corpo) e che magari te li elenchi.

Per quello che intendi con appare e scompare immagino tu intenda il fatto di avere delle voci submenu, che puoi realizzare con qualunque modulo già creato su internet cercando con le parole chiave:
- submenu
- accordion

Accordion è il nome dell'effetto grafico dei menu che si espandono e si richiudono (solitamente per le voci submenu ma non necessariamente) proprio come una fisarmonica e ne esistono a palate sia per l'effetto orizzontale che per quello verticale (che è quello che cerchi tu).
Questi nella maggior parte dei casi vengono realizzati con librerie js quali scriptaculous, jquery....

Spero di esserti stato di aiuto, Ciao.
Ciao, grazie per aver risposto...
comunque ho trovato il menu per me:
HTML:
<html><head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head><body><nav class="main-nav" id="main-nav">
	<a href="#">blabla</a>
	</div>
</div>
</nav>

<div class="page-wrap">

  <header class="main-header">
    <a href="#main-nav" class="open-menu">
      Apri menu
    </a>
    <a href="#" class="close-menu">
      Chiudi
    </a>
  </header> 
  </div>
  
</div>
</div></body></html>
Codice:
* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

a {
  text-decoration: none;
}

.main-header {
  background: linear-gradient(#3f94bf, #246485);
  padding: 5px;
  text-align: center;
  color: white;
  text-shadow: #222222 0px -1px 1px;
  position: fixed;
  width: 100%;
  left: 0;
  transition: all 0.3s ease;
}
.main-header a {
  position: absolute;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 32px;
}

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow: hidden;
  transition: width 0.3s ease;
}
.main-nav a {
  display: block;
  background: linear-gradient(#3e3e3e, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2e2e2e;
  color: white;
  padding: 15px;
}
.main-nav a:hover, .main-nav a:focus {
  background: linear-gradient(#484848, #383838);
}
.main-nav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  background: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.content {
  padding: 100px 20px 20px 20px;
}

.close-menu {
  display: none;
}

#main-nav:target {
  width: 20%;
}

#main-nav:target + .page-wrap {
  width: 80%;
}
#main-nav:target + .page-wrap .open-menu {
  display: none;
}
#main-nav:target + .page-wrap .close-menu {
  display: block;
}
#main-nav:target + .page-wrap .main-header {
  width: 80%;
  left: 20%;
}

Ho fatto 1 po di prove per metterci 1 barra di ricerca che cerca e mostra i risultati istantaneamente e internamente al menu e che quindi appare e scompare con il menu... (senza successo) e anche a metterci degli accordion (preferirei uno che apre chiudendo l' altra sezione aperta) (Senza successo...) e ovviamente se il contenuto dentro accordion supera i limiti della pagina si aprisse 1 scrollbar che fa scendere... è troppo un casino :S
sapresti per caso come farlo? grz
 
Ultima modifica:

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Aggiorno, Accordion ancora non mi funziona... e nemmeno la barra di ricerca ma alzando i problemi progredendo... mettendo quel menu' ho notato che quando si clicca Chiudi va sempre al top pagina e se metto lo javascript void 0 lo si può cliccare e non va al top ma il menu non si chiude e quindi nullo... Come ultima cosa... è possibile far rimanere invariato il menu se si cambia il link? Cioè se è aperto rimane aperto e se ha aperto 1 accordion rimane aperto con l'accordion aperto(es: passando da home a musica il menu rimane nello stesso status di quando era su home).
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Scusami se non ti ho risposto ma IO avrei bisogno di vedere almeno la pagina, questo perchè in js ci bazzico poco e nulla quindi non saprei aiutarti su questo.
Se mandi un link della pagina dove lo hai messo, guardo e cerco di aiutarti come posso..
Ciau
 

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Sistemato il menu che non varia in tutte le pagine ma, il resto ancora non va... la pagina è aeonline.it ma la sto sistemando attualmente.
I problemi che ho sono:( accordion dei link, chiusura menu che va al top della pagina quando si chiude, barra di ricerca che cerca all'interno di 1 pagina o in 1 lista di link mostrate in tempo reale, e uno scroll bar invisibile per il menu(visibile l'ho già messo e funziona).
 
Ultima modifica:

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Ciao,
mi sono messo poco fa a dare un'occhiata al tuo sito ed al codice che hai postato.
Partiamo con il codice che hai postato:

Ho notato che subito dopo il link "blabla" hai chiuso 2 DIV che nemmeno sono stati aperti (immagino che uno di questi dovesse chiudere il tag NAV che però hai chiuso subito dopo le chiusure dei suddetti DIV.

Stessa cosa subito prima della chiusura del tag body (</body>) hai chiuso altri due DIV che non sono stati aperti da alcuna parte.

L'indentazione del codice è sbagliata quindi mi permetto di riscriverti il codice HTML che avevi postato ma in modo corretto con indentazione e senza i tag superflui:
HTML:
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>

		<nav class="main-nav" id="main-nav">
			<a href="#">blabla</a>
		</nav>

		<div class="page-wrap">
			<header class="main-header">
				<a href="#main-nav" class="open-menu">Apri menu</a>
				<a href="#" class="close-menu">Chiudi</a>
			</header>
		</div>

	</body>
</html>

E fin qui ci siamo, io non so adesso come funziona il sorgente del CSS che hai scritto ma a meno che le CLASSI e gli ID che ci sono non servano ad altri porzioni di codice che hai nel tuo sito, sono totalmente inutili molti di questi ma non l'ho toccato quindi non sto a riscrivertelo.

Veniamo adesso al sito Web che hai scritto:
- Già lo sfondo mi piace (te lo posso fregare? XD) ma proverei con altri colori da abbinare al rosso e nero del menu e del footer.
- Il menu in orizzontale secondo me è venuto alla perfezione e per questo ti voglio domandare: "lo vuoi togliere? se si, perchè?".
- Anche per il footer ti faccio i miei complimenti perchè è azzeccatissimo.

Vorrei consigliarti se vuoi aggiungere dei link di inserirli in modo statico (intendo senza effetto scomparsa) magari sempre nella colonna di destra o di sinistra.

L'unica pecca per adesso è la parte centrale, quella dei contenuti:
Ho visto che per esempio l'elenco degli anime non ha sfondo e quindi si vede tutto lo sfondo del BODY (secondo me troppo noioso).

Apparte per il menu (per il quale hai aperto il tread) mi farebbe piacere aiutarti se hai bisogno, ma per quello non posso dirti altro se non trovare un qualche script su internet in JS o PHP o altro già pronto e funzionante perchè io non li ho mai implementati, quindi non saprei da dove rifarmi se non nel controllo della correttezza del codice.
 

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Certo prendi pure lo sfondo se ti serve qualche immagine con grafica chiedimelo pure... comunque devo ancora sistemare il menu... sai come posso non farlo andare in cima alla pagina quando chiudo? di link nulli ci sarebbero solo "#" o "Javascript Void(0)" ma con il primo, mi sposta sempre in top alla pagina e con il secondo il menù non si chiude anche se ce class="close-menu">. Poi lo scrollbar all'interno del menu può diventare invisibile? comunque hai skype? laterratrema1 è il mio contatto... attualmente ci sto lavorando da solo ma mi piacerebbe avere aiuti e commenti per migliorare...! Il "secondo sfondo" cioè qualcosa che fa da sfondo al contenuto e mostra comunque lo sfondo principale lo avevo già in mente ma per adesso sto lavorando sulle cose che vanno su tutte le pagine (header footer menu).
 
Ultima modifica:

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Up! Un altro problema oltre a quelli già inseriti... In pratica come faccio a collegare 2 parti di stile? Esempio a href etcetc 'index.php#main-nav' = menu aperto 'index.php#one' = accordion aperto quindi, se io volessi entrambi aperti, dovrei mettere 'index.php#main-nav#one' ? O come?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Più che due parti tu forse intendi più fogli di stile che si applicano alle diverse parti della pagina.
Esempio:

style.CSS >> Foglio di stile della struttura
nav.CSS >> Foglio di stile dei menu laterali SX e DX
footer.CSS >> Foglio di stile del Footer

Se è questo allora basta dichiararli nell'HEAD dell'html della pagina tutti insieme:
HTML:
...<head>
<title></title>
<link rel="stylesheet" href="css/style.css?ver=1" />
<link rel="stylesheet" href="css/nav.css?ver=1" />
<link rel="stylesheet" href="css/footer.css?ver=1" />
</head>...

In questo modo i file CSS vengono implementati tutti in tutte le pagine.
Un appunto però voglio fartelo:
Capita a volte che alcuni moduli si decida di non mostrarli in determinate pagine, questo allora rende superfluo il fatto di implicare il relativo CSS che verrebbe caricato per niente.
Per ovviare a questo io ho sempre inserito un switch case nel sorgente che in base alle pagine in cui mi trovo decido quali stili CSS inserire e quali no.
Se ti può servire questa soluzione fammi sapere.
 

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Hmm non è quello il problema, diciamo che per tener aperto l'accordion quando lo si clicca si mette ahref link pagina +#one e per tenere il menu aperto a href link#main-nav ma io devo tenerli entrambi aperti e quindi quando il menu non vorrei che mi si chiudesse anche l'accordion e quindi il link #main-nav da solo non va bene ma dovrebbe essere specie #main-nav#one ma nemmeno coì mi funziona...
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
In poche parole vuoi fare un link doppio?
Un link il quale una parte linka all'ID che è quello del menu aperto e l'altra che linka alla pagina che deve aprire?
Se si vidi tempo addietro una soluzione su di un altro sito web che spiegava come fare questo con l'utilizzo di JS.
 

Sheng07

Nuovo Utente
5 Mar 2013
29
0
0
Per dirla breve es: se accordion è aperto e clicco il menu rimane aperto l'accordion, viceversa se è chiuso e apro menu rimane chiuso ma il menu si apre. Mentre adesso se clicco menu si apre ma chiude l'accordion e viceversa ( se apro accordion si chiude menu)
 
Discussioni simili
Autore Titolo Forum Risposte Data
cerbero codice x menu HTML e CSS 8
A disabilitare il menu del browser da codice ASP.NET 1
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2

Discussioni simili