Боковое меню для uCoz - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Необычное боковое меню в темных и цветных стилях. Данное вертикальное меню многофункциональное, все нужную пользователю информацию он сможет увидить перед глазами, еще один плюс меню не занимает много места. Боковое меню ucoz можно установить с правой или левой стороны экрана монитора. Большой плюсь бокового вертикального меню ucoz еще в том, что оно не использует js.

Установка HTML

Код меню ucoz можно установить где ВАМ угодно. Обычно это:
П.У - Дизайн - Управление дизайном - Глобальные блоки
Code
<div id="main">  
  <ul id="navigationMenu">  
  <li>  
  <a class="m_home " href="$HOME_PAGE_LINK$"><span>На главную</span></a>  
  </li>  
   
  <li>  
  <a class="m_gost" href="/gb"><span>Гостевая</span></a>  
  </li>  
   
  <li>  
  <a class="m_forum" href="/forum"><span>Форум</span></a>  
  </li>  
   
  <li>  
  <a class="m_pochta" href="/index/0-3"><span>Обратная связь</span></a>  
  </li>  
   
  <?if($USER_LOGGED_IN$)?>  
  <li>  
  <a class="m_vixod" href="$LOGOUT_LINK$"><span>Выход</span></a>  
  </li>  
  <?else?>  
  <li>  
  <a class="m_vxod" href="$LOGIN_LINK$"><span>Вход</span></a>  
  </li>  
  <?endif?>  

  </ul>  
  </div>  
  <!-- /Конец тегов левое боковое меню -->

Установка CSS

Следующие что Вам нужно, это CSS меню. Вставляем в :
П.У - Дизайн - Упр. Дизайном(CSS).
Мы имеем 2 стилизации: цветное боковое меню и темное, копируем нужное CSS.
Code
#main{  
  position:fixed; 
  top: 150px; 
  right: 0px;  
  padding:0; 
 } 

 #main ul{  
  padding:0; 
 } 

 #navigationMenu li{ 
  list-style:none; 
  height:35px; 
  width:35px;  
 } 

 #navigationMenu span{ 
  position:absolute; 
  overflow:hidden; 
  width:0; 
  right:35px; 
  padding:0; 
  font:12px Verdana,Arial,Helvetica,sans-serif; 
  font-weight:bold; 
  line-height:35px; 
  white-space:nowrap; 
  -webkit-transition: 0.25s;  
  -moz-transition: 0.25s; 
  transition: 0.25s;  
 } 

 #navigationMenu a{ 
  display:block; 
  position:relative; 
  background:url(http://wallaby.ucoz.ru/images33/navigation_2.png) no-repeat; 
  height:35px; 
  width:35px; 
 } 

 #navigationMenu a:hover span{ 
  overflow:hidden; 
  text-align:center; 
  width:110px; 
  padding:0px 10px; 
 } 

 #navigationMenu a:hover{ 
  text-decoration:none; 
 } 

 #navigationMenu .m_home {background-position:0 0;} 
 #navigationMenu .m_home :hover {background-position:0 -35px;} 

 #navigationMenu .m_gost {background-position:-35px 0;} 
 #navigationMenu .m_gost:hover {background-position:-35px -35px;} 

 #navigationMenu .m_forum {background-position:-70px 0;} 
 #navigationMenu .m_forum:hover {background-position:-70px -35px;} 

 #navigationMenu .m_pochta { background-position:-105px 0;} 
 #navigationMenu .m_pochta:hover{ background-position:-105px -35px;} 

 #navigationMenu .m_vxod { background-position:-140px 0;} 
 #navigationMenu .m_vxod:hover { background-position:-140px -35px;} 

 #navigationMenu .m_vixod { background-position:-175px 0;} 
 #navigationMenu .m_vixod:hover { background-position:-175px -35px;} 

 #navigationMenu .m_gost span, 
 #navigationMenu .m_forum span, 
 #navigationMenu .m_pochta span, 
 #navigationMenu .m_vxod span, 
 #navigationMenu .m_vixod span, 
 #navigationMenu .m_home span { 
  background:#444; 
  color:#777; 
  text-shadow:1px 1px 0 #333; 
 }

 
 

Важно!

При копировании материала указывать ссылку на источник.

- 797
- 04-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта