» »

Красивое меню для сайта uCoz


Красивое меню для сайта uCoz

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

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


Установка:

Верхняя часть сайта:

Код
<div id="menu">  
  <ul id="navigation">  
  <li><a href="#" title="Главная">Главная</a></li>  
  <li><a href="#" title="Новости">Новости</a><ul><li><a href="#" title="Обновления игры">Обновления игры</a></li></ul></li>  
  <li><a href="#" title="Обучение">Обучение</a>  
  <ul>  
  <li><a href="#" title="Новичкам">Новичкам</a></li>  
  <li><a href="#" title="Интересные секреты">Интересные секреты</a></li>  
  </ul>  
  </li>  
  <li><a href="#" title="Видео">Видео</a><ul><li><a href="#" title="Воды">Воды (записи стримов)</a></li><li><a href="#" title="Интервью">Интервью</a></li></ul></li>  
  <li><a href="#" title="Скачать">Скачать</a>  
  <ul>  
  <li><a href="#" title="Комиксы">Комиксы</a></li>  
  </ul>  
  </li>  
  <li><a href="#" title="Герои">Герои</a></li>  
  <li><a href="#" title="Предметы">Предметы</a></li>  
  <li><a href="#" title="Гайды по героям">Гайды</a></li>  
  <li><a href="#" title="Форум">Галерея</a></li>  
  <li><a href="#" title="Форум">Форум</a></li>  
  <div class="clear"></div>  
  </ul>  
  </div>


Css:

Код
/*-----------------------*/  
.clear {  
  clear: both;  
}  

#menu {  
  width: 100%;  
  float: left;  
  position: relative;  
  margin: 50px 0 0 0;  
  padding:0  
}  

#navigation {  
  list-style: none;  
  padding: 0;  
  margin: 0;  
  background: #111;  
}  

#navigation li {  
  float: left;  
  font-family: PT Sans,sans-serif;  
  font-size:14px;  
}  

#navigation li:hover {  
  background: #222;  
}  

#navigation li:first-child {  
  -webkit-border-radius: 5px 5px 0 0;  
  border-radius: 5px 0 0 5px;  
}  

#navigation li a {  
  display: block;  
  padding: 0 20px;  
  text-decoration: none;  
  line-height: 40px;  
  color: #fff;  
}  

#navigation ul {  
  display: none;  
  position: absolute;  
  list-style: none;  
  margin-left: -3px;  
  padding: 0;  
  overflow: hidden;  
}  

#navigation ul li {  
  float: none;  
}  

#navigation li:hover > ul {  
  display: block;  
  background: #222;  
  border: solid 3px #fff;  
  border-top: 0;  
   
  -webkit-border-radius: 0 0 8px 8px;  
  border-radius: 0 0 8px 8px;  
   
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);  
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);  
}  

#navigation li:hover > ul li:hover {  
  -webkit-border-radius: 0 0 5px 5px;  
  border-radius: 0 0 5px 5px;  
}  

#navigation li li a:hover {  
  background: #000;  
}  

#navigation ul li:last-child a,  
#navigation ul li:last-child a:hover {  
  -webkit-border-radius: 0 0 5px 5px;  
  border-radius: 0 0 5px 5px;  
}  
/*-----------------------*/


(rip Бармен) - он же JoniDen.
07.07.2016 Просмотров: 613 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 07.07.2016 04:221
0
Самое нормальное меню, на фиксированную ширину сайта.
Сопрано
Сопрано 07.07.2016 04:312
0
Сейчас чистое меню редкость, все что то туда напихают. то профиль или еще что, нормальное.
Kosten
Kosten 07.07.2016 04:443
0
На блог или новости, там такая навигация встречается.
JoniDen
JoniDen 07.07.2016 04:534
0
Рад что понравилось smile
tsakonter
tsakonter 07.07.2016 18:435
0
Простое меню, которое по тематике ко многим сайтам подойдет, но больше на светлый дизайн, смотря как там при клике и какой эффект.
avatar