إضافة قائمة عليا بتقنيتي Css و jQuery

السلام عليكم ورحمة الله تعالى وبركاته

اليوم وكما العادة ساقدم لكم  إخوتي الكرام أجمل إضافة لمدوناتكم

وأتأسف عن التأخر في التدوين وهذا راجع لانشغالي بالدراسة والتصميم

المهم

 

 

عنوان الإضافة

 

إضافة قائمة عليا بتقنيتي Css و jQuery 

معلومات عن الإضافة

 

قائمة منسدلة

يمكن وضعها بأعلى المدونة

بالوان متعددة

بتقنيتي Css و jQuery

 

صورة الإضافة

 

 

 

 

شرح الإضافة

كالعادة نعمل الآتي :

إذهب إلى لوحة التحكم ثم قالب ثم تعديل على HTML ولاتنسى الضغط على توسيع القوالب

إبحث عن الكود التالي

 </head>

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

<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

ثم إبحث عن الكود التالي

 ]]></b:skin>

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

     /*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

    .lavalamp {

    position: relative;

    border: 1px solid #d6d6d6;

    background: #fff;

    padding: 15px;

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

    border-radius : 10px;

    -moz-border-radius : 10px;

    -webkit-border-radius : 10px;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)),   

    to(rgb(204,204,204)));

    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)),

    to(rgb(204,204,204)));

    height: 18px;

    font-family: calibri;

    }

مرحلة الألوان الإختيارية

بالنسبة لهذه المرحلة ستختار عزيزي الزائر أحد الألوان المناسبة لمدونتك وذللك عبر إضافته بعد الكود السابق 

 

--------------------------------

اللون الوردي أو البنفسجي

--------------------------------

.magenta {

background : rgb(190,64,120);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));

border: 1px solid #841144;

}

------------------------------

لون أزرق سمــاوي فاتـــح

------------------------------

.cyan {

background : rgb(64,181,197);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));

border: 1px solid #2f8893;

}

----------------

اللون الاصفر

----------------

.yellow {

background : rgb(255,199,79);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));

border: 1px solid #c08c1f;

}

------------------

اللون البرتقالي

------------------

.orange {

background : rgb(255,133,64);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));

border: 1px solid #c04f11;

}

----------------

اللون الأسود

----------------

.dark {

background : rgb(89,89,89);

background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));

border: 1px solid #272727;

}

المرحلة الثانية

بالنسبة لهذه المرحلة سوف تقوم عزيزي الزائر بإضافة الكود التالي بعد الكود السابق لأحد الألوان الذي اخترته

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{

color: #fff;

text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {

text-decoration: none;

color: #262626;

line-height: 20px;

}

.lavalamp ul {

margin: 0;

padding: 0;

z-index: 300;

position: absolute;

}

.lavalamp ul li {

list-style: none;

float:left;

text-align: center;

}

.lavalamp ul li a {

padding: 0 20px;

text-align: center;

}

.floatr {

position: absolute;

top: 10px;

z-index: 50;

width: 70px;

height: 30px;

border-radius : 8px;

-moz-border-radius : 8px;

-webkit-border-radius : 8px;

background : rgba(0,0,0,.20);

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

}

المرحلة الثالثة و الأخيرة

ثم قم بحفظ القالب بعد ذللك قم بالذهاب إلى لوحة التحكم من جديد لكن هذه المرة ستضغط على تخطيط وإضافة اداة ثم اداة HTML/JavaScript

 وضع الكود التالي داخل الأداة

<div>

<ul>

<li><a href="/">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">Back to Article</a></li>

<li><a href="#">How it Works?</a></li>

</ul>

<div></div>

</div>