• Страница 1 из 1
  • 1
Простое css меню
Дата: Среда, 14.03.2012, 20:47 | Сообщение # (1)
Администраторы
Глава клана
Сообщения:291

В css
Code
#menu4 ul {   
     list-style:none;   
     font-family: Helvetica, Arial, sans-serif;   
     font-size: 30px;   
     letter-spacing: -3px;   
     line-height: 1.2em;   
     border-top:5px dotted #000000;   
     border-bottom:5px dotted #000000;   
     float:left;   
     clear:both;   
     margin:20px;   
   }   
   #menu4 ul li{   
     float:left;   
   }   
   #menu4 ul li a{   
     display:block;   
     text-decoration:none;   
     padding:10px 10px 5px 10px;   
     color:#000000;   
     width:170px;   
   }   
   #menu4 ul li a span{   
     display:block;   
   }   
   #menu4 ul li a span.title{   

   }   
   #menu4 ul li a:hover span.title{   
     color:#00adef;   
   }   
   #menu4 ul li a span.text{   
     padding:0px 5px;   
     font-family: Georgia, serif;   
     font-size: 13px;   
     font-style: italic;   
     font-weight: normal;   
     letter-spacing: normal;   
     line-height: 1.6em;   
     color:#c7e7f3;   
     visibility:hidden;   
   }   
   #menu4 ul li a:hover span.text{   
     visibility:visible;   
   }   
     .cpojer-links { font-size:13px; }   
     .cpojer-links a {   
     display: inline-block;   
     padding: 4px;   
     outline: 0;   
     color: #3a599d;   
     -webkit-transition-duration: 0.25s;   
     -moz-transition-duration: 0.25s;   
     -o-transition-duration: 0.25s;   
     transition-duration: 0.25s;   
     -webkit-transition-property: -webkit-transform;   
     -moz-transition-property: -moz-transform;   
     -o-transition-property: -o-transform;   
     transition-property: transform;   
     -webkit-transform: scale(1) rotate(0);   
     -moz-transform: scale(1) rotate(0);   
     -o-transform: scale(1) rotate(0);   
     transform: scale(1) rotate(0);   
     }   
     .cpojer-links a:hover {   
     background: #3a599d;   
     text-decoration: none;   
     color: #fff;   
     -webkit-border-radius: 4px;   
     -moz-border-radius: 4px;   
     -o-border-radius: 4px;   
     border-radius: 4px;   
     -webkit-transform: scale(1.05) rotate(-1deg);   
     -moz-transform: scale(1.05) rotate(-1deg);   
     -o-transform: scale(1.05) rotate(-1deg);   
     transform: scale(1.05) rotate(-1deg);   
     }   
     .cpojer-links a:nth-child(2n):hover {   
     -webkit-transform: scale(1.05) rotate(1deg);   
     -moz-transform: scale(1.05) rotate(1deg);   
     -o-transform: scale(1.05) rotate(1deg);   
     transform: scale(1.05) rotate(1deg);   
     }

Туда где хотите видеть меню
Code
<div class="cpojer-links">   
   <div id="menu4">   
     <ul>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>   
     <li><a href="">   
     <span class="title">Меню</span>   
     <span class="text">Ваша подпись</span>   
     </a>   
     </li>     
     </ul>   
   </div>   
   </div>


  • Страница 1 из 1
  • 1
Поиск: