» »

Светлое горизонтальное меню Arvada для uCoz


Светлое горизонтальное меню Arvada для uCoz

Сочетании оттенок может быть разное, к примеру Горизонтальное меню Arvada для uCoz, где вложено 2 основных цвета. Это безусловно светлый или немного он серый, а вот под категорий у него идут в темной гамме, где синие полосы как распределитель тем. Здесь даже можно сказать не сочетание, но так красиво по дизайну все исполнено, что очень красиво и главное на многие ресурсы отлично подойдет. Но безусловно основатель это белый сайт, так как основа под него в стилях прописано и будем считать что по умолчанию создавали под такой тип.

Стили у всех разные и может такое быть, что будут залипать сами буквы, так за это отвечает font-size: 13px; находим и настраиваем шрифт, если что то не так будет.

Под каждой темой есть рубрики, не стал убирать, возможно пригодятся., если нет, то не сложно их быстро снять.

Каркас:

Код
<div id="container">  
<ul id="menu">  
  <li><a href="#">Главная</a>  
  <ul>  
  <li><a href="#">ZORNET.RU</a></li>  
  <li><a href="#">ZORNET.RU</a></li>  
  <li><a href="#">ZORNET.RU</a></li>  
  </ul>  
  </li>  
  <li><a href="http://zornet.ru/">ZORNET.RU</a>  
  <ul>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Каталог файлов</a>  
  <ul>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Каталог статей</a>  
  <ul>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  <li><a href="#">Скрипты для uCoz</a></li>  
  </ul>  
  </li>  
  <li><a href="#">О сайте</a></li>  
</ul>  
</div>


CSS:

Код
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  }  

  body {  
  padding: 30px;  
  font-family: "Helvetica Neue", helvetica, Tahoma;  
   
  }  

  #container {  
  position: relative;  
  width: 940px;  
  }  

  #container:after {  
  content: "";  
  display: block;  
  clear: both;  
  height: 0;  
  }  

  #menu {  
  position: relative;  
  float: left;  
  width: 100%;  
  padding: 0 20px;  
  border-radius: 3px;  
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);  
  background: #ccc;  
  }  

  #menu, #menu ul {  
  list-style: none;  
  }  

  #menu > li {  
  float: left;  
  position: relative;  
  border-right: 1px solid rgba(0,0,0,.1);  
  box-shadow: 1px 0 0 rgba(255,255,255,.25);  
  perspective: 1000px;  
   
  }  

  #menu > li:first-child {  
  border-left: 1px solid rgba(255,255,255,.25);  
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);  
  }  

  #menu a {  
  display: block;  
  position: relative;  
  z-index: 10;  
  padding: 13px 20px 13px 20px;  
  text-decoration: none;  
  color: rgba(75,75,75,1);  
  line-height: 1;  
  font-weight: 600;  
  font-size: 13px;  
  letter-spacing: -.05em;  
  background: transparent;  
  text-shadow: 0 1px 1px rgba(255,255,255,.9);  
  transition: all .25s ease-in-out;  
   
  }  

  #menu > li:hover > a {  
  background: #333;  
  color: rgba(0,223,252,1);  
  text-shadow: none;  
  }  

  #menu li ul {  
  position: absolute;  
  left: 0;  
  z-index: 1;  
  width: 200px;  
  padding: 0;  
  opacity: 0;  
  visibility: hidden;  
  border-bottom-left-radius: 4px;  
  border-bottom-right-radius: 4px;  
  background: transparent;  
  overflow: hidden;  
  transform-origin: 50% 0%;  
  }  

  #menu li:hover ul {  
   
  padding: 15px 0;  
  background: #333;  
  opacity: 1;  
  visibility: visible;  
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);  
  animation-name: swingdown;  
  animation-duration: 1s;  
  animation-timing-function: ease;  

  }  

  @keyframes swingdown {  
  0% {  
  opacity: .99999;  
  transform: rotateX(90deg);  
  }  

  30% {  
  transform: rotateX(-20deg) rotateY(5deg);  
  animation-timing-function: ease-in-out;  
  }  

  65% {  
  transform: rotateX(20deg) rotateY(-3deg);  
  animation-timing-function: ease-in-out;  
  }  

  100% {  
  transform: rotateX(0);  
  animation-timing-function: ease-in-out;  
  }  
  }  

  #menu li li a {  
  padding-left: 15px;  
  font-weight: 400;  
  color: #ddd;  
  text-shadow: none;  
  border-top: dotted 1px transparent;  
  border-bottom: dotted 1px transparent;  
  transition: all .15s linear;  
  }  

  #menu li li a:hover {  
  color: rgba(0,223,252,1);  
  border-top: dotted 1px rgba(255,255,255,.15);  
  border-bottom: dotted 1px rgba(255,255,255,.15);  
  background: rgba(0,223,252,.02);  
  }


18.05.2015 Просмотров: 375 Комментарий: (0)

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

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

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