|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
11-10-2012, 04:39 PM | #1 |
مدون نشيط
تاريخ التسجيل: Jul 2012
الدولة: Algeria,Adrar
المشاركات: 178
|
قائمة أفقية احترافية لكثرة الطلب عليها
السلام عليكم و كالعادة من أخوكم Nassro
اليوم جايب ليكم اضافة جميلة و اساسية للمدونات الإحترافية اضافة اليوم هي قائمة أفقية جميلة تعمل بـjQuery شاهد صورة الإضافة للمعاينة من داخل المدونة http://3anoor.blogspot.com/ نأتي لطريقة التركيب نتوجه الى لوحة التحكم ثم الى قالب المدونة و نقوم بالتعليم على خانة التوسيع و نبحث على كود بلغة HTML:
]]></b:skin>
كود بلغة HTML:
#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float: left; 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; } كود بلغة HTML:
</head>
كود بلغة HTML:
<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:
<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Link 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="#">Link 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Link 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="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </li></ul> و Link الى تسمية القسم أما بالنسبة Drop فاهي مثل Link أتمنى أن تكون هده الإضافة قد أعجبت الجميع أنتظر ردودكم الحلوة
__________________
|
11-10-2012, 07:05 PM | #2 |
مدون جديد
تاريخ التسجيل: Nov 2012
المشاركات: 3
|
رد: قائمة أفقية احترافية لكثرة الطلب عليها
السلام عليكم ورحمة الله وبركاته احييكم على هذه الجهود الرائعة والتي افادة كثيرا من المدونين وانا من اكثرهم وليا طلب بسيط ارجو ان اجده لديكم هل استطيع جعل قائمة الصفحات الافقية تكون عائمة وشكرا جزيلا لكم م محمد جمال صاحب مدونة عالم الهندسة المعمارية اتشرف بزيارتكم http://woarch.blogspot.com/ |
11-11-2012, 05:16 PM | #3 |
مدون جديد
تاريخ التسجيل: Nov 2012
المشاركات: 13
|
رد: قائمة أفقية احترافية لكثرة الطلب عليها
موضوع جميل لكن .. حبذا لو تذكر لنا طريقة إنشاء تفرع ثالت.. يتفرع عن drop 1-3 مثلا
__________________
مرحبا بكم في مدونتي http://khodmenni.blogspot.com ---------------------------------------- مدونة خذ مني الإلكترونية |
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) | admin | إضافات وأدوات بلوجر | 8 | 06-12-2013 03:37 PM |
كيف اضع قائمة أفقية في اعلى الصفحة دون مشاكل | ساجد عابد | طلبات الدعم الفني | 4 | 12-02-2012 03:13 PM |
اضافة قائمة المواقع الاجتماعية والاشتراك احترافية | mostafa alwin | إضافات وأدوات بلوجر | 9 | 10-28-2012 12:23 AM |
بس يا سيدى بعد ما بصتلها اغم عليها ترحب بكم | sheko | المنتدى الإشهاري | 5 | 09-09-2012 09:39 AM |
إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر | admin | إضافات وأدوات بلوجر | 6 | 08-13-2012 01:25 AM |
الساعة الآن 03:09 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |