19‏/10‏/2013

شريط قوائم أو قائمة CSS أفقية خفيفة منسدلة

لا تضيع وقتك على الانترنت وتعلم: كيفية انشاء مدونة مجانا للمساهمة في محتوى الانترنت والربح منها.

في هذا الدرس سنرى طريقة إضافة شريط قوائم أو قائمة CSS أفقية منسدلة وبسيطة لمدوناتكم. والصورة أسفله تعطيكم فكرة عن شكل القائمة أو القوائم التس ستقومون بإضافتها على مدوناتكم.
قوائم أفقية منسدلة
قوائم CSS منسدلة لمدونات بلوجر

أهمية القوائم/ قائمة  ودورها على مدونة

دور القوائم كما اشرنا لذلك في مناسبات سابقة، يكمن في تسهيل تصفح محتوى المدونة بشكل سريع وزيادة عدد الصفحاتت المشاهدة. وكل هذا يلعب دورا هاما في قوة وفاعلية اي موقع ومدونة من جانب السيو والتصنيف. إضافة لذلك الإعتماد على الCSS فقط يحافظ على سرعة تحميل المدونة وهو ما تحبه آليات البحث. دعونا نرى الآن طريقة إضافة القوائم/القائمة لمدونات بلوجر خاصتكم.

طريقة إضافة شريط قوائم/قائمة CSS أفقية منسدلة لمدونات بلوجر

لإضافة قوائم CSS بسيطة لمدونة بلوجر يكفي تتبع  الخطوات التالية:
لا تنسوا حفظ قالب بلوجر خاصتكم قبل القيام بأية تغييرات.

شرح بالفيديو لطريقة اضافة القوائم:


1- من واجهة التحكم في مدونتكم قوموا بالنقر على قالب ثم تحرير HTML
2- من لوحة المفاتيح Ctrl+F  للبحث عن الجملة التالية: رأس الصفحة
سيظهر كود بهذا الشكل أو مشابه له:
مكان إضافة كود داخل القالب
مكان إضافة القوائم داخل كود القالب

لاحظوا كيف قمت بإضافة الكودلاحظوا كيف قمت بإضافة الكود:

شكل الكود بعد إضافته
بعد إضافة الكود

3 - لاحظوا الكود جيدا حيث ستقومون بإضافة الكود التالي بين </b:section>  و   </div> كما توضح الصورة أعلاه :

<ul id='menu'>
<li><a href='/'>الأولى</a></li>
<li>
<a href='#'>قائمة منسدلة</a>
<ul>
<li><a href='#'>خيار 1</a></li>
<li><a href='#'>خيار 2</a></li>
<li><a href='#'>خيار 3</a></li>
</ul>
</li>
<li><a href='#'>دروس</a></li>
<li><a href='#'>إتصل بنا</a></li>
<li><a href='#'>من نكون&#1567;</a></li>
</ul>

قمنا بإضافة كود html الخاص بالقوائم. وسنمر للخطوات التالية التي تتعلق بجانب التصميم وكود CSS.

4 - لنضف كود CSS الآن، للقيام بذلك إبحثوا عن:
]]></b:skin>

وفوقه  مباشرة أضيفوا الكود التالي:
#menu-trigger { /* Hide it initially */
display: none;
}

@media screen and (max-width: 600px) {

#menu-wrap {
position: relative;
}

#menu-wrap * {
box-sizing: border-box;
}

#menu-trigger {
display: block; /* Show it now */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
/* Multiple backgrounds here, the first is base64 encoded */
background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

}

#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
display: none;
box-shadow: none;

}

#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}

#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}

#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}

#menu ul li{
margin-left: 20px;
box-shadow: none;
}

#menu a{
display: block;
float: none;
padding: 0;
color: #999;

}

#menu a:hover{
color: #fafafa;
}

#menu ul a{
padding: 0;
width: auto;

}

#menu ul a:hover{
background: none;
}

#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}

}

@media screen and (min-width: 600px) {
#menu {
display: block !important;
}
}

/* iPad */
.no-transition {
transition: none;
opacity: 1;
visibility: visible;
display: none;
}

#menu li:hover > .no-transition {
display: block;
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}

#menu li {
float: right;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}

#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px 'Droid Arabic Kufi', Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;

}

#menu li:hover > a {
color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}

#menu:before,
#menu:after {
content: "";
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu-search {
margin:8px 10px 0 10px;
float: left;
color: white;
}

/*
* Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}
4 - قوموا بحفظ القالب.

تغيير ألوان القوائمة:

للتحكم في الوان القائمة يرجى تغيير الاكواد التالية باستعمال اداة اكواد الالوان:

الخلفية:

#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}

لون الخط المحيط بالقائمة: border: 1px solid #222;
لون الخلفية: background-image: linear-gradient(#444, #111); 

الروابط:


#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px 'Droid Arabic Kufi', Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;

لون الرابط: color: #999;


وصلنا لنهاية درس اليوم والذي رأينا فيه طريقة إضافة شريط قوائم أو قائمة CSS أفقية منسدلة وبسيطة لمدونات بلوجر. لا تنسوا أننا بصدد تطوير هذه القوائم بإضافات جديدة مثل مربع البحث والمزيد من الأدوات. 

قد تود قراءة:

12 تعليقات

درس رائع اخي الفاضل

سعيد بإعجابك
شكرا لك ودمت دائما متابعا لنا :)

اقسم بالله شرح رائع ان بدور علي مثل هذا الشرح من زمان مشكور جدا جدا

انا عملت قائمة منسدلة بشكل طبيعي ولكن المشكلة الي واجهتني عندما تنسدل القائمة لتظهر القائمة الفرعية فانها تظهر تحت عناصر ال body الاخرى وليس فوقها والطبيعي فوقها
وهذا يعني ان انها لن تكون فعالة اذا لا استطيع تمرير الماوس لبقية القائمة بسبب توقفها عند اي شي خلفها

راجع الاكواد جيدا أخي
ربما يكون هناك جزء من القائمة به خطأ وبالتالي يؤثر على عملها

شكرا لك أخي الكريم فقط أودو تنبيهك قائمة مواضيج جديدة تغطي على الجزء الأكبر من الموضوع خاصة الأكواد وبالتالي لا يمكن التيقن بأخد الكود كاملا فقط إنزع التتبيث عن القائمة وشكرا لك على الخدمة والإهتمام

شكرا على التنبيه اخي الكريم
لقد قمت بتغيير قيمة عرض الاداة


شكرا عل الشرح المبسط ونرجو منكم إعطاءنا كبفية تغيير لون القائمة ولون الخط

شكرا أخي بارك الله فيك

من فضلك كود لزيادة قائمة منسدلة أخرى

هذه القائمة لا تحتوي عليه
سأحاول نشر درس أخر شكرا على التنبيه

بالنسبو للون والخط راجع دروس html و css
لقد قمنا بنشرها بالفيديو مؤخرا

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله