• Телефон +38 (068) 652-97-37
  • Часы работы Ежедневно с 08:00 до 20:00

Обратный звонок

Оставьте номер своего телефона, и мы перезвоним вам в удобное для вас время


Я согласен(а) на обработку персональных данных

Главная Красивое навигационное меню. - Форум
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Архив - только для чтения
Форум » Архив (закрытые темы) » Корзина » Красивое навигационное меню.
Красивое навигационное меню.

[Table]Сам код:[/Table]
Code
<nav>
<ul>
<li><a href="/">Главная страница</a></li>
<li><a href="/forum">Страница Форума</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/load">Файлы</a></li>
</ul>
</nav>

[Table]В CSS:[/Table]
Code
nav  {
             display: block;
             width: 100%;
             overflow: hidden;
         }
         
         nav ul {
             margin: 80px 0 20px 0;
             padding: .7em;
             float: left;
             list-style: none;
             background: #444;
             background: rgba(0,0,0,.2);
             -moz-border-radius: .5em;
             -webkit-border-radius: .5em;
             border-radius: .5em;    
             -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
             -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
             box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
         }
         
         nav li {
             float:left;
         }
         
         nav a {
             float:left;
             padding: .8em 1.5em;
             text-decoration: none;
             color: #555;
             text-shadow: 0 1px 0 rgba(255,255,255,.5);
             font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
             letter-spacing: 1px;
             text-transform: uppercase;
             border-width: 1px;
             border-style: solid;
             border-color: #fff #ccc #999 #eee;
             background: #c1c1c1;
             background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
             background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
             background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
             background: -o-linear-gradient(#f5f5f5, #c1c1c1);
             background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
             background: linear-gradient(#f5f5f5, #c1c1c1);            
          }
          
         nav a:hover, nav a:focus {
             outline: 0;
             color: #fff;
             text-shadow: 0 1px 0 rgba(0,0,0,.2);
             background: #fac754;
             background: -moz-linear-gradient(#fac754, #f8ac00);
             background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
             background: -webkit-linear-gradient(#fac754, #f8ac00);
             background: -o-linear-gradient(#fac754, #f8ac00);
             background: -ms-linear-gradient(#fac754, #f8ac00);
             background: linear-gradient(#fac754, #f8ac00);
         }
         
         nav a:active {
             -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
             -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
             box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
         }
          
         nav li:first-child a {
             border-left: 0;
             -moz-border-radius: 4px 0 0 4px;
             -webkit-border-radius: 4px 0 0 4px;
             border-radius: 4px 0 0 4px;            
         }
         
         nav li:last-child a {
             border-right: 0;
             -moz-border-radius: 0 4px 4px 0;
             -webkit-border-radius: 0 4px 4px 0;
             border-radius: 0 4px 4px 0;            
         }
         
         /*----------------------*/
         
         #about
         {
             color: #999;
             text-align: center;
         }
         
         #about a
         {
             color: #eee;
         }
Сообщение # 1 | Чт, 2011-11-10 в 19:03:08
профиль
красивое меню
Сообщение # 2 | Пн, 2011-11-14 в 11:39:00
профиль
Форум » Архив (закрытые темы) » Корзина » Красивое навигационное меню.
  • Страница 1 из 1
  • 1
Поиск: