[ عام ] حصريا اضافة قائمة الافقية غاية في روعة لمدونات بلوجر

محروم.كوم · #1 08-27-2014, 12:00 AM

حصريا اضافة قائمة الافقية غاية في روعة لمدونات بلوجر

Posted by 3alch tv On 6:38 ص اضافات بلوجر بلوجر تدوين مواقع
السلام عليكم اليوم بعد غايب طويل بسبب مشاكل في قالب ها انا أعود مرة الاخرى بي حصري لي أعز متتبعي مدونتنا نعم اليوم جئت لكم بقائمة الافقية غاية في روعة لن أطيل عليكم الى شرح

مصدر

ماعليك سوى ان تتبع الخطوات التالية :
الذهاب إلى المدونة> قالب> تحرير HTML
الأولى إضافة CSS أدناه فقط فوق

]]>

/* Menu Dropdown */
.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.menu,
.submenu {
margin: 0;
padding: 0;
list-style: none;
}

.menu {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}

.menu > li {
background: #34495e;
float: left;
position: relative;
transform: skewX(25deg);
}

.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}

.menu li:hover {
background: #e74c3c;
}

.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}

/* Dropdown */
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}

.submenu li {
background-color: #34495e;
position: relative;
overflow: hidden;
}

.submenu > li > a {
padding: 1em 2em;
}

.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}

.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);

}

.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}

.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}

.submenu li {
transition: .2s ease transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}

.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}

2- إضافة HTML في مكان قائمة الافقي قديمة

Menu item

Menu item
Submenu item

Submenu item

Submenu item

Submenu item

Menu item

Menu item

Menu item

3- إضافة HTMLأدناه فقط فوق

(حصريا) قالب مدونة التقنية العربية باللون الاحمر

يجب حدف قائمة الافقية قديمة بشكل تام

مصدر
__DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
جديد حصريا اضافة اداة خبراتي لمدونات بلوجر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-15-2014 01:30 AM
تركيب قائمة عليا لمدونات بلوجر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	05-20-2014 12:50 PM
إضافة قائمة المواقع الاجتماعية لمدونات بلوجر - بلوجر بالعربية	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-19-2014 12:30 AM
اضافة زر البحث لمدونات بلوجر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-19-2013 06:30 AM
اضافة عداد الزوار لمدونات بلوجر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-22-2011 03:30 AM