الرئيسيةالبوابةأحدث الصورالتسجيلدخول
كود اضافة قائمة روابط على شكل شجرة Log10شركة انكور التطويريةكود اضافة قائمة روابط على شكل شجرة Expire10السبت أغسطس 21, 2021 6:27 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10أفضل ألعاب الفلاش أضفها إلى موقعك مجاناًكود اضافة قائمة روابط على شكل شجرة Expire10الثلاثاء يوليو 05, 2016 12:50 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10تصميم إستايل كامل لمنتدى تقنية الحاسوبكود اضافة قائمة روابط على شكل شجرة Expire10الجمعة فبراير 26, 2016 6:06 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10كود Template تسجيل الدخول - احلى منتدىكود اضافة قائمة روابط على شكل شجرة Expire10السبت يناير 16, 2016 2:54 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10طريقة إنشاء ظل بطريقة احترافية باستخدام برنامج الفوتوشوب ( مع شرح دقيق مرفق بالصور )كود اضافة قائمة روابط على شكل شجرة Expire10الثلاثاء يناير 12, 2016 2:44 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10ستايل منتدى الابداع العربيكود اضافة قائمة روابط على شكل شجرة Expire10الثلاثاء ديسمبر 22, 2015 3:15 pm من طرفكود اضافة قائمة روابط على شكل شجرة Log10اهم مميزات السيرفرات السحابيةكود اضافة قائمة روابط على شكل شجرة Expire10الثلاثاء ديسمبر 22, 2015 2:26 pm من طرفكود اضافة قائمة روابط على شكل شجرة Log10تم تصميم بوابة عاصفة التطويركود اضافة قائمة روابط على شكل شجرة Expire10الثلاثاء ديسمبر 22, 2015 2:25 pm من طرفكود اضافة قائمة روابط على شكل شجرة Log10طلب تكويد الاستايل يا جماعاكود اضافة قائمة روابط على شكل شجرة Expire10الإثنين ديسمبر 14, 2015 4:04 am من طرفكود اضافة قائمة روابط على شكل شجرة Log10طلب تكويد استايلكود اضافة قائمة روابط على شكل شجرة Expire10الأحد ديسمبر 13, 2015 9:11 pm من طرف

Untitled 4

شاطر

رقم المشاركة : ( 1 )
الرسام
الرسام
مدير عام
 
عدد المساهمات : 947
تاريخ التسجيل : 06/11/2013
مُساهمةكود اضافة قائمة روابط على شكل شجرة

كُتب : [ الأربعاء أغسطس 26, 2015 2:52 am ]




يسعدني ان اقدم لكم كود روابط على شكل قائمة شجرة
لمعاينة الشكل
كود اضافة قائمة روابط على شكل شجرة Ashamp10

واليكم الام الكود 

