Stile Banner e Menu

I

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

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
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

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:
I

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

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
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
Clicca per allargare...
è una cosa che devi di sicuro fare
 
helpdesk

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:
I

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
helpdesk ha scritto:
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".
Clicca per allargare...

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:
I

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

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

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.
 
I

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
helpdesk ha scritto:
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; }
Clicca per allargare...

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

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
 
I

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
Jonn ha scritto:
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
Clicca per allargare...

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:
 
I

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..
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
I creazione stile css HTML e CSS 3
N [WordPress] Caricare diversi fogli di stile in tema-child WordPress 0
M CSS posizionamento stile HTML e CSS 2
L [HTML] versione mobile eliminare stile menu da nav HTML e CSS 0
giuseppe_123 [WordPress] Problema foglio di stile tema child WordPress 2
L [Javascript] Creare sezione apri/chiudi in stile Wikipedia Javascript 9
C pulsante like stile facebook Ajax 3
G Aiuto per creare chat stile Facebook Javascript 7
S Domnda su sito in stile forum HTML e CSS 1
D commenti dinamici stile facebook PHP 4
I [Vendo] Sito annunci completo stile subito Compravendita siti e domini 0
S foglio di stile e codice HTML HTML e CSS 3
V Aiuto su Stile CSS cambiare colore ad un modulo Joomla 1
V [risolto] Contatore caratteri stile SMS da una textarea Javascript 6
I Non riconosce le regole del foglio di stile HTML e CSS 12
V Notifiche push stile WhatsApp Sviluppo app per Android 1
glm2006ITALY Progetto vecchio stile: NegoziAcquari.it Presenta il tuo Sito 6
M Più fogli stile - Help Javascript 4
A modificare comportamento 'position' in stile CSS Javascript 0
Monital [RISOLTO]creare un calendario stile campionato di calcio PHP 8
A Stile form HTML e CSS 2
P Slide difettosa x incompatibilità con foglio di stile jQuery 0
N Menu verticale semplice stile Yahoo WordPress 2
M Come creare navigazione stile Facebook Javascript 1
A dichiarazione di span nel foglio di stile espero HTML e CSS 2
carter Foglio di stile WordPress 2
B Redirect in stile Facebook Apache 1
F Apertura sito di incontri stile badoo,zoosk,meetic Webdesign e Grafica 2
F Applicare uno stile css ad una sola parola HTML e CSS 5
S "Menu" laterale a scomparsa (stile Forumcommunity) HTML e CSS 1
B Salvataggio impostazioni stile wordpress PHP 7
D Menu con immagine a stile DropDown jQuery 0
T assegnare ad una classe uno stile Javascript 2
S bacheca interazione tra utenti stile facebook ... PHP 49
S Interazione solo tra utenti stile facebook PHP 44
P Grafica vecchio stile Discussioni Varie 22
S jquery stile joomla in asp Joomla 13
G menù orizzontale stile etichetta HTML e CSS 0
B modifica foglio di stile in wordpress WordPress 11
Nik Visualizzazione strana con Doctype Transitional e foglio di stile esterno HTML e CSS 2
L Creare sito in stile Twitter CMS (Content Management System) 5
M ASP CHAT in stile facebook Classic ASP 1
I forum in stile mac - apple Webdesign e Grafica 3
A sito stile-grafico Presenta il tuo Sito 2
F [vendo] Script Completo Aste Live - Stile Bidrivals Offerte e Richieste di Lavoro e/o Collaborazione 0
L Toolbar stile Facebook HTML e CSS 3
C integrare flash con stile mootools Flash 1
danlupo Stile voce Menu pagina attiva PHP 4
whirl Immagini stile Flickr PHP 4
F Stile CSS impazzito HTML e CSS 3

Discussioni simili

Alto Basso