07-03-2012, 12:48
|
|
|
|
חבר מתאריך: 21.09.07
הודעות: 287
|
|
ציטוט:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>slideBarMenu</title>
<style>
*{
padding:0px;
margin:0px;
}
#menu_slideBar {
width:1024px;
height:300px;
border:solid #000 0px;
margin:0px auto;
position:relative;
}
div[id*='panel']
{
position:absolute;
top:0px;
width:770px;
height:300px;
border:solid #000 0px;
float:right;
}
[id*='-1']
{
background-color:#0F9;
}
[id*='-2']
{
background-color:#0F9;
}
[id*='-3']
{
background-color:#0F9;
}
[id*='-4']
{
background-color:#0F9;
}
iframe {
float:left;
}
div[id*='panel'] > p {
border:solid #000 0px;
float:right;
width:380px;
height:280px;
padding:10px;
text-align:right;
direction:rtl;
}
#menu_side{
border:solid #000 0px;
float:right;
width:254px;
height:300px;
text-align:right;
}
#menu_side li{
height:65px;
padding:4px;
list-style:none;
}
div[id*='li-']{border:solid #000 1px;}
</style>
<script src="jquery-1.7.1.js"></script>
<script>
$(document).ready(function() {
$("div[id*='panel']").hide();
$('#li-1').animate({'opacity':0.5});
$('#li-2').animate({'opacity':0.5});
$('#li-3').animate({'opacity':0.5});
$('#li-4').animate({'opacity':0.5});
});
$(function() {
$('#li-1').hover(function(){
$("#panel-1").fadeIn("slow");
$(this).stop().animate({'opacity':1});
$('#li-1').css("border-left","solid 0px blue");
},function(){
$("#panel-1").fadeOut("slow");
$(this).stop().animate({'opacity':0.5});
$('#li-1').css("border-left","solid 1px blue");
});
});
$(function() {
$('#li-2').hover(function(){
$("#panel-2").fadeIn("slow");
$(this).stop().animate({'opacity':1});
$('#li-2').css("border-left","solid 0px blue");
},function(){
$("#panel-2").fadeOut("slow");
$(this).stop().animate({'opacity':0.5});
$('#li-2').css("border-left","solid 1px blue");
});
});
$(function() {
$('#li-3').hover(function(){
$("#panel-3").fadeIn("slow");
$(this).stop().animate({'opacity':1});
$('#li-3').css("border-left","solid 0px blue");
},function(){
$("#panel-3").fadeOut("slow");
$(this).stop().animate({'opacity':0.5});
$('#li-3').css("border-left","solid 1px blue");
});
});
$(function() {
$('#li-4').hover(function(){
$("#panel-4").fadeIn("slow");
$(this).stop().animate({'opacity':1});
$('#li-4').css("border-left","solid 0px blue");
},function(){
$("#panel-4").fadeOut("slow");
$(this).stop().animate({'opacity':0.5});
$('#li-4').css("border-left","solid 1px blue");
});
});
</script>
</head>
<body>
<div id="menu_slideBar">
<div id="menu_side">
<ul>
<div id="li-1"><li>שיעור מספר 1</li></div>
<div id="li-2"><li>שיעור מספר 2</li></div>
<div id="li-3"><li>שיעור מספר 3</li></div>
<div id="li-4"><li>שיעור מספר 4</li></div>
</ul>
</div>
<div id="panel-1">
<iframe width="360" height="300" src="http://www.youtube.com/embed/C0YhNApU-qg" frameborder="0" allowfullscreen id="a11"></iframe>
<p class="pad">layer-1</p>
</div>
<div id="panel-2">
<iframe width="360" height="300" src="http://www.youtube.com/embed/C0YhNApU-qg" frameborder="0" allowfullscreen></iframe>
<p class="pad">layer-2</p>
</div>
<div id="panel-3">
<iframe width="360" height="300" src="http://www.youtube.com/embed/C0YhNApU-qg" frameborder="0" allowfullscreen></iframe>
<p class="pad">layer-3</p>
</div>
<div id="panel-4">
<iframe width="360" height="300" src="http://www.youtube.com/embed/C0YhNApU-qg" frameborder="0" allowfullscreen></iframe>
<p class="pad">layer-4 </p>
</div>
</div>
</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->
|
תודה רבה
|
ראשי
צ'אט
ואז בעיה הכי קטנה לא תדע בדיוק להתמודד איתה..
מצב כלאיים