الكود:
<style type='text/css'>
.related-cross {
  width: 100%;
  overflow: hidden;
  width: 300px;
  padding: 0 0 100px;
  margin: 40px 0 0;
  background: url("http://im49.gulfup.com/0en6jl.png") 0 100% no-repeat;
}
.related-cross ul {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
  background: url("http://im77.gulfup.com/ZQnZ9J.png") -646px 0 repeat-y;
}
.related-cross li {
  width: 146px;
  overflow: hidden;
  margin: 0 auto;
  padding: 5px 0;
  list-style-type: none;
}
.related-cross a {
  padding: 5px 10px 4px;
  background: #3f8cd9;
  color: #fff;
  background: #999;
  font-size: 0.75em;
  text-transform: uppercase;
}
.related-cross a:hover {
  background-color: #84af00 !important;
  color: #fff !important;
  text-decoration: none;
}
.related-cross .related-cross-center {
  clear: both;
  width: 200px;
  text-align: center;
  background: url("http://im77.gulfup.com/L7vre8.png") 50% -11px no-repeat;
}
.related-cross .related-cross-center a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .related-cross-left {
  clear: left;
  float: left;
  margin: 12px 0 0;
  text-align: right;
  display: inline;
}
.related-cross .related-cross-left a {
  padding-left: 15px;
  background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat;
}
.related-cross .related-cross-right {
  clear: right;
  float: right;
  text-align: left;
  margin: 0 1px 12px 0;
  display: inline;
}
.related-cross .related-cross-right a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xataka-g,
.related-cross .tec-genbetasocialmedia-g,
.related-cross .tec-xatakahome-g,
.related-cross .tec-nacionred-g,
.related-cross .mot-motorpasion-g,
.related-cross .mot-motorpasionfuturo-g,
.related-cross .eco-elblogsalmon-g,
.related-cross .eco-pymesyautonomos-g,
.related-cross .oci-blogdecine-g,
.related-cross .oci-diariodelviajero-g,
.related-cross .oci-fueradelimites-g,
.related-cross .est-trendencias-g,
.related-cross .est-trendenciasbelleza-g,
.related-cross .est-trendenciashombre-g,
.related-cross .est-compradiccion-g,
.related-cross .est-trendenciasshopping-g,
.related-cross .est-directoalpaladar-g,
.related-cross .est-poprosa-g,
.related-cross .est-trendenciaslifestyle-g {
  clear: both;
  width: 200px;
  text-align: center;
  background: url("http://im56.gulfup.com/TjT79B.png") 50% -11px no-repeat;
}
.related-cross .tec-xataka-g a,
.related-cross .tec-genbetasocialmedia-g a,
.related-cross .tec-xatakahome-g a,
.related-cross .tec-nacionred-g a,
.related-cross .mot-motorpasion-g a,
.related-cross .mot-motorpasionfuturo-g a,
.related-cross .eco-elblogsalmon-g a,
.related-cross .eco-pymesyautonomos-g a,
.related-cross .oci-blogdecine-g a,
.related-cross .oci-diariodelviajero-g a,
.related-cross .oci-fueradelimites-g a,
.related-cross .est-trendencias-g a,
.related-cross .est-trendenciasbelleza-g a,
.related-cross .est-trendenciashombre-g a,
.related-cross .est-compradiccion-g a,
.related-cross .est-trendenciasshopping-g a,
.related-cross .est-directoalpaladar-g a,
.related-cross .est-poprosa-g a,
.related-cross .est-trendenciaslifestyle-g a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xatakaon-g,
.related-cross .tec-xatakafoto-g,
.related-cross .tec-genbetadev-g,
.related-cross .tec-applesfera-g,
.related-cross .tec-xatakawindows-g,
.related-cross .mot-motorpasionf1-g,
.related-cross .eco-ahorrodiario-g,
.related-cross .oci-vayatele-g,
.related-cross .oci-zonafandom-g,
.related-cross .oci-notasdefutbol-g,
.related-cross .est-bebesymas-g,
.related-cross .est-vitonica-g,
.related-cross .est-ambienteg-g {
  clear: left;
  float: left;
  margin: 12px 0 0;
  text-align: right;
  display: inline;
}
.related-cross .tec-xatakaon-g a,
.related-cross .tec-xatakafoto-g a,
.related-cross .tec-genbetadev-g a,
.related-cross .tec-applesfera-g a,
.related-cross .tec-xatakawindows-g a,
.related-cross .mot-motorpasionf1-g a,
.related-cross .eco-ahorrodiario-g a,
.related-cross .oci-vayatele-g a,
.related-cross .oci-zonafandom-g a,
.related-cross .oci-notasdefutbol-g a,
.related-cross .est-bebesymas-g a,
.related-cross .est-vitonica-g a,
.related-cross .est-ambienteg-g a {
  padding-left: 15px;
  background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat;
}
.related-cross .tec-xatakamovil-g,
.related-cross .tec-xatakandroid-g,
.related-cross .tec-genbeta-g,
.related-cross .tec-vidaextra-g,
.related-cross .tec-xatakaciencia-g,
.related-cross .mot-motorpasionmoto-g,
.related-cross .eco-tecnologiapyme-g,
.related-cross .oci-poprosa-g,
.related-cross .oci-hipersonica-g,
.related-cross .oci-papelenblanco-g,
.related-cross .oci-fandemia-g,
.related-cross .est-decoesfera-g,
.related-cross .est-pequesymas-g,
.related-cross .est-embelezzia-g {
  clear: right;
  float: right;
  text-align: left;
  margin: 0 1px 12px 0;
  display: inline;
}
.related-cross .tec-xatakamovil-g a,
.related-cross .tec-xatakandroid-g a,
.related-cross .tec-genbeta-g a,
.related-cross .tec-vidaextra-g a,
.related-cross .tec-xatakaciencia-g a,
.related-cross .mot-motorpasionmoto-g a,
.related-cross .eco-tecnologiapyme-g a,
.related-cross .oci-poprosa-g a,
.related-cross .oci-hipersonica-g a,
.related-cross .oci-papelenblanco-g a,
.related-cross .oci-fandemia-g a,
.related-cross .est-decoesfera-g a,
.related-cross .est-pequesymas-g a,
.related-cross .est-embelezzia-g a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xataka-g a {
  background-color: #6ca427;
}
.related-cross .tec-xatakamovil-g a {
  background-color: #437f27;
}
.related-cross .tec-xatakafoto-g a {
  background-color: #333333;
}
.related-cross .tec-xatakaon-g a {
  background-color: #6d8c3a;
}
.related-cross .tec-xatakandroid-g a {
  background-color: #7d9f13;
}
.related-cross .tec-xatakahome-g a {
  background-color: #2f5083;
}
.related-cross .tec-xatakawindows-g a {
  background-color: #0f6d39;
}
.related-cross .tec-xatakaciencia-g a {
  background-color: #53a7a7;
}
.related-cross .tec-vidaextra-g a {
  background-color: #1680c6;
}
.related-cross .tec-applesfera-g a {
  background-color: #38278a;
}
.related-cross .tec-genbeta-g a {
  background-color: #004c98;
}
.related-cross .tec-genbetadev-g a {
  background-color: #94c6eb;
  color: #333;
}
.related-cross .tec-genbetasocialmedia-g a {
  background-color: #658eae;
}
.related-cross .tec-nacionred-g a {
  background-color: #fd932f;
}
.related-cross .est-trendencias-g a {
  background-color: #990033;
}
.related-cross .est-trendenciasbelleza-g a {
  background-color: #927897;
}
.related-cross .est-trendenciashombre-g a {
  background-color: #184272;
}
.related-cross .est-directoalpaladar-g a {
  background-color: #bf561f;
}
.related-cross .est-bebesymas-g a {
  background-color: #896399;
}
.related-cross .est-pequesymas-g a {
  background-color: #b3df41;
}
.related-cross .est-vitonica-g a {
  background-color: #628f1a;
}
.related-cross .est-decoesfera-g a {
  background-color: #2eafda;
}
.related-cross .est-compradiccion-g a,
.related-cross .est-trendenciasshopping-g a {
  background-color: #aa022b;
}
.related-cross .est-embelezzia-g a {
  background-color: #164dc5;
}
.related-cross .est-ambienteg-g a {
  background-color: #c96eab;
}
.related-cross .est-poprosa-g a {
  background-color: #df69b0;
}
.related-cross .est-trendenciaslifestyle-g a {
  background-color: #819f77;
}
.related-cross .oci-fueradelimites-g a {
  background-color: #122d02;
}
.related-cross .oci-vayatele-g a {
  background-color: #fa5c01;
}
.related-cross .oci-diariodelviajero-g a {
  background-color: #f8f3ac;
  color: #333;
}
.related-cross .oci-blogdecine-g a {
  background-color: #004f00;
}
.related-cross .oci-notasdefutbol-g a {
  background-color: #66b618;
}
.related-cross .oci-hipersonica-g a {
  background-color: #111111;
}
.related-cross .oci-papelenblanco-g a {
  background-color: #ab9c87;
}
.related-cross .oci-poprosa-g a {
  background-color: #df69b0;
}
.related-cross .eco-elblogsalmon-g a {
  background-color: #fdd1a2;
  color: #333;
}
.related-cross .eco-pymesyautonomos-g a {
  background-color: #165b8d;
}
.related-cross .eco-tecnologiapyme-g a {
  background-color: #84b7da;
}
.related-cross .eco-ahorrodiario-g a {
  background-color: #1c5baa;
}
.related-cross .mot-motorpasion-g a {
  background-color: #980000;
}
.related-cross .mot-motorpasionf1-g a {
  background-color: #491112;
}
.related-cross .mot-motorpasionmoto-g a {
  background-color: #fd7800;
}
.related-cross .mot-motorpasionfuturo-g a {
  background-color: #048fbd;
}
.related-cross .tec-vidaextra-g-mx {
  clear: left;
  display: inline;
  float: left;
  margin: 12px 0 0;
  text-align: right;
}
.related-cross .tec-vidaextra-g-mx a {
  background: url('http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png') no-repeat scroll 0 50% rgba(0, 0, 0, 0);
  padding-left: 15px;
  background-color: #1680C6;
}</style>
  <div class="related-cross">
    <ul>
            <li class="tec-xataka-g"><a href="#">رابط 1</a></li>
            <li class="tec-xatakamovil-g"><a href="#">رابط 2</a></li>
            <li class="tec-xatakafoto-g"><a href="#">رابط 3</a></li>
            <li class="tec-xatakandroid-g"><a href="#">رابط 4</a></li>
            <li class="tec-xatakahome-g"><a href="#">رابط 5</a></li>
            <li class="tec-xatakawindows-g"><a href="#">رابط 6</a></li>
            <li class="tec-xatakaciencia-g"><a href="#">رابط 7</a></li>
            <li class="tec-applesfera-g"><a href="#">رابط 8</a></li>
            <li class="tec-vidaextra-g"><a href="#">رابط 9</a></li>
            <li class="tec-genbeta-g"><a href="#">رابط 10</a></li>
            <li class="tec-genbetadev-g"><a href="#">رابط 11</a></li>
          </ul>

