0

Всем привет!

На одном форуме задавали вопрос по реализации такого меню img

Вопрос в том, как правильно вырезать картинку с разделителем при ховере(hover). Нужна именно картинка! Т.е. нужна кроссбраузерность, минимум от ie7. При этом ширина пунктов меню не должна быть фиксированной.

Может кто делал уже такое? Что-то не догоню как реализовать такое.

3 ответа 3

1

Самый простой способ - использовать image map. тогда у вас гарантированно будут правильные формы областей. Разумеется, каждая кнопка состоит для универсальности, из трех частей.

Более сложный способ - фигуры CSS3. Но обратная совместимость никакая...

3
  • правильные формы областей не обязательно. Главное, чтобы было по максимуму кроссбраузерно и не сложно. За CSS3 фигуры спасибо! Но IE 7-8-9 нужную фигу(#parallelogram) почему-то не отрисовывае.
    – drop_off
    11 янв 2013 в 11:49
  • @dropoff, о том, как сделать кроссбраузерную трансформацию CSS3 - demos.aimweb.name/css-transform-generator
    – Astor
    12 янв 2013 в 20:23
  • Astor, не пашет у меня генератор. но тему понял. спасибо!
    – drop_off
    13 янв 2013 в 6:57
0

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

http://jsfiddle.net/DMPaL/1/

<a href='#'><p>текст</p><p>&nbsp;</p></a>

a {
  background: rgba(0,0, 150, 1);
  display: inline-block;
}
a p:first-child, a p:last-child   {
  background: rgba(0, 0, 255, 1);
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0 0 0 20px;
  padding-right:10px;
}
a p:last-child {
  width: 10px;
  background: rgba(0,0, 200, 1);
  margin:0;
}

a:hover {
  background: rgba(0, 0, 150, 0.5);
}
a:hover p:first-child {
  background: rgba(0, 0, 255, 0.5);
}

a:hover p:last-child   {
  background: rgba(0, 0, 200, 0.5);
}
3
  • О. Спасибо! Жаль в ie8 не работает.
    – drop_off
    11 янв 2013 в 12:02
  • @dropoff Видимо ie8 просто не понимает rgba.
    – lampa
    11 янв 2013 в 12:03
  • ага. и проблемы какие-то с отступами. сейчас поковыряю еще.
    – drop_off
    11 янв 2013 в 12:07
0

Попробуй вот так

Используй прикрепленные рисунки, названий m1.png m2.png

http://postimage.org/image/ds8hvcsez/

http://postimage.org/image/xbd34pr6j/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head>

<style> *{margin:0;padding:0;} body {background:#333333;font-family:Arial;font-size:12px;} ul.menu {padding:0 20px;display:table;list-style:none;border-top:1px solid white;border-bottom:1px solid white;} ul.menu li {position:relative;background: url('images/m1.png') right center;float:left;margin-left:-15px;} ul.menu li a {display:table; position:relative;padding:0 20px;line-height:30px;color:white;text-decoration:none;} ul.menu li:hover {background: url('images/m2.png') right center;} ul.menu li a:hover {color:#333333;}

</style>

<body> <ul class="menu"> <li style="z-index:10;"> <a href="#"> home </a> </li> <li style="z-index:9;"> <a href="#"> services </a></li> <li style="z-index:8;"> <a href="#"> vacancies </a></li> <li style="z-index:7;"> <a href="#"> chat </a></li> <li style="z-index:6;"> <a href="#"> see other pages </a></li> </ul>

</body> </html>

5
  • jsfiddle.net/x9HHq и где тут пример, который ТС хотел?
    – lampa
    12 янв 2013 в 17:53
  • lampa, именно то, что хотел! Сейчас поковыряю. А то делал на css3, а оно не везде работает правильно.
    – drop_off
    12 янв 2013 в 17:59
  • Правда с zindex не удобно.
    – drop_off
    12 янв 2013 в 18:00
  • А ты бек граунды подгрузи которые выше выложены и увидишь.
    – Cone
    12 янв 2013 в 18:04
  • @Cone Ну так сразу их давай :) jsfiddle.net/x9HHq/1
    – lampa
    12 янв 2013 в 19:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.