» »

Меню для сайта плюс категорий на нем


Меню для сайта плюс категорий на нем

Если вы решили держать основную информацию по сайту, то меню сайта отличное решение. Так как у него есть под категорий и работают на CSS. Само оно выполнено в темно сером оттенке цвета, где при наведение курсора оно становится светло голубым. Но как оно идет на стилях, то вы можете гамму выставить сами. Это безусловно не стандартная навигация, которая может подойти к уникальному дизайн и плюс в том, что много информации можно в нем сохранять.

А это не тратить время и не искать по всему ресурсу, то что вам нужно, когда все можете найти в одном месте. Здесь даже есть под, под категория, если кому покажется лишним, то просто уберете и вообще можно сделать свой оригинальный дизайн, так как все зависит от CSS где вы можете сменить как вам нужно.

Установка:

Каркас

Код
<header>
  <nav>
  <ul class="menu">
  <li class="pos1"><a href="#" class="menu__link">Zornet - сайт про юкоз</a>
  <ul class="menu2">
  <li><a href="#" class="menu__link">сайт про юкоз</a></li>
  <li><a href="#" class="menu__link">сайт про юкоз -2</a></li>
  <li class="pos2"><a href="#" class="menu__link">сайт про юкоз -3</a>
  <ul class="menu3">
  <li><a href="#" class="menu__link">Home -1</a></li>
  <li><a href="#" class="menu__link">Pro -2</a></li>
  <li><a href="#" class="menu__link">Zornet сайт про систему uCoz</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="#" class="menu__link">Linux</a></li>
  <li><a href="#" class="menu__link">Mac OS</a></li>
  <li><a href="#" class="menu__link">Android 3.0.4</a></li>
  </ul>
  </nav>
  </header>


CSS

Код
*{margin: 0;padding: 0;}
ul{list-style:none}
body{background: #E9E9E9}
.menu{
  margin: 50px;
  display: inline-block;
}
.menu__link{
  display: block;  
  min-width:190px;
  height: 50px;  
  margin-bottom: 1px;
  text-indent: 20px;
  font: 19px 'Play';
  color: #fff;
  background: rgba(0,0,0,0.5);
  text-decoration: none;
  line-height: 50px;
  transition: 0.25s ease-in;
  white-space: nowrap;
}
.menu__link:hover{
  background: #00ded3;
}
.menu__link:active{
  background: #00C1B7;
  text-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000 inset;
}
.pos1,.pos2{
  position: relative;
}
.menu2,.menu3{
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  transform: translateX(-40px) scaleY(0);
  transform-origin: top;
  transition: 0.25s ease-out;
}
.pos1:hover .menu2,.pos2:hover .menu3{
  transform: translateX(1px) scaleY(1);
  opacity:1;
}


Здесь вы можете установить как в блок сайта, так и без него можно обойтись.
29.09.2016 Просмотров: 316 Комментарий: (4)

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

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

К сожалению, похожего ничего не нашлось!
Комментарий: 4
tsakonter
tsakonter 29.09.2016 20:391
0
Так меню не чего смотрится, просто уже надоели, которые идут ссылкой. Здесь точно можно почти всю информацию как разделов и основном категорий, что созданы на всех модулей разместить.
FeStemBer
FeStemBer 29.09.2016 21:572
0
Но здесь больше это меню как раз идет не в блок, просто там явно будет не красиво, да еще и с под категориями, но если только все их убрать, то нормально вероятно будет.
Kosten
Kosten 29.09.2016 22:384
0
Вообще редко встречал, что так много под категорий было, так можно и запутаться, одной вполне хватит.
Сопрано
Сопрано 29.09.2016 22:053
0
Манюшка явно под софт тематику создана.
avatar