ملاحظة يمكنك وضع الكود ان مااردت
بالتوفيق

توقيع : الرسام

رقم المشاركة : ( 2 )
Gta_amine
Gta_amine
 
عدد المساهمات : 13
تاريخ التسجيل : 30/06/2015
مُساهمةرد: كود اضافة قائمة روابط على شكل شجرة

كُتب : [ الأربعاء أغسطس 26, 2015 5:21 am ]




شكرا لك

توقيع : Gta_amine

رقم المشاركة : ( 3 )
الشاعر 96
الشاعر 96
 
عدد المساهمات : 21
تاريخ التسجيل : 29/08/2015
مُساهمةرد: كود اضافة قائمة روابط على شكل شجرة

كُتب : [ السبت أغسطس 29, 2015 8:47 pm ]




شكرا لك على الشجرة 
مظهرها و تصميمها حلو 

توقيع : الشاعر 96



الانتقال السريع

كلمة الادارة
منتدى التكويد العربي
او ل منتدى يختص بالتصميم والتكويد
أسس منتدى التكويد العربي يوم 15الأربعاء 6 نوفمبر 2013 - 14:49 )على أساس فكرة بسيطة
وهي تقديم محتوى يروق الباحث العربي خلال تصفحه للنت وذلك في مجال آخر تطورات
البرمجة وتصميم المواقع بافضل الطرق الحديثة وكذا كل الأخبار المتعلقة بالتقنية بصفة عامة
كما أننا حاولنا مزج التقنية بعالم التصميم. نقدم مواضيع خاصة بنا غير منقولة
من أي موقع او مدونة أو منتدى عربي آخر بل نلخص ما تعرضه المواقع الرسمية
لمنتوج أو اكواد او تصميم معين وونبرمجه للغة خاصة. إهتماماتنا في هذا المنتدى هو
على الشكل التالي:
1- طرح آخر أخبار البرمجة والتصميم.
2- توفير معلومات حول آخر الاكواد والتصميم المطروحة في جميع المجالات منها المجانية أو المدفوعة.
3- تلبية الباحث العربي في جميع مطالبه عبر طرح مواضيع تهتم به وبمواقعه.
4- آخر الاعمال والاكواد والتصاميم الموجدة بطرق احترافية.
5- كل ما يتعلق بالمواقع والمنتديات.
6- تقديم نصائح وأدوات لمصممي مواقع الأنترنت.
7- توفير أدوات التصميم لكل المصممين.
كما نعرض مواضيع متنوعة من فيديوهات تعليمية للمبتدئين وألبوم صور لآخر المنتوجات التي توصلت إليها التكنولوجيا الحديثة.

جميع حقوق الطبع والنشر محفوظة لمنتدى التكويد العربي


w w w . t a c w e d . com

تصميم وتكويد الرسام

شاطراذا تحب تساعدنا ما ياخذ من وقتك ثواني، إذا دخلت أي موضوع في المحبين فقط إضغط زر المشاركة من اليسار و شارك الموضوع بمواقع التواصل الإجتماعي