حصري فقط على مدونتنا
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته .. الصلاة و السلام على رسول الله
بحثت كثير عن قائمة منسدلة تناسبني و بسيطة كي أفهمها لكن لم أجدها و لكن وجدت ما يشابهها و قمت بالتعديل عليها و ها أنا أنقل إليكم هذه القائمة مع شرحي الخاص و توضيح إضافاء الجماليات عليها
أولاً من هنا حمّلوا الكود
تحميل الكود
قائمة مدونتي هي مثال لكن بإختلاف الالوان و الخلفيات
في القالب قوموا بالبحث عن كلمة END HEARDER ثم ألصقوا الكود تحتها
<div class="d70bl">
<li><a
href="http://hayatillah.blogspot.ae/">الرئيسية</a></li>
<li><div
class="d70blfixe"><a href="#">العنوان</a></div><ul>
<li><a
href="رابط الفرع"target="_blank">الفرع 1</a></li>
<li><a
href="رابط الفرع"target="_blank">الفرع 2</a></li></ul></li>
<li><div
class="d70blfixe"><a href="#">العنوان</a></div><ul>
<li><a
href="رابط الفرع" target="_blank">الفرع 1</a></li>
<li><a
href="رابط الفرع"target="_blank">الفرع 2</a></li></ul></li>
<li><div
class="d70blfixe"><a href="#">العنوان</a></div><ul>
<li><a
href="رابط الفرع" target="_blank">الفرع 1</a></li>
<li><a
href="رابط الفرع" target="_blank">الفرع 2</a></li></ul></li>
<li><div
class="d70blfixe"><a href="#">العنوان</a></div><ul>
<li><a
href="رابط الفرع"target="_blank">الفرع 1</a></li>
<li><a
href="رابط الفرع"target="_blank">الفرع 2</a></li></ul></li>
<li><div
class="d70blfixe"><a href="#">العنوان</a></div><ul>
<li><a
href="رابط الفرع"target="_blank">الفرع 1</a></li>
<li><a
href="رابط الفرع"target="_blank">الفرع 2</a></li></ul></li>
<a
href="http://youstaff.blogspot.com"
style="display:none;">blogger</a>
</div>
<style
type="text/css">
.d70bl, .d70bl ul{position:relative;list-style: none;text-align:
center;z-index:999;padding: 0;background:rgb(38,66,80) url('http://www.hdwallpapersplus.com/wp-content/uploads/2013/04/Blue-wallpaper-28.jpg
') repeat-x;border-bottom: 1px solid rgb(38,66,80);height:32px;}
.d70bl{padding-left:80px;margin-top:0px;}
.d70bl
li{float: right;}
.d70bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d70bl li:hover ul ul {left: -999em;}
.d70bl li:hover ul ul ul{left: -999em;}
.d70bl li:hover ul, .d70bl li li:hover ul,.d70bl li li li:hover ul{left:
auto;min-height:1%;}
.d70bl
li ul {margin-left:-28px;border-top: 1px solid
rgb(38,66,80);width:144px;margin-top:-1px;}
.d70bl
li ul a{border-right: 1px solid rgb(38,66,80);}
.d70bl
li ul li a {width:125px;}
.d70bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}
.d70bl
a {color:white;
background:rgb(38,66,80) url(' https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ7vwoYlh_UPewLW67_EbcSvJIo4r2NUOpb7Zm3b2IHIuzFOalorXyC5oiR
') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px
solid rgb(38,66,80);padding:7px 9px; display:block;text-decoration: none;
font-weight:;font-family:
Droid Arabic Kufi;font-size: 13px;line-height: 18px;}
.d70bl
a:hover{color:#191970;background:white;}
.d70blfixe
a:hover {color:white;
background:rgb(38,66,80) url('http://www.piicss.com/img/12/6f4871f9398676a5fc359728b652f861.jpg
') no-repeat;}
</style>
* قم بتغيير كلمة ( العنوان ) بالعنوان الرئيسي.
* قم بتغيير كلمة ( الفرع) بالعناوين الفرعية أو المنسدلة و كلمة الرابط برابط كل عنوان
*لزيادة عدد الفروع قم بنسخ الكود الذي يحوي كلمة الفرع حسب العدد الذي تريده.
*لزيادة عدد الصفحات أو الاقسام كنا تسميه قم بنسخ الكود الذي يحوي كلمة العنوان حسب العدد الذي تريده.
* يجب أن تجعل كود الفرع الأخير دائماً في الآخر في جميع الاكواد كي تتجنب المشاكل
لون الشريط
قم بتغيير رابط الصورة باللون الازرق برابط الصورة التي تريدها
لون خلفية الكلمات
قم بتغيير رابط الصورة باللون البنفسجي برابط الصورة التي تريدها
لون خلفية العناوين الرئيسية عند مرور السهم عليها
قم بتغيير رابط الصورة باللون الوردي برابط الصورة التي تريدها
***في الواقع لو لاحظتم ستجدون أن خلفيات العناوين و الفروع و الشريط روابط صور مما يعني أن يمكنكم ليس مجرّد تغيير اللون و لكن كذلك الشكل ..***
نوع الخط
قم بتغيير هذه الكلمة Droid Arabic Kufi بنوع الخط الذي تريده علماً بأن هذا الخط هو الأجمل
حجم الخط
قم بتغيير حجمه بدلاً من الرقم 13 في font-size:13px
خط عريض (bold)
قوموا بإضافة كلمة bold بعد font-weight:
لون الخط
قم بتغيير كلمة white الزرقاء بإسم اللون الذي تريده علماً بأن يكون كلمة واحدة فقط مثل (blue,red) و ليس(light blue,dark red)
لون خلفية الفروع عند مرور السهم عليها
قم بتغيير كلمة white الخضراء بإسم اللون الذي تريده علماً بأن يكون كلمة واحدة فقط مثل (blue,red) و ليس(light blue,dark red)
لون الخط عند مرور السهم عليه
قم بتغيير كلمة white البرتقالية بإسم اللون الذي تريده علماً بأن يكون كلمة واحدة فقط مثل (blue,red) و ليس(light blue,dark red)
إذا كانت مدوناتك أجنبية يمكنكم تغيير كلمة right إلى left في float : right
4 التعليقات:
مشكورررررررررررررر
العفو أخي الكريم على تقديرك لنا ...
جازاك الله خيرا
وجزاك أخي الكريم :)
إرسال تعليق