menù scorrimento orizzontale

**Buzzz** · 24-05-2009, 18:00

ciao a tutti...
sapete come posso fare per fare un menù come questo:
(dove cè scritto: Scopri Windows Live Messenger)

http://www.messenger.it/
?

grazie in anticipo!

**lambrusco999** · 24-05-2009, 20:04

questo?

http://cssglobe.com/post/3783/jquery...content-slider

naturalmente modificando il css

**Buzzz** · 24-05-2009, 20:25

si proprio cosi... però da questo punto: (dove cè questo codice)

$(document).ready(function(){ $ (documento). pronti (function () (
$("#slider").easySlider(); $ ( "# cursore"). easySlider ();
}); ));

in poi non capisco cosa cè da fare..

**lambrusco999** · 24-05-2009, 21:37

:master:

inizia con l'importare le due librerie

codice:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/easySlider.packed.js"></script>

successivamente aggiungi questo codice

codice:

<script type="text/javascript"> 	
   $(document).ready(function(){	 		
      $("#slider").easySlider(); 	
   }); 
</script>

che è il codice effettivo che ti permette di ottenere l'effetto slide.
Successivamente inserisci un div con il nome slider (in questo caso)

codice:

<div id="slider"> 		
   <ul>				 			[*][img]immagine1[/img] [*][img]immagine2[/img] [*][img]immagine3[/img] [*][img]immagine4[/img] 				 		[/list]	
</div>

ed infine il css

codice:

#slider ul, #slider li{ 		margin:0; 		padding:0; 		list-style:none; 		} 	#slider, #slider li{  		/*  			define width and height of container element and list item (slide) 			list items must be the same size as the slider area 		*/  		width:696px; 		height:241px; 		overflow:hidden;  		} 	span#prevBtn{} 	span#nextBtn{}

Nel link è comunque possibile scaricare il pacchetto con tutti gli esempi

**Buzzz** · 24-05-2009, 21:42

si però preferisco fare da solo con i codici.. con gli esempi gia pronti non mi trovo

una cosa, questo:

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>

lo inserisco nel body, e questo:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider.packed.js"></script>

dove lo inserisco? sempre nel body sopra al codice sopra?

cioè così giusto?

HTML

codice:

<body>

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/easySlider.packed.js"></script>

<script type="text/javascript"> 	
   $(document).ready(function(){	 		
      $("#slider").easySlider(); 	
   }); 
</script>

<div id="slider"> 		
   <ul>				 			[*][img]immagine1[/img] [*][img]immagine2[/img] [*][img]immagine3[/img] [*][img]immagine4[/img] 				 		[/list]	
</div>

</body>

CSS

codice:

#slider ul, #slider li{ 		margin:0; 		padding:0; 		list-style:none; 		} 	#slider, #slider li{  		/*  			define width and height of container element and list item (slide) 			list items must be the same size as the slider area 		*/  		width:696px; 		height:241px; 		overflow:hidden;  		} 	span#prevBtn{} 	span#nextBtn{}

**lambrusco999** · 24-05-2009, 21:48

allora tutta la parte relativo agli script devi inserirlo nell'head della pagina quindi:

codice:

<head> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/easySlider.packed.js">
     </script> <script type="text/javascript"> 	
       $(document).ready(function(){	 		
            $("#slider").easySlider(); 	
        });
      </script>  
</head>

nel body inserisci questo:

codice:

<div id="slider"> 		   
    <ul>				 		
   	[*][img]immagine1[/img]      [*][img]immagine2[/img]        [*][img]immagine3[/img]        [*][img]immagine4[/img] 				 		[/list]	
 </div>

**Buzzz** · 24-05-2009, 22:36

ok fatto.. poi?
poi cosa faccio? perchè cosi non vedo nulla.. tranne una "a" ...

**lambrusco999** · 24-05-2009, 22:40

solo una a?....
prova a postare il codice cosi vediamo quale potrebbe essere il problema!

**Buzzz** · 24-05-2009, 23:09

Originariamente inviato da lambrusco999
solo una a?....
prova a postare il codice cosi vediamo quale potrebbe essere il problema!

si una a, perchè invece di immagine1,2.3 ecc ho messo a b c d ..
comunque ecco... lo posto tutto così non tralascio niente:

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />


<head> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/easySlider.packed.js">
     </script> <script type="text/javascript"> 	
       $(document).ready(function(){	 		
            $("#slider").easySlider(); 	
        });
      </script>  
</head>



</head>
<body>

<div id="container"> 
	<div id="top">
<div id="top_">

<div id="logo">logo</div>
<div id="other_top">other top</div>

</div>
	</div>
	<div id="center">
	center
	</div>
	<div id="center_">




<div id="slider"> 		   
    <ul>				 		
   	[*]a      [*]b        [*]c        [*]d 				 		[/list]	
 </div>





<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/easySlider.js"></script>





	</div>
	<div id="bottom">
		<div id="bottom_">
		<div class="copyright"><copyright>Copyright &copy; 2000 - 2009</copyright> Cuaxo</div>
		<div class="other_bottom">
		homepubblicit&agrave;privacycondizioniinfohelp
		</div>
		</div>
	</div>
</div> 

</body>
</html>

CSS

codice:


html, body {
width:100%;
height:100%;
margin:0;
padding:0;
background:;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
overflow:0 auto;
width:100%;
height:;
}

#top {
overflow:0 auto;
width:100%;
height:100px;
background:#F0F0F0;
background-image:url('../img/bg/bg_top.PNG') ;
background-position:bottom;
background-repeat:repeat-x;
}

#top_{
overflow:0 auto;
margin:0 auto;
width:950px;
height:;
background:#000000;
}
#logo{
float:left;
width:200px;
height:80px;
background:#1AFF05;
}
#other_top{
float:right;
width:400px;
height:;
font-family:arial;
font-size:14px;
background:#FFFCC4;
}
#other_top a{
text-decoration:none;
color:#505050;
}
#other_top a:hover{
color:#448fa6;
}

#center{
overflow:0 auto;
width:100%;
height:400px;
background:#FF0004;
}

#center_{
overflow:0 auto;
width:100%;
height:600px;
background:#B922FF;
}

#bottom{
overflow:0 auto;
width:100%;
height:44px;
background:url('../img/bg/bg_bottom.PNG');
}

#bottom_{
overflow:0 auto;
margin:0 auto;
padding-top:14px;
width:950px;
height:;
background:url('../img/bg/bg_bottom.PNG');
}
.copyright{
overflow:0 auto;
float:left;
width:;
height:;
font-family:arial;
font-size:13px;
color:#B4B4B4;
}
.copyright a{
text-decoration:none;
color:#B4B4B4;
}
.copyright a:hover{
color:#FFFFFF;
}
copyright{
color:#B4B4B4;
}

.other_bottom{
overflow:0 auto;
float:right;
width:;
height:;
font-family:arial;
font-size:13px;
color:#B4B4B4;
}
.other_bottom a{
text-decoration:none;
color:#B4B4B4;
}
.other_bottom a:hover{
color:#FFFFFF;
}




#slider ul, #slider li{ 		margin:0; 		padding:0; 		list-style:none; 		} 	#slider, #slider li{  		/*  			define width and height of container element and list item (slide) 			list items must be the same size as the slider area 		*/  		width:696px; 		height:241px; 		overflow:hidden;  		} 	span#prevBtn{} 	span#nextBtn{}

**lambrusco999** · 24-05-2009, 23:16

ho appena provato il tuo codice e funziona correttamente.
Mi scorre le lettere.

Discussione: menù scorrimento orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

menù scorrimento orizzontale

Permessi di invio