Нестандартный вид меню, не используя JS

Главная Форум Компьютерный форум Програмирование Нестандартный вид меню, не используя JS

В этой теме 0 ответов, 1 участник, последнее обновление Картинка профиля Igor Igor 6 года/лет, 3 мес. назад.

Просмотр 1 сообщения - с 1 по 1 (всего 1)
  • Автор
    Сообщения
  • #519
    Картинка профиля Igor
    Igor
    Участник

    Выполняя одну из работ столкнулся с трудностью. Надо было реализовать такое меню:
    [img]http://4put.ru/pictures/max/83/255492.jpg[/img]

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

    Незадача это потому, что реализован был у меня выделенный пункт меню, как три части.
    Слева и справа вот такие варианты «стрелок»:
    [img]http://4put.ru/pictures/max/83/255496.jpg[/img] и [img]http://4put.ru/pictures/max/83/255497.jpg[/img]

    ну а между ними уже div с ссылкой.

    Тоесть единственное, что я мог сделать не используя скрипт, так это подсветить при hover это сердцевинку нужного пункта ..как же быть со «стрелками»?

    [code]


    Untitled Document


    [/code]
    Файл arrows.png:
    [img]http://barkarola.com/examples/menu/arrows.png[/img]

    Как это обычно бывает «все гениальное — просто».
    Способ реализации меню очень прост.
    Интерес представляет использование псевдокласса [b]:first-child[/b]
    Псевдокласс[b] :first-child[/b] применяет стилевое оформление к первому дочернему элементу своего родителя. Именно поэтому в коде используется один и тот же элемент

    без указания классов для него и отображается на сайте по разному.
    Картинки стрелок частично прозрачны и сохранены в формате .png.

    Пощупать вживую можно [url=http://barkarola.com/examples/menu/]здесь[/url].

Просмотр 1 сообщения - с 1 по 1 (всего 1)

Для ответа в этой теме необходимо авторизоваться.