Джава менюшечка : гостевой пост от Владимира Трофимлюка

На моём блоге сегодня первый гостевой пост. То, о чём Владимир пишет, рекомендую прочитать не только тем, кто решил освоить все тонкости копирайта и рерайта.
Это подробнейшие рекомендации, как нужно правильно писать, оформлять, проверять свои статьи. Даже если вы их пишите для себя. Лично я очень много для себя открыла, читая его блог. И от себя хочу добавить, что он, к тому же замечательный блоггер.  Итак, сегодня с нами Владимир Трофимлюк

* * * * *

Джава менюшечка – выпадающие кнопки, ссылки.

Создавая свой блог, я сталкивался с самыми разными проблемами, появлялись идеи, которые было бы невозможно реализовать без помощи таких зубров богостроительства, как Вика и ее коллеги. За неоценимую помощь, краткость изложения и доходчивость хочу сказать огромное спасибо!

Теперь к сути поста.

Джава скрипты и их реализация на блогспоте помогают превратить простенькую платформу в приятный и функциональный ресурс, с удобным интерфейсом.

Задался целью сделать выпадающее меню из картинок на основе джава скрипт, где должны отображаться мои «веб-паспорта» (профили из соц. сетей, сайтов фриланса…).
Перерыл страницы в поиске и того что подошло бы именно мне не нашел!

Дальше попалась одна статья о том, как скрывать часть поля плагина и задать его отображение после наведения курсора (к сожалению не сохранил ссылку на автора) почитал, попробовал вставить картинку изображающую паспорт, также заменить содержимое виджета на кнопки-картинки, которые были мне нужны (мои профили на фриланс сайте и в соц. сетях). Получилась такая конструкция:

<style>#Foll {
 /*фон всего гаджета*/
  overflow: hidden; /*скрываем все что за элементом*/
   border-radius: 5px;
  box-shadow: none;
/*правила анимации*/
  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 60px; /*высота открытой части в режиме спокойствия*/
  width: auto; /*ширина задана автоматически и займет всю область панели где размещен гаджет*/
}
/**/
#Foll:hover {
   height: 800px; /*высота выпадания*/
}
 }</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Cs8cbNX03MEFfXJwx2znp-UD9ga70fGo6yRoXCEsQi1IK5VzerP4Da293kdh2e2fsCTaaV5r4j2gM0tr3UfXn5PMtdAtpAoV135FmUNlGEG5SRN5psCq8xE_Pc_uev4XYU2tr-A_vVBq/s1600/07.png" style="border: none;" width="65" height="65" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<a href="http://freelancehunt.com/freelancer/Makstxt.html" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBY2444VWSIDunjWvlBknGG9bB1yMwS0pnkc-a9WIFu_OsGxc9unU667FS0r7tJCoP_FmXLTP4F7GNLmDbqksAT-BHAGF4QMe1VGdk4GVWR5-Jw-Tz5OGvLoJ1UuIwo-N2fYFrlQbn7qk/s1600/freelancehunt.png" style="border: none;" width="50" height="50" /></a><a href="https://vk.com/v.trofimlyuk" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSMDPLwVTNQVAX9jRWsUrMOYivmmq-9EChmsbSLPyUenVn3koqW0TFeWdEmYhrAPu9C1TBzdYFVtVMn7RqfgHftrsgQ0ev5L9pLRUT3M75FRytOS8V4CF1_VofiRpQQYkIxXUIi00Wj3Ez/s1600/vkontakte.png" style="border: none;" width="50" height="50" /></a>
</div></div>

Желтый – ссылка на картинку

Красный – ссылка на страницу

Зеленый – настройка размеров изображений

Монтируется просто: вкладка “Дизайн”-”Добавить гаджет”-”HTML/JavaScript” вставить код.

До использования вам придется побаловаться с размерами изображений, отступами и параметрами спрятанной части виджета. Советую сделать подгонку в онлайн HTML редакторе на моём блоге вкладка “инструменты копирайтера”-”Онлайн HTML” .

Также нашел еще одно применение данной конструкции!

Несколько раз слышал совет спрятать счетчики блога (чтоб не мозолили глаза нулевыми показателями). Как это сделать? Можно уменьшить их размер до одинокой незаметной точки через те же скрипты, но лично я не могу удержаться, чтоб посмотреть, сколько человек заходило на сайт и делаю это каждые полчасика. С помощью того же кода вместил все счетчики в контейнер и подобрал неброское изображение для картинки. Теперь они не мозолят глазки посетителя, но я могу просто ознакомиться с показателями. Пример такой фишки.

<style>#Foll {

  /*фон всего гаджета*/

  overflow: hidden; /*скрываем все что за элементом*/

  border-radius: 5px;

  box-shadow: none;

/*правила анимации*/

  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;

  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;

  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;

  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;

  height: 60px; /*высота в состоянии покоя - вычислена опытным путем*/

  width: auto; /*ширина*/

}

/*Стили при наведении курсора*/

#Foll:hover {

   height: 430px; /*полная высота при наведении- вычислять путем проб и ошибок*/

}

}</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGHkaXNgiEpehitE1C_EjQJf9OMZf9fqbdVTvau6O5tH79D0_O1ucviHOIcNRG_WvuPWjuRFhhTh5phgQdsS8rLoQyyH6ncJh8dn02xuoCgS78d1Ozazp9Cv04SjhefmISIfz3hZF-ygn/s1600/Chart+Area+Up.png" style="border: none;" width="33" height="33" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">А сюда тычем все коды счетчиков которые должны быть на странице

</div></div>

Такой способ можно применить и для других гаджетов: способы подписки, поделиться в социальных сетях… Он поможет не захламлять место на блоге, оживить его динамичным эффектом и вместить больше функций.

Владимир Трофимлюк.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :