PDA

View Full Version : Help me - Create horizontal slider like Window Mobile site



tttt141
10-21-2008, 07:17 AM
This link : http://www.microsoft.com/windowsmobile/en-us/default.mspx
Look at the display slider products ( phones) , can you help me to find out the script for this , i tried to used their script but not work . Please help me , thank a lot :)

bokanegro
10-21-2008, 07:35 AM
Hi.

Try this link:

Info: http://www.gsdesign.ro/blog/horizontal-image-menu/

Demo: http://www.phatfusion.net/imagemenu/index.htm

rangana
10-21-2008, 08:06 AM
Might work with your desire:


<script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-nightly.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.desc').hide(); // Hide the description elements
$('#myul img').hover(function(){
$(this).next().animate({width:'toggle'},'slow');},
function(){
$(this).next().animate({width:'toggle'},'slow');}
)
});
</script>
<style type="text/css">
ul{list-style-type:none;}
#myul li{
float:left}
#myul li img{
width:200px;
height:150px;
float:left;
margin:1px;
}
#myul .desc{
background:#eee;
border:1px solid #222;
float:left;
margin:5px 10px;
height:120px;
padding:10px;
}
</style>
<ul id="myul">
<li><img src="http://rangana.moonylist.com/images/Picture7.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
<li><img src="http://rangana.moonylist.com/images/Picture8.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
<li><img src="http://rangana.moonylist.com/images/Picture9.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
</ul>

tttt141
10-21-2008, 08:51 AM
thank you very much , i did it ! Both scripts are very nice !

tttt141
10-23-2008, 03:19 AM
I found another one , share with you
http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/