Оригинальное выскальзывающее меню для блога

Здравствуйте, читатели, друзья и гости блога. Предлагаю сегодня сделать красивое,  горизонтальное, выскальзывающее меню. Совершенно простое в установке. Прекрасно впишется под любой дизайн. Кроме того, его вообще можно сделать совершенно уникальным для любого блога. Всё только зависит от вашей фантазии и желания.

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

В коде, который предложу ниже, можно поменять на своё усмотрение практически всё. Сам код устанавливается в разделе дизайн-гаджет HTML/JavaScript. Так что даже новички запросто с этим справятся.

Копируем код себе в блокнот или черновик блога.

<style>ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s fxhompinav ease-in-out;
  -moz-animation:2s fxhompinav ease-in-out;
  -ms-animation:2s fxhompinav ease-in-out;
  animation:2s fxhompinav ease-in-out;
}

ul#navigation li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;
}

ul#navigation li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:#796774 ;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:10px;
  -khtml-border-bottom-right-radius:10px;
  -khtml-border-bottom-left-radius:10px;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover {
  margin-top:-3px;
  background-position:50% 10px;
  color:#fff;
  position:relative;
}

ul#navigation li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;
}
ul#navigation li:nth-child(1) a {
  background-image:url( https://lh3.googleusercontent.com/FRhXT4xYMRQ_GfoPkns92BHTqqIHZaQ20Gikn0jbHFU=s31-no);
}
ul#navigation li:nth-child(2) a {
  background-image:url( https://lh3.googleusercontent.com/AaEIX8lqHrxuRiYs985x7nB6Eg9EvXhKMXvBQFMzwWE=s27-no);
}
ul#navigation li:nth-child(3) a {
  background-image:url( https://lh3.googleusercontent.com/je18imYKR4RRPWsE9-nSo-v7esf-C0I9hw_srnsQrCs=s32-no);
}
ul#navigation li:nth-child(4) a {
  background-image:url( https://lh3.googleusercontent.com/6R6a5jHkty89LGIaN6KNAQKvJyxuRLsrzdqC6CvR8os=s32-no);
}
@-webkit-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-moz-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-ms-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}</style>

<ul id='navigation'>
     <li><a href=' http://www.shpargalochki.ru/' >главная</a></li>
     <li><a href=' http://www.shpargalochki.ru/p/blog-page_29.html' >об авторе</a></li>
     <li><a href=' http://www.shpargalochki.ru/p/blog-page_2746.html ' >поиск</a></li>
     <li><a href=' http://www.shpargalochki.ru/p/srchttpdl.html' > содержание</a></li>
</ul>

Настройки. То что выделено красным цветом это цвет самих вкладок меню. Воспользуйтесь хотя бы этим генератором цвета, чтобы подобрать нужный. При нажатии на раздел появляется иконка. Адреса этих картинок я отметила синим цветом. Так что и здесь есть возможность установить свои. В посте как сделать свои иконки соц.сетей об этом было.
Зелёным-адрес страницы, куда ведёт ссылка. И жёлтым название страницы.

Обратите внимание, что в моём случае я сделала всего 4 вкладки. Если вы захотите добавить ещё необходимо сделать следующее. Добавить вот такой участок кода с адресами иконок.

ul#navigation li:nth-child(4) a {
  background-image:url( https://lh3.googleusercontent.com/6R6a5jHkty89LGIaN6KNAQKvJyxuRLsrzdqC6CvR8os=s32-no);
}

Просто поменять цифру 4 на 5 и так далее. И добавьте секцию.

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}

Гарантирую вам, что если вы всё правильно сделаете, у вас будет отличное и оригинальное меню. Только пожалуйста, будьте внимательны ко всем точкам, чёрточкам и скобкам в коде. Именно только то, что выделено другим цветом нужно удалять и вставлять свои значения.

Если возникнут какие вопросы с настройками обязательно спрашивайте в комментариях. Разберёмся. Не боги горшки обжигают.

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

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

Введите Ваш email