معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   طلبات الدعم الفني (https://www.bloggerexp.com/forumdisplay.php?f=12)
-   -   كيفية انشاء قوائم فرعية من القائمة الافقية ؟! (https://www.bloggerexp.com/showthread.php?t=4408)

ساجد عابد 11-14-2012 02:21 PM

كيفية انشاء قوائم فرعية من القائمة الافقية ؟!
 
السلام عليكم ورحمة الله وبركاته
المشكلة تتلخص فى ان هذه القائمة مكونة من 7 قوائم رئيسية ليس لها تفريعات
و رغبتى هي انشاء قوائم تتفرع من هذه القوائم السبعة
وهذا هو شكل القائمة وكودها......
http://lh4.ggpht.com/_7wsQzULWIwo/Sz...png?imgmax=800
الكود
كود بلغة HTML:

<style> #tabsI {  float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana;  line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul {  margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li {  display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png)  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span  {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }  #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {  background-position:100% -42px; } </style> <div id="tabsI">  <ul> <li><a href="#"><span>Link  1</span></a></li> <li><a  href="#"><span>Link 2</span></a></li>  <li><a href="#"><span>Link  3</span></a></li> <li><a  href="#"><span>Link 4</span></a></li>  <li><a href="#"><span>Link  5</span></a></li> <li><a  href="#"><span>Link 6</span></a></li>  <li><a href="#"><span>Link  7</span></a></li> </ul> </div>

mah.elawady 11-14-2012 05:26 PM

رد: كيفية انشاء قوائم فرعية من القائمة الافقية ؟!
 
عندى نفس المشكله واريد حلها لو سمجتوا

Ayoub-php 11-14-2012 06:53 PM

رد: كيفية انشاء قوائم فرعية من القائمة الافقية ؟!
 
سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي



اقتباس:

]]></b:skin>

و قبله مباشرة قم بإضافة هذا الكود



اقتباس:

#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float:right; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #CAE8FA; } #jsddm li ul li a:hover { background: #A3CEE5; }



بعد إضافة الكود الأول قم بالبحث عن هذا الكود



اقتباس:

</head>

ثم أضف قبله مباشرة الكود الخاص بالجافا



اقتباس:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; //]]> </script>

الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة
توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript


أترك مكان العنوان فارغ و ضع الكود في المربع الكبير


الأن قم بإضافة الكود التالي للأداة



اقتباس:

<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> </li></ul>

قم بحفظ الكود و إسحبه لأعلى الصفحة إن لو تكن قد أضفته هناك في بادئ الأمر ثم أعد حفظ الصفحة ليتبث في مكانه الجديد.


ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.


اتمنى أن تنال الإضافة إعجابك بالتوفيق :bloggerexp:

ساجد عابد 11-14-2012 07:39 PM

رد: كيفية انشاء قوائم فرعية من القائمة الافقية ؟!
 
اقتباس:

المشاركة الأصلية كتبت بواسطة Ayoub-php (المشاركة 13907)
سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي






و قبله مباشرة قم بإضافة هذا الكود








بعد إضافة الكود الأول قم بالبحث عن هذا الكود






ثم أضف قبله مباشرة الكود الخاص بالجافا






الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة
توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript


أترك مكان العنوان فارغ و ضع الكود في المربع الكبير


الأن قم بإضافة الكود التالي للأداة






قم بحفظ الكود و إسحبه لأعلى الصفحة إن لو تكن قد أضفته هناك في بادئ الأمر ثم أعد حفظ الصفحة ليتبث في مكانه الجديد.


ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.


اتمنى أن تنال الإضافة إعجابك بالتوفيق :bloggerexp:

السلام عليكم ورحمة الله وبركاته
1 ) أخى من كل قلبي اشكرك على هذا المجهود الذى تقوم به من اجل خدمة الاخرين ، جعله الله فى الميزان ومعه الاخلاص:star::star::star::star::star:
2 ) هذا الموضوع تكملة للموضوع السابق فى ضبط القائمة الافقية
وهذا رابطه _ اتمنى مراجعة مشاركتى الاخيرة _
http://www.bloggerexp.com/showthread.php?t=4399
3 ) المشكلة عندى ليست خاصة بعمل القائمة الفرعية _ فهذه استطيع عملها _
ولكن
استطيع عمل هذا في اكواد غير هذا الكود وقائمة اخرى غير هذه القائمة
ولكن
المشكلة الان فى هذا الكود نفسه
فلقد حاولت بكل الطرق ضبطه _ بنفس الطريقة في الاكواد الاخرى _
ولكن
لا حل معه

4 ) فضلاً وليس أمراً اتمنى درس خاص لتعليم كل ما يخص _ القائمة الافقية _ وما يتعلق بها
من تغيير القائمة من اليسار الى اليمين والعكس ووضعها في اماكن مختلفة و تغيير الوانها ، والوان خطوطها وتغيير حجم مربعات القائمة ..الخ
وللعلم
استطيع الاجابة عل هذه الاسئلة ولكن اريد خبرتك فلعلك متخصص أكثر مني في هذا المجال _وانا لم اكمل الشهر في المدونات _
وإن لم ترغب في هذا
فبإذن الله ساقوم بعمل درس خاص في هذا واتمنى ان لا تحرمنا من الاضافات المميزة
وشكراً أخى ايوب


الساعة الآن 12:24 PM

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012