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

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


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

В коде, который предложу ниже, можно поменять на своё усмотрение практически всё. Сам код устанавливается в разделе дизайн-гаджет 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


11 комментариев:

  1. Здорово, я тоже хочу). Надо подумать как вписать в мой шаблон.

    ОтветитьУдалить
    Ответы
    1. Сама Доброта Да с твоим творческим подходом можно из этого вообще сделать ВАУ.

      Удалить
  2. Вика, действительно интересный вариант. У меня два вопроса, можно ли менять его расположение, например зафиксировать внизу, как у тебя в этом блоге. И можно ли его сделать прозрачным?

    ОтветитьУдалить
    Ответы
    1. Олеся, если надо зафиксированное как у меня. то пиши, вышлю код. Это совершенно другой и если что-то менять то и код будет совершенно другой. Тоже самое и с прозрачностью. Можно но полностью менять код надо опять же.

      Удалить
    2. Вика, мне нравилось твое меню, которое было немного раньше, оно тогда было такое же, как сейчас, но серое и прозрачное. Оно по дизайну мне бы подошло идеально. Только, возможно, я бы не удаляла основное, а сделала бы 2.
      Кстати, все не могу нарадоваться на твой поиск, теперь найти нужную статью нет никаких проблем!

      Удалить
    3. Про какое серое меню ты говоришь, которое раньше было. С поиском согласна. Уже многие оценили.

      Удалить
    4. Такое же как сейчас, но оно было другим - не сильно заметным, кажется прозрачным.

      Удалить
    5. Так тут все цвета менять можно. А ещё я его так сделала, потому что многие не могли найти его внизу и спрашивали.об этом. Есть варианты, когда прозрачность не совсем уместна.

      Удалить
  3. Доброго времени суток Вика! Очень понравилось меню, Подскажите пожалуйста, а как сделать, чтоб при раскрытии высота была поменьше? И можно ли ее установить сбоку сайта? С уважением Тата.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo