Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

قوائم لعرض النصوص

Home // Blog // قوائم لعرض النصوص

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

السلام عليكم ورحمة الله تعالى وبركاته ، إضافة النهار عبارة عن شرائح تعرض
فيها نصوص أو شروحات .. هي كمعرض إذا صح القول تحتوي على تأثير رائع يمكن
أن تستعمل في قالب قيد الإنشاء أو شيئ من هذا القبيل كل ما سأفعله سأقدم
لكم الأكواد والباقي عليكم

مثال مباشر

الأكواد مع الشرح

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

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

.menu:after {
clear: both;
}

.menu {
zoom:1;
}

.menu li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff;
}

.menu li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.menu .cover{
z-index: 2;
}

.menu .cover .content{
overflow: visible;
}

.menu .cover:focus{
outline: 0;
}

.menu li::after{
content: counter(li);
counter-increment: li;
font: italic bold 10px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

.menu li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}

.menu .cover::after{
z-index: -1;
}

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
margin-left: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
background-color: #2c618f;
}

.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
background-color: #91ab31;
}

.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
background-color: #714a28;
}

.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
background-color: #e58600;
}

.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
background-color: #c33a00;
}

.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
background-color: #7f5dac;
}

.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
background-color: #5672b7;
}

.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
background-color: #69003f;
}

.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
background-color: #393043;
}

.menu .content{
opacity: 0; display: none9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.menu .expanded{
opacity: .95; display: block9;
padding: 40px;
height: 300px; width: 540px;
}

.menu li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}

.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}

.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
bottom: 0;
}

.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}

.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}

.menu li:hover .title{
opacity: .7;
}

.menu .close {
display: none;
border: 5px solid #fff;
color: #fff;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}

.menu .cover .close{
display: block;
}

4. ابحث عن : <head/>

3. ضع الكود التالي قبله [ فوقه ]

<script type='text/javascript'>
//<![CDATA[
(function(){

$('.menu .content').append('<span class="close">x</span>');
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}

$('.menu li').click(function() {
showContent($(this));
});
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});

$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});

})();
//]]>
</script>

* كود HTML ضعه في المكان الذي تريد .. وغير النصوص 

<ul class="menu">
<li tabindex="1">
<span class="title">Satu</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Dua</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Tiga</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Empat</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Lima</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Enam</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Tujuh</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Delapan</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Sembilan</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
</ul>

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " قوائم لعرض النصوص "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM