http://1.1.1.5/bmi/img04.arabsh.com/...434361f601.pngمعلومات
السلام عليكم و رحمة الله تعالى و بركاته يا من طرقت باب واحتي .. فـلا ماء و لا خضراء و لا وجه حسن إنها صحراء بيضاء بلون الثلج .. لا تسر الناظرين زيارتك لصفحتي بدون جواز سفر أسعدتني و شرفتني ، لأنك في ضيافتي ؛ برغم أني لا أعرفك و لكني أحترمك و أقدرك .. فمرحباً بك ليس مهم عمرك أو لونك و لا جنسك و مهنتك أو في أي بقعة أنت ، و لا يقلقني سبب زيارتك .. فانت ( إنسان ) مثلي وهذا يكفي كما ترى : فـلا أقفال و لا أسوار حولي .. لا تفاصيل عني ؟

كود ال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://lh4.googleusercontent.com/-4lFn75jpuCw/TYaVhY6cEFI/AAAAAAAAAQg/ugOLsvsAXMs/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://lh4.googleusercontent.com/-4lFn75jpuCw/TYaVhY6cEFI/AAAAAAAAAQg/ugOLsvsAXMs/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://lh4.googleusercontent.com/-jxV_yGL9vk4/TYaVULxNcdI/AAAAAAAAAQc/p0GszpGRcNk/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://bilokr.googlecode.com/files/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:[email protected]'  title='Gmail'>Gmail</a></li>

  </ul>

 </div>

</div>

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

</div>

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

---

هام جداا: للمبدئين
و عليه يمكنك إيجاد رابط مباشر لعرض المكتبة دون تحميلها بالدخول

على Google AJAX Libraries وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس

الصفحة داخل الوسم <head> هكذا:

كود بلغة HTML:

---

<script src="http://bilokr.googlecode.com/files/jquery.min.js" type="text/javascript"></script>

---

بخبرتك في Jquery يمكنك التحكم في شكل حركة فتح القائمة،

لكن في نفس الوقت الشفرة غير مسئولة عن ظهور القائمة،

فهي تظهر مباشرة من خلال خصائص css والشفرة هي مجرد تأثير إضافي...

اتمنى ان تكون قد فمهت الفكرة

اما خصائص ال css فهي توضع مابين الوسمين التاليين

كود بلغة HTML:

---

<b:skin><![CDATA[/*

---

كود بلغة HTML:

---

]]></b:skin>

---

الان بقي لك فقط ال HTML ..

الموضوع ليس من تصميمى انما من تعريبى

المصدر http://bilokr.blogspot.com/2012/09/jquery-css_29.html