ملف تعريفك بصيغة الjquery والcss

24‏/06‏/2010












مثال (Demo)


كود الcss




.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}

.panel p{color:#ccc;margin:0 0 15px;padding:0}

.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}

.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}

a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-xsag2qcZHDjYYhFFgPIURDObVplgETqaDJxVzbn4XjWCwvOCtcc975qiP9tmZI-TvklBTYXwZ4ZKlYdIA04iCGhjIAxyX4mF_KkYn8qFn_nLKfIgdz8yUFIj4mbw6msf32zHKtuNhWO/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-xsag2qcZHDjYYhFFgPIURDObVplgETqaDJxVzbn4XjWCwvOCtcc975qiP9tmZI-TvklBTYXwZ4ZKlYdIA04iCGhjIAxyX4mF_KkYn8qFn_nLKfIgdz8yUFIj4mbw6msf32zHKtuNhWO/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtoj9xHiddfOTJRomojil86y5zfL-LVcpBGzodnchmsgEDKBuQAPnMrX_buaPwlAK2w7fwLYRMPkdfPOkeR_Lzfwca49wavefLDmqq6pWq00jiVi6iRk_b-wuLWfXzmV7UdXe8rQY4ikGx/d/minus.png) 85% 55% no-repeat}

.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

.colleft{float:left;width:130px;line-height:22px}

.colright{float:right;width:130px;line-height:22px}

a:focus{outline:none}

.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}

.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}

.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}



 كودالjquery





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">

$(document).ready(function(){

$(".trigger").click(function(){

 $(".panel").toggle("fast");

 $(this).toggleClass("active");

 return false;

});

});

</script>



و هدا الكود الدي سوف تضعه أسفل أو اعلى






</body>






<div class='panel'>

<h3>معلومات</h3>

<p style='text-align:justify'>هنا ملف تعريفك. <a href='http://xxx.blogspot.com/' title='Hendriono Online'>هنا ضع كلامك أو رسالتك</a></p>



<h3>معلومات</h3>

<img src='هنا ضع رابط الصورة' width='73px' height='73px'/>

<p>هنا ضع أي شيء</p>



<div style='clear:both;'/>



<div class='columns'>

 <div class='colleft'>

 <h3>الرئيسية</h3>

  <ul>

   <li><a href='#' title='home'>Home</a></li>

   <li><a href='#' title='about'>About</a></li>

   <li><a href='#' title='portfolio'>Portfolio</a></li>

   <li><a href='#' title='contact'>Contact</a></li>

   <li><a href='#' title='blog'>Blog</a></li>

  </ul>

 </div>



 <div class='colright'>

 <h3>للتواصل;/h3>

  <ul>

   <li><a href='http://twitter.com/infokhaled31' title='Twitter'>Twitter</a></li>

   <li><a href='http://facebook.com/infokhaled31' title='Facebook'>Facebook</a></li>

   <li><a href='http://digg.com/users/infokhaled31' title='Digg'>Digg</a></li>

   <li><a href='http://delicious.com/infokhaled31' title='Del.Icio.Us'>Del.Icio.Us</a></li>

   <li><a href='infokhaledz:infokhaled31@gmail.com' title='Gmail'>Gmail</a></li>

  </ul>

 </div>

</div>

<div style='clear:both;'/>

</div>

<a class='trigger' href='#'>Info</a>


انتهى