Stile Banner e Menu

invisible93 · 12 Apr 2013

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 · 13 Apr 2013

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 · 13 Apr 2013

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>

invisible93 · 14 Apr 2013

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 · 14 Apr 2013

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 · 14 Apr 2013

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

invisible93 · 14 Apr 2013

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

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

helpdesk · 14 Apr 2013

Ciao, Grazie.
Gli ottimi corsi di mrwebmaster per esempio?

invisible93 · 14 Apr 2013

Sì hai ragione :mavieni:

comunque mi consigli di studiare prima il javascript o il jquery?

helpdesk · 14 Apr 2013

Ciao.
Comincerei da Javascript

invisible93 · 15 Apr 2013

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 · 15 Apr 2013

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 · 22 Apr 2013

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 · 31 Mag 2013

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; }

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 · 31 Mag 2013

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 · 31 Mag 2013

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

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

)
grazie :byebye:

invisible93 · 2 Giu 2013

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

Cerca

Cerca

Stile Banner e Menu

invisible93

Utente Attivo

borgo italia

Super Moderatore

helpdesk

Utente Attivo

invisible93

Utente Attivo

borgo italia

Super Moderatore

helpdesk

Utente Attivo

invisible93

Utente Attivo

helpdesk

Utente Attivo

invisible93

Utente Attivo

helpdesk

Utente Attivo

invisible93

Utente Attivo

helpdesk

Utente Attivo

Jonn

Utente Attivo

invisible93

Utente Attivo

Jonn

Utente Attivo

invisible93

Utente Attivo

invisible93

Utente Attivo

Discussioni simili