» »

Горизонтальное раздвижное меню uCoz на CSS


Горизонтальное раздвижное меню uCoz на CSS

Здравствуйте предоставляю вам меню в зеленоватом стиле. Вы можете цвет изменить через фотошоп, также у него есть под меню в различных разделах. Выглядит это примерно так,скачиваем материал там в папке images есть две картинки, под названием tmenuli.png и tmenu.png и через фотошоп меняем свой цвет какой вам надо вы поменяете цвет только вид меню,а остальные все настройки находятся в стилях CSS и так приступим к установке.

Установка.

Скачиваем архив images и кидаем в файловый менеджер.

Этот код кидаем в верхний блок сайта.

Код


<div id="shapka">  
  <div class="topshapka">  

  <div class="stppad">  
  <div class="stopmenu">  
  <ul>  
   
<li> <a href="/news/" title="Новости андроид"> Новости </a></li>  
<li> <a href="/load/" title="Игры андроид">Игры</a>  
  <ul>  
  <li> <a href="/load/" title="Шутеры для андроид">Action | Shooter</a> </li>  
  <li> <a href="/load/" title="Карточные игры андроид">Азартные | Карточные</a> </li>  
  <li> <a href="/load/" title="Аркады для андроид">Аркады</a> </li>  
  <li> <a href="/load/" title="Квесты для андроид">Квесты | Приключения | RPG</a> </li>  
  <li> <a href="/load/" title="Логические для андроид">Логические | Головоломки</a> </li>  
  <li> <a href="/load/" title="Настольные для андроид">Настольные</a> </li>  
  <li> <a href="/load/" title="Гонки на андроид">Симуляторы</a> </li>  
  <li> <a href="/load/" title="Спортивные для андроид">Спортивные</a> </li>  
  <li> <a href="/load/" title="Стратегии для андроид">Стратегии</a> </li>  
  <li> <a href="/load/" title="Эмуляторы для андроид">Эмуляторы игровых приставок</a> </li>  
  <li> <a href="/load/" title="Остальные игры для андроид">Остальные</a> </li>  
  </ul>  
</li>  
<li> <a href="/load/" title="Программы для андроид">Программы</a>  
  <ul>  
  <li> <a href="/load/" title="Офис для андроид">Офис / Калькуляторы / Конверторы</a> </li>  
  <li> <a href="/load/" title="Финансы андроид">Финансы</a> </li>  
  <li> <a href="/load/" title="Будильники для андроид">Планировщики / Будильники </a> </li>  
  <li> <a href="/load/" title="Оптимизация android">Оптимизация </a></li>  
  <li> <a href="/load/" title="Системные приложения андроид">Системные</a> </li>  
  <li> <a href="/load/" title="Антивирусы для андроид">Безопасность</a> </li>  
  <li> <a href="/load/" title="Клиенты андроид">Общение</a> </li>  
  <li> <a href="/load/" title="Браузеры для андроид">Интернет / Связь</a> </li>  
  <li> <a href="/load/" title="Плееры для андроид">Мультимедиа</a> </li>  
  <li> <a href="/load/" title="Gps для андроид">Навигация (GPS)</a> </li>  
  <li> <a href="/load/" title="Смс андроид">Телефонная часть</a> </li>  
  <li> <a href="/load/" title=" Словари для андроид">Чтение книг / Словари / энциклопедии</a> </li>  
  <li> <a href="/load/" title="Остальные программы андроид">Разное</a> </li>  
  </ul>  
</li>  
<li> <a href="/load/" title="Прошивка андроид">Прошивки</a>  
  <ul>  
  <li> <a href="/load/" title="Android прошивка acer">Acer</a> </li>  
  <li> <a href="/load/" title="Archos прошивка">Archos</a></li>  
  <li> <a href="/load/" title="Прошивка android htc">HTC</a> </li>  
  <li> <a href="/load/" title="Прошивка Huawei">Huawei</a> </li>  
  <li> <a href="/load/" title="Прошивка lg android">LG</a> </li>  
  <li> <a href="/load/" title="Прошивка motorola">Motorola</a> </li>  
  <li> <a href="/load/" title="Прошивка roverpad"> RoverPad</a> </li>  
  <li> <a href="/load/" title="Прошивка android samsung">Samsung</a> </li>  
  <li> <a href="/load/" title="Прошивка sony ericsson">Sony Ericsson</a> </li>  
  <li> <a href="/load/" title="Viewsonic прошивка">ViewSonic</a> </li>  
  </ul>  
</li>  
<li> <a href="/publ/" title="Обзоры андроид">Обзоры</a>  
  <ul>  
  <li> <a href="/publ/" title="Acer android">Acer</a> </li>  
  <li> <a href="/publ/" title="Android archos">Archos</a> </li>  
  <li> <a href="/publ/" title="HTC android">HTC</a> </li>  
  <li> <a href="/publ/" title="Huawei android">Huawei</a> </li>  
  <li> <a href="/publ/" title="LG android">LG</a> </li>  
  <li> <a href="/publ/" title="Motorola android">Motorola</a> </li>  
  <li> <a href="/publ/" title="RoverPad android">RoverPad</a> </li>  
  <li> <a href="/publ/" title="Samsung android">Samsung</a> </li>  
  <li> <a href="/publ/" title="Android sony ericsson">Sony Ericsson</a> </li>  
  <li> <a href="/publ/" title="Viewsonic android">ViewSonic</a> </li>  
  <li> <a href="/publ/" title="Видео обзор андроид">Видео обзор</a> </li>  
  </ul>  
</li>  
<li> <a href="/load/" title="Темы для андроид">Темы</a>  
  <ul>  
  <li> <a href="/load/" title="Обои для андроид">Обои</a> </li>  
  <li> <a href="/load/" title="Живые обои для андроид">Живые обои</a> </li>  
  <li> <a href="/load/" title="Темы go launcher ex">Go Launcher EX</a> </li>  
  <li> <a href="/load/" title="Темы для MIUI">MIUI</a> </li>  
  <li> <a href="/load/" title="Темы для ADW Launcher ">ADW Launcher</a> </li>  
  </ul>  
</li>  
  </ul>  
  </div>  
  </div>  


А этот код в стили CSS

Код


/**** Menu ****/  

.stopmenu {  
  display: block;  
  max-width: 1100px;  
  height: 60px;  
  position: relative;  
  background: url("../images/tmenu.png") repeat-x;  
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.57);  
}  

.stppad {  
  display: block;  
  position: relative;  
  padding: 118px 0px 0px 0px;  
  z-index: 5;  
}  

.stopmenu ul {  
  display: block;  
  position: relative;  
  margin: 0px;  
  padding: 0px;  
  list-style: none;  
}  

.stopmenu ul li {  
  display: inline-block;  
  float: left;  
  margin: 0px;  
  padding: 0px 2px 0px 0px;  
  background: url("../images/tmenuli.png") no-repeat right;  
  position: relative;  
}  

.stopmenu ul li a {  
  display: block;  
  height: 60px;  
  line-height: 64px;  
  text-decoration: none;  
  color: #fff;  
  padding: 0px 27px;  
  font-family: 'Open Sans';  
  font-weight: 600;  
  font-size: 15px;  
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.44);  
  transition: all 0.3s;  
}  

.stopmenu ul li a:hover {  
  background: rgba(0, 0, 0, 0.07);  
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.14), inset 0px 34px 0px rgba(255, 255, 255, 0.08);  
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.27), 0px 0px 5px #fff;  
}  

.stopmenu ul li ul {  
  display: none;  
  width: 200px;  
  position: absolute;  
  top: 60px;  
  left: 50%;  
  margin-left: -100px;  
  background: #FFF;  
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.26);  
}  

.stopmenu ul li:hover ul {  
  display: block;  
}  

.stopmenu ul li ul li {  
  display: block;  
  float: none;  
  background: none;  
  padding: 0px;  
}  

.stopmenu ul li ul li a {  
  display: block;  
  font-size: 12px;  
  line-height: 20px;  
  border-bottom: 1px dotted #E4E4E4;  
  padding: 10px;  
  height: auto;  
  color: #337C11;  
  text-shadow: 0px 1px 1px #fff;  
}  

.stopmenu ul li ul li a:hover {  
  box-shadow: none;  
  background: #38AC00;  
  color: #fff;  
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.27);  
}  

.sepole {  
  position: absolute;  
  top: 63px;  
  padding: 0px 10px;  
  right: 0px;  
  border: 0px;  
  width: 252px;  
  height: 40px;  
  box-shadow: inset 0px 0px 13px rgba(0, 0, 0, 0.31);  
  background: rgba(255, 255, 255, 0.82);  
  transition: all 0.3s;  
  z-index: 10;  
}  

.sepole:hover, .sepole:focus {  
  background: #fff;  
}  

.sebut {  
  display: block;  
  position: absolute;  
  top: 63px;  
  right: 0px;  
  width: 40px;  
  height: 40px;  
  background: url("../images/search-16.png") no-repeat center;  
  opacity: 0.5;  
  cursor: pointer;  
  z-index: 11;  
  transition: all 0.3s;  
}  

.sebut:hover {  
  opacity: 1.0;  
}  

.hlinks2 {  
  display: inline-block;  
  position: absolute;  
  top: 25px;  
  right: 0px;  
  z-index: 15;  
}  

.hlinks2 a {  
  display: inline-block;  
  color: #fff;  
  margin-left: 10px;  
  text-shadow: 0px 1px 1px #000;  
}  

/* MENU */


Установка завершина всем спасибо!
Ждем Ваших коментарий!
24.04.2016 Загрузок: 2 Просмотров: 392 Комментарий: (3)

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

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

Комментарий: 3
ТОРНАДО
ТОРНАДО 24.04.2016 05:121
0
Здравствуйте,вообщем меню если подстроить под свой цвет сайта,по моему можно поместить весь свой сайт,так - как отделы меню позволяют!
Сопрано
Сопрано 24.04.2016 17:562
0
Больше похоже на адаптированное меню.
Kosten
Kosten 24.04.2016 18:393
0
Да, нет наверно, с шаблона выдернуто, а он и возможно был под адаптацией, главное что можно поставить на систему. Там понимаю скачивать нужно, и если делать под другой оттенок, то только фотошоп в этом поможет, по стилям не как не выйдет, но сильно не рассматривал и не скачивал.
avatar