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>
2015-03-21 Просмотров: 1767 Комментарий: (0)

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

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

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

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