Выезжающее CSS3 меню

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3    Дата: 6-04-2011, 15:17
Выезжающее CSS3 менюКомпактное выезжающее горизонтальное выпадающее CSS3 меню
Стильный пример CSS3 анимации свойства transition, меню реализовано в виде одной кнопки, при наведении на кнопку - вправо плавно выезжает остальная часть меню с категориями, при наведении на категорию - плавно вниз выпадает меню подкатегорий, всё просто и эффектно.
HTML реализация - в блок меню вложен маркированный список самого меню, в первый элемент списка вложен ещё один блок, который выезжает при наведении, с маркированным списком с разным уровнем вложенности. Меню корректно работает во всех современных браузерах, код меню валидный DTD XHTML 1.0 Strict. CSS реализацию изучаем самостоятельно.

Смотреть пример компактное выезжающее горизонтальное выпадающее CSS3 меню
Скачать готовый пример компактное выезжающее горизонтальное выпадающее CSS3 меню
Версия для печати
  • 100
     Просмотров: 11 494      Комментариев: 10   

Понравилась новость Выезжающее CSS3 меню на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 10 Автор: nthanter 9 августа 2012 14:28

 Вот такой я - nthanter

nthanter
Гости
комментариев
публикаций

Статус:
Вау, первый раз такое вижу, респект админу!

  • Нравится
  • 0
    

№ 9 Автор: Admin 13 февраля 2012 15:36

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Ильдар, На здоровье, я очень рад что смог Вам помочь. Браузер IE тоже страдает такой проблемой, я бы вам рекомендовал скачать нормальный браузер, например последнего Mozilla Firefox, очень хороший браузер, я им только и пользуюсь, но он любит кушать оперативную память, если у Вас оперативки не много то лучше поставить Google Chrome - тоже хороший браузер. А самое главное - современные браузеры поддерживают все красивости CSS3 а браузер Internet Exlorer до девятой версии CSS3 не поддерживает вообще, поэтому от этого браузера лучше вообще отказаться.
Скачать нужные Вам программы Вы можете через мой блок "Бесплатный софт" который в правой колонке сайта, там все ссылки ведут на официальные сайты программ. Этот блок с программами я сделал для себя, ну и решил выложить , может ещё кому пригодится, так что пользуйтесь на здоровье.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 8 Автор: Ильдар 13 февраля 2012 14:28

 Вот такой я - Ильдар

Ильдар
Гости
комментариев
публикаций

Статус:
День добрый, "Admin".
Допустил ошибку, когда вставлял, данный вами реннее код.
Сейчас все работает.
Еще раз огромное спасибо за профессионализм и оперативный ответ.
С уважением, Ильдар.

  • Нравится
  • 0
    

№ 7 Автор: Ильдар 13 февраля 2012 00:01

 Вот такой я - Ильдар

Ильдар
Гости
комментариев
публикаций

Статус:
Еще раз доброй ночи "Admin". Огромное ВАм спасибо за быстрый ответ.
У меня стоит обозреватель Internet Exlorer 8, версия: 8.0.7601.17514, Windows 7, начальная. Попробывал в css вставить код, предоставленный вами. Не помогло. Может есть еще варианты?
Заранее благодарен.
С уважением, Ильдар.

  • Нравится
  • 0
    

№ 6 Автор: Admin 12 февраля 2012 18:22

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Ильдар,
Представляю Вашу проблему, наверняка у Вас стоит старый браузер Mozilla Firefox эта рамка появляется именно в этом браузере, это евойная такая особенность, которая раздражает очень многих, эту особенность можно обойти двумя способами -
1. Обновить браузер до последней версии.
2.Добавить в CSS правило :
а {
    outline: none; /* Убираем границу вокруг ссылок  */
   }

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


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 5 Автор: Ильдар 12 февраля 2012 01:38

 Вот такой я - Ильдар

Ильдар
Гости
комментариев
публикаций

Статус:
Доброй ночи. Сегодня обнаружил ваш сайт. Очень понравился. Спасибо вам большое. Скачал "Компактное выезжающее горизонтальное выпадающее CSS3 меню". В процессе редактирования натолкнулся на небольшой баг данного меню. Проблема небольшая, но уж больно глаза мозолит. Долгие попытки решить ее результата не дали.
Описание проблемы: После нажатия на любую ссылку меню вокруг нажатой кнопки появляется обрамление из точек, после чего грузится страница. НО, ЕСЛИ ПОСЛЕ ЭТОГО в браузере нажать кнопку "НАЗАД", то в меню, на нажатой ранее кнопке, данное обрамление ОСТАЕТСЯ.
При чем, на темном фоне оно принимает белый цвет, а на светлом-черный. Данное обрамление есть техническое вспомогательное средство для обозначения слоя в "SharePoint Designer 2007". Как убрать его не знаю.
Прошу Вашей помощи, плиз.
Заранее благодарен.
С уважением, Ильдар.
8-925-100-22-48

  • Нравится
  • 0
    

№ 4 Автор: Admin 8 февраля 2012 12:31

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Zairka,
Проблема ваша не понятна. Куда вы эту менюшку хотите пригадать? Чтоб стрелочка была - нужно пути к картинкам из папки IMG прописать правильно в файле gorknopka.css и всё будет работать.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 3 Автор: Zairka 8 февраля 2012 05:11

 Вот такой я - Zairka

Zairka
Гости
комментариев
публикаций

Статус:
klassnoe menyu, no menya ne polu4aetsya..... (((

etoistrelo4ki sboku net (( ne znayu 4to delat'...

nadeyus' pomojete...

kuda kak dobavit' 4toby posmotreli 4to za fignya u menya?

  • Нравится
  • 0
    

№ 2 Автор: Admin 18 апреля 2011 18:57

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: Unit1
Спасибо, хороший пример, только влево переделаю =)

Пользуйтесь на здоровье


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: Unit1 17 апреля 2011 22:05

 Вот такой я - Unit1

Unit1
Гости
комментариев
публикаций

Статус:
Спасибо, хороший пример, только влево переделаю =)

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус