Галерея лучших современников и их творческих работ
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Язык сайта
Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish
Меню сайта
Категории раздела
Полезности для сайтов ucoz [134]
Поиск
Новенькие на сайте
rbadertdinov
↓ ↓ ↓ ↓ ↓
KuznetzovapCT
↓ ↓ ↓ ↓ ↓
cecfjgmuraniench
↓ ↓ ↓ ↓ ↓
cecfjgbascubblil
↓ ↓ ↓ ↓ ↓
xiao_yiwan
↓ ↓ ↓ ↓ ↓
mailsima
↓ ↓ ↓ ↓ ↓
larisamatkovskaa
↓ ↓ ↓ ↓ ↓
samaraindi
↓ ↓ ↓ ↓ ↓
Новое на форуме
  • Виагра купить цена
  • Продолжается восстановление Успенского собора Киево-печерской Лавры
  • Война. Оружие. Пули. И все что из этого может получиться
  • Романизм
  • Ренессанс
  • Словарь
    Кодекс.
    [Раздел под буквой - [К]]
    Гравюра.
    [Раздел под буквой - [Г]]
    Возрождение.
    [Раздел под буквой - [В]]
    Бумага.
    [Раздел под буквой - [Б]]
    Энвайронмент.
    [Раздел под буквой - [Э]]
    Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
    20:59
    Кнопка вверх (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 - серый
    Категория: Полезности для сайтов ucoz | Просмотров: 95 | Добавил: startsmart | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Профиль
    Гость




    Группа:
    Гости

    Мы очень рады что вы зашли к нам.
    Пожалуйста зарегистрируйтесь или авторизуйтесь!
    Случайные работы
    Друзья сайта
  • All-Art.do.am - все об искусстве! Стили, направления, художники, иконопись и т.д.

  • Tatyana_Art - Кое-что о компьютерной графике. Портфолио. Уроки компьютерной графики (2D и 3D)

  • Галерея иконописи и убранств храмов

  • Галерея мировых шедевров

  • Галерея лучших художников 20 века

  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Copyright MyCorp © 2017
    Бесплатный хостинг uCoz




    Rambler's Top100