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

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

___________________________________________________________________

مثال مباشر

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

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: none\9;
  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: block\9;
  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>