Horizontal menu with slanted dividers

The question was asked: 49 years 9 months ago   views: 6


On one the forum asked a question how to implement such menu

The question is how to cut the picture with the separator on hover(hover). It needs a picture! Ie we need cross-browser compatibility, at least from ie7. The width of the menu items should not be fixed.

Maybe someone did this already? Something do not catch up how to implement this.

Asked: 01-01-1970 в 03:00:00

Answers   3


Well, it is not difficult to implement. I'll throw in a normal colored background, and you have framed the picture. Although the rules are made, but it works.


<a href='#'><p>text</p><p>&nbsp;</p></a> a { background: rgba(0,0, 150, 1); display: inline-block; } a p:first-child, p a: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); }
Answered: 11-01-2013 в 15:53:23
Thank You! Sorry in ie8 not working. - 11-01-2013 в 16:02:42
@dropoff Apparently ie8 doesn't understand rgba. - 11-01-2013 в 16:03:43
yeah. and some problems with the indentation. now dig deeper still. - 11-01-2013 в 16:07:36

The easiest way is to use an image map. then you are guaranteed to be the correct form fields. Of course, each button is for versatility, in three parts.

A more sophisticated way - CSS3 shapes. But no backwards compatibility...

Answered: 11-01-2013 в 15:28:36
the correct form fields not required. Main thing is to have maximum cross-browser and not difficult. For CSS3 shapes thank you! But IE 7-8-9 need a Fig(#parallelogram) why is it not otrisovat. - 11-01-2013 в 15:49:12
@dropoff about how to do the cross-browser CSS3 transformation - demos.aimweb.name/css-transform-generator - 13-01-2013 в 00:23:30
Astor does not plow me generator. but the topic is understood. thank you! - 13-01-2013 в 10:57:06

Try it like this

Use attached drawings, the names m1.png m2.png



<!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>untitled Document</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;}


the <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>

Answered: 12-01-2013 в 21:50:09
jsfiddle.net/x9HHq where is an example that TS wanted? - 12-01-2013 в 21:53:27
lampa, exactly what I wanted! Now dig deeper. And then did a on css3, and it is not always working correctly. - 12-01-2013 в 21:59:17
However with zindex is not convenient. - 12-01-2013 в 22:00:55
And you Beck the ground podgruzit which are laid out above and see. - 12-01-2013 в 22:04:57
@Cone so once they come :) jsfiddle.net/x9HHq/1 - 12-01-2013 в 23:02:01