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

درس عمل علامات تبويب منسدلة بالـ 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>

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

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

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

goust

الساعه : 2014-07-12T22:07:00+03:00

تاريخ : 12‏/07‏/2014

من : المملكة العربيه السعوديه

التعليقات : 5

انشرها :

تاق :