Stile Banner e Menu

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ciao a tutti,
Sono al quinto anno di scuola superiore e come tesina volevo realizzare un sito web di musica..
Girando un po' per il web mi sono imbattuto in questo sitohttp://www.andreasacca.it/ e mi è piaciuto molto il banner in alto.. quello con il menù home, chi sono, ecc..
Quindi volevo mettere nel mio sito un banner simile.. ma non so come fare.. ho provato a lavorare sugli effetti dei link in css (es: a:hover..) però viene abbastanza brutto come effetto (forse lui usa uno javascript)..
Qualcuno sa darmi qualche consiglio?
Ah conosco abbastanza bene l'html, il css, e il php e ho anche qualche conoscenza di ajax..

Grazie in anticipo :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.041
146
63
PR
www.borgo-italia.it
ciao
il sito di cui parli fa moltissimo uso di js e jquerry.
dagli un occhio con "visualizza sorgente".
il menù è dentro un div e fatto con i tal <li> collegati a script js. individua quali e se non solo loro li cerchi su google
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, concordo con quello che dice Borgo è creato con JQuery.
Ecco un esempio:
Ti basterà copiare e incolla il codice metterlo in rete e il gioco è fatto! :)
Ovviamente si potrà embeddare un font differente con estrema facilità
immettendo l'attributo @font-face {} nel css inoltre ti consiglio
di creare un file js esterno chiamato magari menu.js
dove inserire i metodi JQuery e un file sterno chiamato menu.css dove inserire i parametri css.

P.S io ho formattato il menu sulla sinistra ovviamente potrai posizionarlo sulla destra dalle regole css.

PHP:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Menu JQuery</title>
 
 <script type="text/javascript"src=
   "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
 </script>
 
 <script>
   
   $(document).ready(function(){
	$('#menu ul li a').mouseenter(function(){
	   $(this).animate({
	   opacity: 0.5
	  });
	});
	
	$('#menu ul li a').mouseleave(function(){
	  $(this).animate({
	  opacity: 1
	  });
	});
	
	$('#menu ul li ').mouseenter(function(){
	   $('ul', this).slideDown();
	 });
   
    $('#menu ul li ').mouseleave(function(){
	 $('ul', this).slideUp();
	 });
  });
 
</script>

<style>

  body { margin:0px; padding:0px; }
  #menu { background:#09C; height:30px; }
  #menu ul { list-style:none; padding:0px; margin:0px; }
  #menu ul li { float:left; }
  #menu ul li a { color:#fff; text-decoration:none; padding:5px 20px; display:block; font-family: "Arial";}
  #menu ul li a:hover { background:#09C;}
  #menu ul ul { position:absolute; background:#09C; display:none; }
  #menu ul ul li { float:none; }

</style>

</head>
<body>
  
<div id="menu">
  <ul>
	 <li><a href="#">HOME</a></li>
	 <li><a href="#">SERVIZI</a></li>
	 <li><a href="#">PORTFOLIO</a></li>
     <li><a href="#">CONTATTI</a>
   <ul>
	<li><a href="#">CONTENUTO 1</a></li>
	<li><a href="#">CONTENUTO 2</a></li>
   </ul>
 </ul>
</div>
 
 </body>
</html>
 
Ultima modifica:

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
grazie a tutti e due per le risposte :)

però non ho capito quale codice devo cercare su google?
comunque è meglio se inizio a studiarmi un po' di js e jquery visto che sono a zero!:book:
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.041
146
63
PR
www.borgo-italia.it
ciao
ti posso solo dare delle indicazioni
apri la pagina e poi visualizza sorgente, vedrai una serie di <script.... esempio
HTML:
<script type='text/javascript' src='http://www.andreasacca.it/wp-content/themes/-andrea/js/superfish.js?ver=3.5.1'></script>
cerchi di indinviduare quale si riferisce al menù (o li provi tutti) poi sempre dell'esempio sopra copy superfish.js e lo incolli sulla barra di ricerca di google e forse (se è uno script che si può downloaddare)
dovrebbe apparirti il sito da cui puo preleverlo.

comunque la tua affermazione
comunque è meglio se inizio a studiarmi un po' di js e jquery
è una cosa che devi di sicuro fare
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao.
Ma hai copiato e incollato il mio script?
Ti basta copiarlo e metterlo in rete.
Copi il codice in un Blocco note e generi una pagina HTML.
La metti in rete e il gioco è fatto.
E' il menu che volevi e l'ho creato con JQuery.
Studia quello, non c'è bisogno che vai ad estrapolare
il codice da quel sito "che ha anche un errore di formattazione css".
 
