منتديات الهجان
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات الهجان


 
الرئيسيةأحدث الصورالتسجيلدخول

 

  أفضل قائمة منسدلة على بلوجر بتقنية CSS3

اذهب الى الأسفل 
كاتب الموضوعرسالة
الهجان
مستر وليد فريد
مستر وليد فريد
الهجان


ادعية لوجة الله : هوا الله
السرطان ذكر
عدد المساهمات : 4697
تاريخ الميلاد : 04/07/1975
تاريخ التسجيل : 21/09/2009
العمر : 49

 أفضل قائمة منسدلة على بلوجر بتقنية CSS3  Empty
مُساهمةموضوع: أفضل قائمة منسدلة على بلوجر بتقنية CSS3     أفضل قائمة منسدلة على بلوجر بتقنية CSS3  Icon_minitimeالإثنين يوليو 22 2013, 01:40

 أفضل قائمة منسدلة على بلوجر بتقنية CSS3  Blogger+blue+css+muti+drop+down+menu%D9%86%D8%B3%D8%AE
مرحبا أصدقاء...اليوم اعرضه رهيبة جديدة تبحث عن مدونات بلوجر "نوع الاضافة CSS3 نمط القائمة المنسدلة".هذه مهنية يبحث سلسه القائمة منسدلة التي تم إنشاؤها مع CSS3.وسوف تجعل مدونتك أكثر جمالا وجاذبية.وهذا هو الحال قائمة كبيرة التي يجب أن يكون لديك على مدونتك والحصول على اكثر الاضافات فى الصفحة الرائيسية 


شرح الاضافة فى مدونتك




ازهب الى لوحه التحكم

ثم  القالب
 توسيع قوالب عناصر واجهة المستخدم

اعمل نسخه احطياطى

الآن اضغط على
 أفضل قائمة منسدلة على بلوجر بتقنية CSS3  2013-05-06_120149

 والبحث عن الكود أدناه

اقتباس :
الكود:
]]></b:skin>

الآن قم بلصق أدناه الكود البرمجية أعلاه فقط/قبل ذلك

الكود:





[quote]
.preload1 {background: url(http://2.bp.blogspot.com/-gCqdzgTyuVw/UPgwtLSp86I/AAAAAAAAHTQ/wWj6CGGRye4/s1600/blank_over.gif);}
.preload2 {background: url(http://1.bp.blogspot.com/-8iKiqCSxeVQ/UPgwtC8ExWI/AAAAAAAAHTM/jnxVAfevkIE/s1600/blank_overa.gif);}
#nav
 {padding:0; margin:0; list-style:none; height:36px; background:#fff;
position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav
 li a.top_link {display:block; float:left; height:36px;
line-height:27px; color:#ccc; text-decoration:none; font-size:11px;
font-weight:bold; padding:0 0 0 12px; cursor:pointer;background:
url(http://1.bp.blogspot.com/-6uDnniKYoso/UPgwrtD0W3I/AAAAAAAAHTA/x4Ubm-DaFJY/s1600/blank.gif);}
#nav
 li a.top_link span {float:left; display:block; padding:0 24px 0 12px;
height:36px;background:url(http://1.bp.blogspot.com/-6uDnniKYoso/UPgwrtD0W3I/AAAAAAAAHTA/x4Ubm-DaFJY/s1600/blank.gif)
 right top;}
#nav li a.top_link span.down {float:left; display:block;
 padding:0 24px 0 12px; height:36px;
background:url(http://3.bp.blogspot.com/-n52ha69F27o/UPgwtZVsiJI/AAAAAAAAHTU/VvyffTkP37I/s1600/blanka.gif)
 no-repeat right top;}
#nav li a.top_link:hover {color:#fff;
background:
url(http://2.bp.blogspot.com/-gCqdzgTyuVw/UPgwtLSp86I/AAAAAAAAHTQ/wWj6CGGRye4/s1600/blank_over.gif)
 no-repeat;}
#nav li a.top_link:hover span
{background:url(http://2.bp.blogspot.com/-gCqdzgTyuVw/UPgwtLSp86I/AAAAAAAAHTQ/wWj6CGGRye4/s1600/blank_over.gif)
 no-repeat right top;}
#nav li a.top_link:hover span.down
{background:url(http://1.bp.blogspot.com/-8iKiqCSxeVQ/UPgwtC8ExWI/AAAAAAAAHTM/jnxVAfevkIE/s1600/blank_overa.gif)
 no-repeat right top;}
#nav li:hover > a.top_link {color:#fff;
background:
url(http://2.bp.blogspot.com/-gCqdzgTyuVw/UPgwtLSp86I/AAAAAAAAHTQ/wWj6CGGRye4/s1600/blank_over.gif)
 no-repeat;}
#nav li:hover > a.top_link span
{background:url(http://2.bp.blogspot.com/-gCqdzgTyuVw/UPgwtLSp86I/AAAAAAAAHTQ/wWj6CGGRye4/s1600/blank_over.gif)
 no-repeat right top;}
#nav li:hover > a.top_link span.down
{background:url(http://1.bp.blogspot.com/-8iKiqCSxeVQ/UPgwtC8ExWI/AAAAAAAAHTM/jnxVAfevkIE/s1600/blank_overa.gif)
 no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0;
 top:31px; background: #fff; padding:3px; border:1px solid #3a93d2;
white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff
 
url(http://4.bp.blogspot.com/-sMuYzcoR6tc/UPgwrlUPXeI/AAAAAAAAHTE/9hfjvJrKp5g/s1600/arrow.gif)
 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2
 
url(http://2.bp.blogspot.com/-qtKuqJCpcrk/UPgwrk2pj9I/AAAAAAAAHS8/BxkRR_jvusI/s1600/arrow_over.gif)
 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover >
a.fly {background:#3a93d2
url(http://2.bp.blogspot.com/-qtKuqJCpcrk/UPgwrk2pj9I/AAAAAAAAHS8/BxkRR_jvusI/s1600/arrow_over.gif)
 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px;
 top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2;
white-space:nowrap; width:90px; z-index:400; height:auto;}[/quote]


إضافة كود HTML:
انتقل إلى لوحة التحكم الرئيسية مدونة > تخطيط > إضافة أداة > HTML/جافا سكريبت

الآن قم بلصق التعليمات البرمجية  HTML التالية في مجال تكنولوجيا المعلومات
الكود:
[right]




[quote]
<ul id="nav">
<li class="top"><a href="رابط" class="top_link"><span>عنوان</span></a></li>
<li
 class="top"><a href="#nogo2" id="products"
class="top_link"><span
class="down">Products</span></a>
<ul class="sub">
<li><a href="رابط" class="fly">Cameras</a>
<ul>
<li><a href="رابط">Nikon</a></li>
<li><a href="رابط">Minolta</a></li>
<li><a href="رابط">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="رابط" class="fly">Lenses</a>
<ul>
<li><a href="رابط">Wide Angle</a></li>
<li><a href="رابط">Standard</a></li>
<li><a href="رابط">Telephoto</a></li>
<li><a href="رابط" class="fly">Zoom</a>
<ul>
<li><a href="رابط">35mm to 125mm</a></li>
<li><a href="رابط">50mm to 250mm</a></li>
<li><a href="رابط">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="رابط">Mirror</a></li>
<li><a href="رابط" class="fly">Non standard</a>
<ul>
<li><a href="رابط">Bayonet mount</a></li>
<li><a href="رابط">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="رابط">Flash Guns</a></li>
<li><a href="رابط">Tripods</a></li>
<li><a href="رابط">Filters</a></li>
</ul>
</li>
<li
 class="top"><a href="رابط" id="services"
class="top_link"><span
class="down">Services</span></a>
<ul class="sub">
<li><a href="رابط">Printing</a></li>
<li><a href="رابط">Photo Framing</a></li>
<li><a href="رابط">Retouching</a></li>
<li><a href="رابط">Archiving</a></li>
</ul>
</li>
<li
 class="top"><a href="رابط" id="contacts"
class="top_link"><span
class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo32">Support</a></li>
<li><a href="#nogo32" class="fly">Sales</a>
<ul>
<li><a href="#nogo320">USA</a></li>
<li><a href="#nogo32">Canadian</a></li>
<li><a href="">South American</a></li>
<li><a href="" class="fly">European</a>
رابط<ul>
<li><a href="#nogo32" class="fly">British</a>
<li><a href="#nogo32">London</a></li>
<li><a href="#nogo32">Liverpool</a></li>
<li><a href="#nogo32">Glasgow</a></li>
<li><a href="#nogo32" class="fly">Bristol</a>
<ul>
<li><a href="#nogo32">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li
 class="top"><a href="#nogo57" id="privacy"
class="top_link"><span>Privacy
Policy</span></a></li>
</ul>[/quote]











[/right]



الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://waled6662003.yoo7.com
 
أفضل قائمة منسدلة على بلوجر بتقنية CSS3
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
»  قائمة منسدلة بتقنية CSS و javascript رائعة لمدونات بلوجر أحدث أشرطة القوائم المنسدلة
»  قائمة عمودية احترافية بتقنية HTML5 - CSS3
» حصريا قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري
» قائمة منسدلة احترافيه مع امكانية تغيير لونها بتقنية CSS
» قائمة منسدلة جامدة

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات الهجان :: ركن بلوجر :: اضافات وهكات بلوجر-
انتقل الى: