عمل علامات تبويب منسدلة بالـ css3 والجيكوري

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

درس عمل علامات تبويب منسدلة بالـ css3 والجيكوري

موضوع اليوم جميل وسهل انشاءالله , وهي قائمة على شكل علامات تبويب يبحث عنها الكثير  , وتستطيع ان تضع داخلها جملة او اي ماتشاء , الاداة سهلة الاستخدام والتصميم ايضاَ قمت بتحويلها من اللغة الانقليزيه الى العربيه مع بعض التعديلات كي تتناسب تماما مع المحتوى العربي من حيث اتجاه النص ولونه وحجم الخط ونوعه .

صورة : 

درس عمل علامات تبويب منسدلة بالـ css3 والجيكوري

مثال مباشر : 

من هنا

طريقة التركيب : 

• ادخل التخطيط .
• اختر اضافة اداة , وتكون عبارة عن html/javascript 
• الصق فيها هذا الكود مع تغير مايلزم : 

<div id="container">
<ul class="menu">
<li id="news" class="active">اخبار</li>
<li id="tutorials">تعليمات</li>
<li id="links">روابط</li>
</ul>
<span class="clear"></span>
<div class="content news">
<ul>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر تطلق خدمة جوجل ادورز</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> تستطيع الربح من خلال اضافة ادسنس لمدونتك.</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> تطويرات قدامه قوية لمدونات بلوجر.</li>
<ul>
</div>
<div class="content tutorials">
<ul>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر قريباَ ستبداء في تطوير شكل لوحة التحكم</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> ابداء مدونتك الحرة في بلوجر .!</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> بلوجر تتيح لك نطاق مجاني واستضافة مجانيه.</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> عالم التدوين اسهل في بلوجر</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> خدمة بلوجر هي خدمة سهله لكل مدون مبتداء.</li>
<ul>
</div>
<div class="content links">
<ul>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
<li><img src="https://jetara.googlecode.com/svn/trunk/bullet.gif" alt="-" /> <a href="http://blog.7lolblogger.com">blog.7lolblogger.com</a> - مدونة حلول بلوجر</li>
<ul>
</div>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="https://jetara.googlecode.com/svn/trunk/tabs.js"></script>

<style>
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
margin:0pt;
padding:0pt;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
#container {
margin: 2px auto;
max-width: 300px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: right;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
.content.news{
display: block;
}
.content.tutorials{
display: none;
}
.content.links{
display: none;
}
.content.links a{
color: #5f95ef;
}
div#container li {
direction: rtl;
}
div#container {
font: 12px tahoma,arial;
color: #333;
}
</style>

طبعاَ الاشياء التي تحتاج ان تستبدلها هي التي بالعربي , موفقين :)

11:05 ص