Ultima modifica:

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ciao.
Ma hai copiato e incollato il mio script?
Ti basta copiarlo e metterlo in rete.
Copi il codice in un Blocco note e generi una pagina HTML.
La metti in rete e il gioco è fatto.
E' il menu che volevi e l'ho creato con JQuery.
Studia quello, non c'è bisogno che vai ad estrapolare
il codice da quel sito "che ha anche un errore di formattazione css".
cosa intendi per "la metti in rete"?
comunque il tuo codice è perfetto! :)
..Appena faccio la maturità inizio a studiarmi il jquery.. perchè adesso con tutta la roba che ho da studiare non credo di farcela :\
ah e intanto mi potreste suggerire un "buon" manuale di jquery
 
Ultima modifica:

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
scusa se ti disturbo ancora ma perchè se nel css cambio #menu ul li { float:left; } in #menu ul li { float:right; }
mi inverte l'ordine del menù?
cioè me lo mette sulla destra ed è ok però il menù diventa contatti portfolio servizi home
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, così facendo gli hai detto di spostare ul e li a destra devi agire sul menu non sulla lista.
Sostituisci tra gli style come segue:

PHP:
  #menu { background:#09C; height:30px; float:right; padding-right:60px;}
  #menu ul { list-style:none; padding:0px; margin:0px; }
  #menu ul li { float:left; }
  #menu ul li a { color:#fff; text-decoration:none; padding:5px 20px; display:block; font-family: "Arial"; }
  #menu ul li a:hover { background:#09C; }
  #menu ul ul { position:absolute; background:#09C; display:none; }
  #menu ul ul li { float:none; }
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Ho visto quell'effetto che viene usato anche per i contorni dei media in lightbox, che colora lo sfondo più lentamente da far sembrare che si illumini invece di cambiare di scatto,
anche io sono d'accordo sul fatto che su quel sito c'è uso et abuso di jquery per tutti i vari effetti, mi sembra un bel lavoro soprattutto sul fatto che nonostante gli effetti, il sito appaia semplice e pulito.
A parte tutto io credo che esista un piccolo script js (che però non sono riuscito a trovare perchè interessava anche a me), proverei a guardare il sito di lightbox:

- http://lokeshdhakar.com/projects/lightbox2/

Che come ho scritto usa questo effetto (e penso che sia lo stesso identico) però sugli sfondi (o border?) delle immagini.
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ciao, così facendo gli hai detto di spostare ul e li a destra devi agire sul menu non sulla lista.
Sostituisci tra gli style come segue:

PHP:
  #menu { background:#09C; height:30px; float:right; padding-right:60px;}
  #menu ul { list-style:none; padding:0px; margin:0px; }
  #menu ul li { float:left; }
  #menu ul li a { color:#fff; text-decoration:none; padding:5px 20px; display:block; font-family: "Arial"; }
  #menu ul li a:hover { background:#09C; }
  #menu ul ul { position:absolute; background:#09C; display:none; }
  #menu ul ul li { float:none; }
Ciao scusa se ti disturbo ancora ma volevo aggiungere una cosa al tuo menù...
Praticamente l'ho un po' modificato cioè ho tolto tutti i sottomenù perché non mi servivano.. adesso però volevo aggiungere un <li>
che contiene la scritta "accedi" e vorrei che mi si aprisse una form.

ho trovato questo esempio qua : http://www.html.it/script/un-form-di-login-a-discesa-con-jquery/#d
però non riesco a includerlo nel tuo menù.. mi puoi aiutare?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Ciao, ti rispondo perchè ho riletto (quasi) tutta la discussione e da quando avevo risposto la prima volta ho trovato un codice online che da l'effetto del menu del sito che ci avevi linkato inizialmente, forse ora non ti serve più ma io lo posto lo stesso se può servire a qualcuno:

lo si può vedere lo stesso effetto sul menu del mio sito (vedi mia firma).
HTML:
<style>
div.menubody a		{width: 169px; display: block;text-decoration: none; color:#CCCCCC; transition-property:all; transition-duration: 0.2s; transition-timing-function: ease;}
div.menubody a:hover{width: 159px; padding-left: 10px; color: #0066CC;}
</style>
<div class="menu">
	<div class="menuhead">Menu</div>
	<div class="menubody">
		<a href="homepage">	<b>- Homepage</b></a>
		<a href="profilo">	<b>- Profilo</b></a>
		<a href="servizi">	<b>- Servizi</b></a>
		<a href="portfolio"><b>- Portfolio</b></a>
		<a href="partners">	<b>- Partners</b></a>
		<a href="progetti">	<b>- Progetti</b></a>
		<a href="contatti">	<b>- Contatti</b></a>
	</div>
Il codice essenziale che esegue l'animazione dei cambiamenti da "A" ad A:HOVER è questo:
Codice:
transition-property:all; transition-duration: 0.2s; transition-timing-function: ease;
In transition property andrebbe scritto il nome del selettore da animare (in questo caso ho messo tutti)
Transition duration: è abbastanza palese! comunque è la durata dell'animazione espressa in secondi
transition-timing-function devo ancora capire a cosa serve XD.

Voglio anche far notare che quest'ultimo codice (quello dentro il box), è meglio inserirlo dentro il css dei link A senza stato HOVER, perchè se viene messo solo in stato hover, l'animazione la si ha quando ci si passa sopra al link, ma non quando lo si toglie, che dovrebbe animare il ritorno allo stato iniziale del tag.

Questa è una cosa che ho testato con:
- Firefox
- Google Chrome
- IE
- Opera

Su safari non mi riconosce neanche l'effetto, mentre con Google Chrome sembra ritardato (in tutti i sensi, sia l'effetto che il browser) e IE mi esegue l'effetto solo sul cambiamento del colore dei links, ma non sul padding left.

Già che c'ero ho fatto anche una pagina di prova in modo che potete provarla con i browsers che avete per vedere l'effettivo riscontro.

Animazione links menu
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Ciao, ti rispondo perchè ho riletto (quasi) tutta la discussione e da quando avevo risposto la prima volta ho trovato un codice online che da l'effetto del menu del sito che ci avevi linkato inizialmente, forse ora non ti serve più ma io lo posto lo stesso se può servire a qualcuno:

lo si può vedere lo stesso effetto sul menu del mio sito (vedi mia firma).
HTML:
<style>
div.menubody a		{width: 169px; display: block;text-decoration: none; color:#CCCCCC; transition-property:all; transition-duration: 0.2s; transition-timing-function: ease;}
div.menubody a:hover{width: 159px; padding-left: 10px; color: #0066CC;}
</style>
<div class="menu">
	<div class="menuhead">Menu</div>
	<div class="menubody">
		<a href="homepage">	<b>- Homepage</b></a>
		<a href="profilo">	<b>- Profilo</b></a>
		<a href="servizi">	<b>- Servizi</b></a>
		<a href="portfolio"><b>- Portfolio</b></a>
		<a href="partners">	<b>- Partners</b></a>
		<a href="progetti">	<b>- Progetti</b></a>
		<a href="contatti">	<b>- Contatti</b></a>
	</div>
Il codice essenziale che esegue l'animazione dei cambiamenti da "A" ad A:HOVER è questo:
Codice:
transition-property:all; transition-duration: 0.2s; transition-timing-function: ease;
In transition property andrebbe scritto il nome del selettore da animare (in questo caso ho messo tutti)
Transition duration: è abbastanza palese! comunque è la durata dell'animazione espressa in secondi
transition-timing-function devo ancora capire a cosa serve XD.

Voglio anche far notare che quest'ultimo codice (quello dentro il box), è meglio inserirlo dentro il css dei link A senza stato HOVER, perchè se viene messo solo in stato hover, l'animazione la si ha quando ci si passa sopra al link, ma non quando lo si toglie, che dovrebbe animare il ritorno allo stato iniziale del tag.

Questa è una cosa che ho testato con:
- Firefox
- Google Chrome
- IE
- Opera

Su safari non mi riconosce neanche l'effetto, mentre con Google Chrome sembra ritardato (in tutti i sensi, sia l'effetto che il browser) e IE mi esegue l'effetto solo sul cambiamento del colore dei links, ma non sul padding left.

Già che c'ero ho fatto anche una pagina di prova in modo che potete provarla con i browsers che avete per vedere l'effettivo riscontro.

Animazione links menu
Ciao, ormai non mi serve più.. ho messo il menù di helpdesk e non sto a cambiarlo perché mancano pochissimi giorni alla maturità e ancora devo finire sto benedetto sito! :boxing:
comunque mi potresti dire come posso integrare il "login" (questo, guarda la demo http://www.html.it/script/un-form-di-login-a-discesa-con-jquery/#d) nel menù di help desk (se non ti sta fatica :D )
grazie :byebye:
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
mi va bene anche che dal menù di helpdesk mi si aprà un box con dentro una form per inserire user e psw..
c'ho provato da solo ma è inutile non so come fare..