Горизонтальное меню с выпадающим списком

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
Uzanka

Re: Горизонтальное меню с выпадающим списком

Uzanka 04 янв 2014, 18:13 Сообщение

CabinetAdmin писал(а):зы. Кстати, картинка очень к менюшке подходит, классно смотрится:)

мне тоже очень понравилось :)

eska
отлично смотрится! :ihaaaa:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 04 янв 2014, 18:32 Сообщение

Я хочу все надписи в меню изменить на иконки.
Спасибо за мнение :drink:

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 04 янв 2014, 20:07 Сообщение

CabinetAdmin
Спасибо, встала очень хорошо :drink:

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 04 янв 2014, 20:47 Сообщение

А можно сделать небольшое дополнение, когда наводишь вышкой на "Мы вконтакте" она бы прокручивалась по горизонтали вокруг своей оси?

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 05 янв 2014, 10:29 Сообщение

Если я правильно понял...

<a href="ссылка" style="padding: 0 12px;"> меняете на:

Код: Выделить всё

<a href="ссылка" style="padding: 0 12px;" onmouseover="this.className='flip animated';" onmouseout="this.className='';">


В тему стиля добавляете:

Код: Выделить всё

.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.flip {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}

@-webkit-keyframes flip {
0% {
-webkit-transform: translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: translateZ(0) rotateY(0) scale(1);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: translateZ(150px) rotateY(170deg) scale(1);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: translateZ(0) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: translateZ(0) rotateY(360deg) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: translateZ(0) rotateY(0) scale(1);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: translateZ(150px) rotateY(170deg) scale(1);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: translateZ(150px) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: translateZ(0) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: translateZ(0) rotateY(360deg) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;
}
50% {
transform: translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;
}
}
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 05 янв 2014, 16:29 Сообщение

Очень круто:) спасибо огромнейшее:)

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 05 янв 2014, 22:43 Сообщение

Вопрос по последнему изменению, может ли такое быть, что, иконка не будет крутиться из-за плохих технических хар-тик компьютера, устаревшего браузера или слетевших драйверов и так далее?

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 06 янв 2014, 08:08 Сообщение

В старых браузерах конечно работать не будет. На слабеньких компьютерах будет немного притормаживать. А с драйверами не знаю... может быть... :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Горизонтальное меню с выпадающим списком

silver073000 06 янв 2014, 15:04 Сообщение

eska » Вчера, 22:43 писал(а):может ли такое быть, что, иконка не будет крутиться из-за плохих технических хар-тик компьютера, устаревшего браузера или слетевших драйверов и так далее?

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

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 06 янв 2014, 16:55 Сообщение

Может посоветуете мне иконки в эт ом же стиле: портал, чат, статьи.
Спасибо откликнувшимся:)

Аватара пользователя
silver073000

Re: Горизонтальное меню с выпадающим списком

silver073000 08 янв 2014, 00:19 Сообщение

Можно просто ту кнопку взять за основу и сделать кнопки для портала, чата и т.д. :) Только вопрос. Кнопки должны быть одинаковой длинны или зависимы от длинны текста? :)

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 08 янв 2014, 03:14 Сообщение

BOJIK
Без разницы, колонки сами раздвинутся

Archi

Горизонтальное меню с выпадающим списком

Archi 18 янв 2017, 12:40 Сообщение

Подскажите, пожалуйста. Я вставил это меню на сайт нашей школы, но текст не помещается в некоторые рамки. Как растянуть рамку по ширине всего текста? Что-то я не пойму где это нужно поменять и что поменять... Заранее спасибо за помощь!

Скриншот во вложении

Всё, проблема решена, "метод научного тыка" всегда выручает width: 20px; заменил на width: auto;

Код: Выделить всё

#menu ul a { padding: 10px; [b]width: auto; [/b] _height: 10px; /*Только для IE6*/ display: block; white-space: nowrap; float: none; text-transform: none; }
Вложения
Скриншот - Сайт школы.JPG
Скриншот



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: Яндекс и 1 гость