Сразу смотрим:
DEMO
Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой 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:<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>
.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 будет таким: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;
}
.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; /*высота ссылки при наведении курсора*/
}
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; /*высота ссылки при наведении курсора*/
}
Вот и все, размещаем и радуемся. Благодарю за внимание.
Подскажите пожалуйста, а куда прописываются сами ссылки - на главную, новости и т.д.
ОтветитьУдалить.....разобрался: вместо #.
ОтветитьУдалитьСпасибо за классную плюшку.
Спасибки))) Классное меню))
ОтветитьУдалитьспасибо!!!
ОтветитьУдалитьСимпатичная штука, надо будет присобачить куда-нибудь на свой сайт :D
ОтветитьУдалитьда меню супер только никак не разберусь как стили вставить(((
ОтветитьУдалитьБуду УЖАСНО благодарен если подскажете
не ну не бомба? Оставил комент попросил о помощи и за 5 минут сам решил проблему!
ОтветитьУдалитьВот блого-бог все видит и за просто так ничего стырить не даст! Так что подпишусь я на Ваш блог! и + оставлю... корече буду благодарным и обязанным. Спасибо огромное!
За это меню Вам отдельное спасибо!
ОтветитьУдалитьТеперь вопрос или скорее просьба! Можно ли на блогспоте джава скриптом или CSS реализовать фрейм или как бы это правильно назвать… всплывающее окно, которое, появляясь, будет иметь красивый вид (типа лайтбокса) но в содержимом активный другой сайт который полностью функционирует (переходы на страницы, заполняемые формы…).
Могу указать на пример такой функции, правда, не блогспот.
Пример применения: на вашем сайте размещен скрипт, скопировав его, вызываю окошко онлайн ХТМЛ редактор и, вставив туда код, редактирую под свои нужды.
Собственно на Блогспоте, с помощью JS, можно сделать практически все что и на других ресурсах. Красивый вид - это оформление, все остальное функционирование если "другой сайт который полностью функционирует", то это фрейм, а если "окошко онлайн ХТМЛ редактор", то это можно попробовать на JS
УдалитьНу буду надеяться что когда то у Вас дойдут руки и до подобной темы. Сам мудохался но ничего кроме нового всплывающего окна браузера не смог сделать.
УдалитьЭто хорошая идея, как будет сводное время обязательно займусь ее реализацией, но пока что увы.
УдалитьВозникла проблема при использовании с wordpress woocommerceпри наведении смещается влево изображение. посмотреть можно на сайте wise.com.ua
ОтветитьУдалитьв футере в категориях - страницы woocommerce
У меня тоже что то подобное было. Правда уже не помню как именно исправил(( Пересмотрите код CSS вроде там чего то менял.
ОтветитьУдалитьПопробуйте вот тут
"margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/"
поковыряться.
Меню очень интересное, но как изменить картинки, мне не нужна музыка и фото, а нужны другие разделы, можно ли это сделать?
ОтветитьУдалитьКонечно можно просто измените названия и соответствующие изображения для разделов в коде.
УдалитьПодскажите плиз, а как сделать, чтобы картинки увеличивались смещаясь вверх, а не вниз?
ОтветитьУдалитьЗдравствуйте.Спасибо вам за меню.Но у меня почему-то не увеличиваются картинки при наведении мыши.Текст увеличивается а картинки мертво стоят...Не знаете из за чего так?
ОтветитьУдалитьЯ вас очень прощу ответьте мне если можно.
Не знают как вставлять правельно в css файл а ещё за сайт берутся))) css учи для начало линки минки там что для чего)))
ОтветитьУдалить