разработка

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » разработка » Тестовый форум » блоки с выпадающим описание


блоки с выпадающим описание

Сообщений 1 страница 3 из 3

1

<div class="fmenu">
<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>

<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>
<a href="ссылка">
    <h5>название</h5>
    <div>описание</div>
</a>
</div>

верх

Код:
<style>
.fmenu a {	                                                         /* Стиль блоков */
overflow: hidden;  /* Скрываем прокрутку */
text-decoration: none !important;
display: block; 
width: 250px;    /* Ширина блока */
height: 60px;      /* Высота блока */
margin: 0 20px 20px 0;  /* отступы */
background: rgba(219, 226, 232, 0.5);   /* фон блока */
border: 1px solid #ccc;  /* границы блока */}


.fmenu h5 {                                                /* Стиль заголовков */ 
    margin: 0;
color: #222;    /* цвет заголовка */ 
text-align: center;
height: 60px;          /* высота блока */
font: italic 18px/60px Georgia, Serif;    /* Вертикальное центрирование текста за счет равных высот строки и элемента */
opacity: 1;
-webkit-transition: all 0.2s linear;    /* плавность перехода */
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear;}




.fmenu a:hover h5 { 
margin-top: -60px;     /* Выскальзывание описания (равно значению высоты блока) */
opacity: 0;            /* прозрачность */
}


.fmenu div {                                                      /* Стиль описания */
background: #000 17px 17px no-repeat;       /* цвет фона */                       
height: 60px;                              /* высота блока */
position: relative; 
color: white;                               /* цвет текста */
font: 12px/15px Georgia, Serif;              /* шрифт */
padding: 5px; 
opacity: 0;             /* прозрачность */                                
-webkit-transition: all 0.2s linear;            /* плавность перехода */
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear;}
.fmenu a:hover div { 
opacity: 1}
</style>

0

2

надпись отредактировано

вепх

Код:
<style>
.lastedit {
display: none;
}
</style>

0

3

дайсы

Код:
<input type="button" onclick="dice()" value="Кинуть Дайс" />
<script type="text/javascript"> 
 
function unhtml(s)
{ return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
 
function numword(s,one,two,many)
{ return(((s%100>=10 && s%100<=20) || s%10>=5) ? many : 
          (s%10==1 ? one : two)); }
 
function dice()
{
        var FoundErrors = '';
        var diceRes=""
        var CountCube = prompt("Количество кубиков", "1");
        if(CountCube>100 || CountCube<=0) {
        alert("Нельзя бросать столько кубиков");  return false;}
        var SideCube = prompt("Сколько граней у кубика?", "10");
        if(SideCube>1000 || SideCube<=0){
        alert("Не бывает таких кубиков");         return false;}
        var BonusCube = parseInt(prompt("Какой бонус прибавляем?", "+0"));
        var ReasonCube = unhtml(prompt("По какому поводу бросок?", "").
           replace(/\s+/g," ").replace("]"," "));
        
        for(i=0; i<CountCube;i++)
        {
          var dice = (Math.round(Math.random()*SideCube));
          if(dice==0) dice=1;
          diceRes += dice*1936+"-";
        }
        smile('[dice='+diceRes+CountCube+':'+SideCube+
              ':'+BonusCube+':'+ReasonCube+']');
}
 
function addDice(post,from,internal)
{
  var str=post.innerHTML, num=-1, date=-1, a, fCanRandomise=0, u=""; 
  while(post=post.parentNode) 
    if(post.className=="container")
      if(post=post.parentNode)
      {
        if(a=post.innerHTML.match(
          /class[^<>]+permalink[^<>]+#p(\d+)[^<>]*>[^<>]*(\d+)[img]http://uploads.ru/i/k/X/H/kXHQl.gif[/img]\d+)[img]http://uploads.ru/i/k/X/H/kXHQl.gif[/img]\d+)[^<>]*<\/a>/i))
            { num=a[1]; date=a[4]; 
              fCanRandomise=1; break; }
      }
 
  var ran=parseInt(num+date);
  return str.replace(
     /\[dice=((?:\d+-)*)(?[img]http://uploads.ru/i/k/X/H/kXHQl.gif[/img]\d)(\d+)|(\d+)([img]http://uploads.ru/i/K/Z/U/KZUwI.gif[/img](\d+)(?:[img]http://uploads.ru/i/k/X/H/kXHQl.gif[/img]-?\d+)[img]http://uploads.ru/i/k/X/H/kXHQl.gif[/img][^\]]*))?)]/g,
  function(a,dice,diceC,diceS,adieC,fNewScheme,adieS,adieB,adieR) 
  {
    diceC=parseInt(fNewScheme ? adieC : diceC);
    diceS=parseInt(fNewScheme ? adieS : diceS);
    adieB=parseInt(adieB ? adieB : 0);
    if(adieB>0) adieB='+'+adieB;
    if(!fCanRandomise && fNewScheme)
      return '<div class="quote-box"><blockquote><p><b>СБОЙ ДАЙСОМЕТАЛКИ - СООБЩИТЕ МАСТЕРАМ</b></p></blockquote></div> ';
 
    var i,diceR=0,
        s='<div class="quote-box"><blockquote '+  
          'style="text-align:left"><p>'+
           '<b>Игрок кинул '
           +diceC+numword(diceC,' куб с ',' куба с ',' кубов с ')
           +diceS+numword(diceS,' гранью',' гранями',' гранями')
           +(adieB ? (adieB>0 ? ' и бонусом ' : ' и пенальти ')+adieB : '')+
           (adieR ? ', моделируя событие:</b><br><i>'+adieR+'</i><b>' : '')
           +'<br /><br />Результаты броска '+
           (fNewScheme ? '' : '(старая схема)')+'</b>: (';
 
    dice=dice.split("-"); 
    for(i=0; i<dice.length-1; ++i)
    {
       var d=parseInt(dice[i]/1936); 
       date=((date>>1)+((date&1)<<21))&0x3fffff;
       num=((num>>1)+((num&1)<<22))&0x7fffff;
       if(fNewScheme) d=(ran=(((ran>>1)+(((ran&1) ? 0 : 1)<<23)+d+date)^num)&0xffffff)%diceS +1;
       diceR+=d;
       s+= (i?' + ':'') + d;
    } 
 
    if(adieB) diceR+=parseInt(adieB);
    return(s+ (adieB ? ')'+adieB : ')')+ 
           '=' + diceR + '</p></blockquote></div>');
  });
}
if(document.URL.indexOf("viewtopic.php")!=-1)
{
  elm=document.getElementById("pun-main").getElementsByTagName("div");
  for(x=0; x<elm.length; ++x) 
    if(elm[x].className=="post-content")
      elm[x].innerHTML=addDice(elm[x]); 
}
</script>

0


Вы здесь » разработка » Тестовый форум » блоки с выпадающим описание