مساحة إعلانية

الثلاثاء، 21 أكتوبر 2014

الثلاثاء، 21 أكتوبر 2014

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

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

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


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

]]></b:skin>


.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;


}


.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);
}


.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 في مكان قائمة الافقي قديمة

<ul class="menu cf">
<li><a href="">Menu item</a></li>
<li>
<a href="">Menu item</a>
<ul class="submenu">
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
</ul>
</li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
</ul>
3- إضافة HTMLأدناه فقط فوق </head>


<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>


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


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

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ عالم تقنيات وبرامج 2017 ©