ПРИМЕР ПРОСТОГО МЕНЮ ИЗ КАРТИНОК С CSS АНИМАЦИЕЙ - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Войти
Регистрация
Посетители за сегодня
Обратная связь
Опрос
Правила чата
Пользователи онлайн
−Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории
Комментарии
༒AДМИНИСТРАТОР༒
21-Декабря-2021
noНе выводит сообщения в чат.
Ответить
Vitalya
18-Апреля-2021
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Ответить
igor_ponyshkov
10-Апреля-2021
noЭТО МЕНЮ НЕ РАБОТАЕТ https://wampi.ru/image/RnPeLYV
Ответить
Milan_Shubin
01-Июля-2018
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
Ответить
Vitalya
01-Июля-2018
Приносим свои извинения, всё исправим...
Ответить
KaMoRkA.uCoz.com -- uCoz -- Меню
ПРИМЕР ПРОСТОГО МЕНЮ ИЗ КАРТИНОК С CSS АНИМАЦИЕЙ
Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript

Итак, по кодам. HTML для меню выглядит так:

Код
<div class="macmenu">
  <div class="button">
  <a href="#"><img src=".../image/home.png">Главная</a>
  <a href="#"><img src=".../image/news.png">Новости</a>
  <a href="#"><img src=".../image/photo.png">Фотографии</a>
  <a href="#"><img src=".../image/music.png">Музыка</a>
  <a href="#"><img src=".../image/docs.png">Документы</a>
  <a href="#"><img src=".../image/fav.png">Избранное</a>
  </div>
</div>


И стили CSS:

Код
.macmenu {
  height: 128px; /*высота общего блока*/
}
.button {
  margin: 0 auto; /*выравнивание блока по центру*/
  width: 720px; /*ширина всего блока с меню*/
}
.button a img,
.button a {
  display: block;
  float: left;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  height: 70px;
  width: 70px;
}
.button a {
  margin: 5px 15px;
  text-align: center;
  color: #fff;
  font: normal normal 10px Verdana;
  text-decoration: none;
  word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/
}
.macmenu a:hover img {
  margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
  height: 128px;
  width: 128px;
}
.button a:hover {
  font: normal bold 14px Verdana;
}


Если меню нужно расположить вертикально, то CSS будет таким:

Код
.macmenu {
  height: 720px; /*высота всего блока*/
}
.button {
  text-align: center;
  margin: 0 10px; /*внешние отступы*/
}
.button a img,
.button a {
  display: block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  height: 70px;
  width: 70px;
}
.button a {
  margin: 15px 5px;
  text-align: center;
  color: #000;
  font: normal normal 10px Verdana;
  text-decoration: none;
  word-wrap: normal;
}
.macmenu a:hover img {
  margin-left: -30%;
  height: 128px;
  width: 128px;
}
.button a:hover {
  font: normal bold 14px Verdana;
  height: 128px; /*высота ссылки при наведении курсора*/
}

 

Важно!

При копировании материала указывать ссылку на источник.

- 495
- 07-Января-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта
12-Ноября-2017 в 23:41:03
Рай для верстальщика: синхронизация окон браузеров
29-Июня-2017 в 12:30:13
Что такое информер и зачем нужен на сайте
29-Июня-2017 в 10:21:53
Ограничить длину заголовка и описание к материалу для uCoz
05-Марта-2017 в 12:54:01
Сокращаем "Описание" в вид материалов
01-Марта-2017 в 17:08:05
Не форматируется флешка? Решение есть