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>

Related Post

إضافة 3 في 1 المتابعه عبر الشبكات الاجتماعية... مرحباً احبتي واصدقائي  اليوم لدي لكم اضافة يبحث عنها الكثير من المدونين لانها مميزة برأيي وانا شخصياً استعملها في مدونتي لانها متحركة ...
الطريقة الصحيحة لإضافة وإستخدام خاصية إقرأ المزيد... الإضافة الأكثر إستخداماً هي إضافة إقرأ المزيد وفي رايي هي اهم إضافة للحفاظ على مظهر وسرعة المدونات من يستغني عن تلك الإضافة يحرم مدونته من الس...
إضافة كود التبادل الاعلاني بشكل جميل للمدونة CSS... إضافة كود التبادل الاعلاني بشكل جميل للمدونة CSS3 بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسل...
نافذة منزلقة لأعلى للإشتراك في المواقع الإجتماعية ... إضافة أنيقة للإشتراك في المواقع الإجتماعية وخدمة البريد الإلكترونيالإضافة لا تحتاج الكثير فقط ضعها في آداة HTML/JavaScriptلكن يجب تعديل بعض الأشياءأول...
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

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

*




Recent Posts




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