ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Горизонтальное меню светло на CSS для ucoz

Горизонтальное меню светло на CSS для ucoz

Горизонтальное меню светло на CSS для ucoz
Всегда найдется тот или иной шаблон, где Горизонтальное меню будет подходить отлично по дизайну и стилям. Оно простое и основном идет CSS и безусловно центральный код, где вы и будете прописывать темы или разделы вашего интернет ресурса. Я поставил на темный дизайн и как видно, не очень идет к нему. Так как его изначально создавали под светлый сайт. Вы можете сами поменять всю цветовую гамму.

Это копируем и в CSS:

Код
.ribbon {  
  display:inline-block;  
  }  

  .ribbon:after, .ribbon:before {  
  margin-top:0.5em;  
  content: "";  
  float:left;  
  border:1.5em solid #fff;  
  }  

  .ribbon:after {  
  border-right-color:transparent;  
  }  

  .ribbon:before {  
  border-left-color:transparent;  
  }  

  .ribbon a:link, .ribbon a:visited {  
  color:#000;  
  text-decoration:none;  
  float:left;  
  height:3.5em;  
  overflow:hidden;  
  }  

  .ribbon span {  
  background:#fff;  
  display:inline-block;  
  line-height:3em;  
  padding:0 1em;  
  margin-top:0.5em;  
  position:relative;  

  -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */  
  -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */  
  -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */  
  -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */  
  transition: background-color 0.2s, margin-top 0.2s;  
  }  

  .ribbon a:hover span {  
  background:#FFD204;  
  margin-top:0;  
  }  

  .ribbon span:before {  
  content: "";  
  position:absolute;  
  top:3em;  
  left:0;  
  border-right:0.5em solid #9B8651;  
  border-bottom:0.5em solid #fff;  
  }  

  .ribbon span:after {  
  content: "";  
  position:absolute;  
  top:3em;  
  right:0;  
  border-left:0.5em solid #9B8651;  
  border-bottom:0.5em solid #fff;  
  }


Этот код, ставим, там где по вашему мнению, скрипту место.

Код
<div class='ribbon'>  
  <a href='http://zornet.ru/'><span>Главная</span></a>  
  <a href='#'><span>О нас</span></a>  
  <a href='#'><span>Сервисы</span></a>  
  <a href='#'><span>ZORNET.Ru</span></a>  
  <a href='#'><span>Контакты</span></a>
  <a href='#'><span>Скрипты для сайта</span></a>  
  <a href='#'><span>Шаблоны на сайтеZORNET.Ru</span></a>  
  <a href='#'><span>Трастовые ссылки</span></a>  
  </div>
21 Марта 2015 Просмотров: 2462 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar