Понедельник, 29.04.2024, 18:38
Всё для Counter-Strike 1.6
Приветствую Вас Гость | RSS
Главная | | Регистрация | Вход
Меню сайта

Новости CS
Обновление и прочее
Турниры CS:GO

Файлы для CS 1.6
Плагины
Карты
Готовые серверы
Патчи
Программы
Скрипты
Защита сервера
Звуки
Скачать Counter-Strike
Цветные логотипы
HLTV Models
Моды
Конфиги cfg.
Модели игроков
Модели оружия
Боты
Спрайты
Другие модели

Статьи для CS 1.6
Разное
Об игре
Консольные команды
Про читы
Стишки
Всё о серверах
Распрыг и прыжки
Тактика
Оружие
Понижение пинга
Zombie Plague
Прострелы

Нужно знать!
Собираем сервер с нуля
Как создать модель в Milkshape для CS 1.6
Как сменить текстуры на моделях ?
Как сделать спрайт
Делаем w_ модель из v_ модели
Быстрая закачка звуков и т.п. с вашего сервера
Русификация AMX MOD X
Как понизить пинг в CS
Как записать демку (demo)
Как сделать цветной логотип для CS? by xnj.
Избавляемся от *T.mdl

Категории раздела
CS News [22]
Новости Counter-Strike, Counter-Strike: Global Offensive и так далее...
Турниры CS:GO [10]
Новости по турнирам.

Опрос

Игра лагает, то вы ...
Всего ответов: 544

Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
21:03
Кнопка вверх (new)
Всем привет

Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk.

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.

Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.upTop {  
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {  
  background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url(http://bambun.ru/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {  
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}


Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>


Установка JS

Вставляем данный код также перед тегом </body>

Код
<script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script>


На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый
Просмотров: 360 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мой профиль
Гость

Сообщения:

Группа:
Гости
Время: 18:38

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь! Вход Регистрация

Скажи нет читам!!


Мини-чат

Поиск по сайту

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Нас сегодня посетили:

Архив записей

Мы В Контакте


Copyright xnj © 2024                           coolserver.ucoz.ru - сайт клана Fpg.Elay. Создать бесплатный сайт с uCoz