I used ' transform ' to skew the li items, then opposite transform on the span s to straighten out the text.

I had to use jQuery to add the span s around the text because the CMS I have to use at work automatically creates the menu, so I can't add any classes or span s within the HTML.

I have come close to achieving what I want, but the drop down menu items are cascading for some reason.

How can I fix this?

Here is what I've done: http://jsfiddle.net/y5w8m/1/

<div id="menu"> <ul id="nav"> <li class="current first"><a href="#"><span>Home</span></a> <ul> <li><a href="#"><span>drop 1</span></a> <ul> <li><a href="#"><span>drop 2</span></a></li> <li><a href="#"><span>drop 2</span></a></li> </ul> </li> <li><a href="#"><span>drop 1</span></a></li> <li><a href="#"><span>drop 1</span></a></li> <li><a href="#"><span>drop 1</span></a></li> </ul> </li> <li><a href="#"><span>Services</span></a></li> <li class="last"><a href="#"><span>Contact Us</span></a> <ul> <li><a href="#"><span>drop 2</span></a></li> <li><a href="#"><span>drop 2</span></a></li> </ul> </li> </ul> </div>

CSS:

/* Main Navigation */ #menu { background: #528aaf; position: relative; margin-top: 5px; z-index: 400; } ul#nav { margin: 0; padding: 0; width: auto; } ul#nav > li { float: left; padding: 0; list-style: none; list-style-image: none; display: inline-block; position: relative; transform: skew(-25deg); -webkit-transform: skew(-25deg); -moz-transform: skew(-25deg); -ms-transform: skew(-25deg); -o-transform: skew(-25deg); } ul#nav li a { background: none repeat scroll 0 0 #2D5B79; color: #FFFFFF; display: block; font-family: Arial; font-size: 11px; line-height: 32px; padding: 0 35px; text-align: left; text-decoration: none; text-transform: uppercase; } ul#nav li a span { transform: skew(25deg); -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); display:block; } ul#nav li.current a, ul#nav li a:hover { background: #c68c67; } ul#nav li ul { /* second-level lists */ position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; transform: skew(25deg); -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); display:block; } ul#nav li ul li, ul#nav li ul li span { transform: skew(0deg); -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); display:block; } ul#nav li ul li a:hover, ul#nav li.current ul li a:hover, ul#nav li ul li.current a { /* second level dropdown button hover state */ background: #c68c67; color: #fff; } ul#nav li ul li ul { margin: -30px 0 0 220px; } ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul, ul#nav li.sfhover ul li ul, ul#nav li.sfhover ul li ul li ul { left: -999em; } ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul, ul#nav li.sfhover ul, ul#nav li ul li.sfhover ul, ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; }

Problem courtesy of: talena6

Solution

Is this what you're wanting to achieve (the positioning of the drop downs may need a bit of tweaking)? http://jsfiddle.net/jzKHD/

The skew on the top level items is also affecting the bounds of the drop down ul -- you're then "unskewing" each drop down li , whereas you should actually unskew the whole ul :

ul#nav li ul { /* second-level lists */ border: 1px solid black; position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; /* This transform was moved here from the next rule */ -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); transform: skew(25deg); } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; display:block; /* The transform in the previous rule was originally here */ }

EDIT: To make it work correctly with the third level nav, move the transform into a separate rule that only affects the first drop down (using child selectors). So the set of styles above would instead look like this:

ul#nav li ul { /* second-level lists */ position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; } /* This rule will only affect the first drop down, and be ignored by subsequent ones. */ ul#nav > li > ul { -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); transform: skew(25deg); } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; display:block; }

Fiddle here: http://jsfiddle.net/ns832/ (Again, I've ignored the spacing issues, they should be hopefully easy enough to fix.)

Solution courtesy of: Zaid Crouch

本文数据库(综合)相关术语:系统安全软件

分页:12
转载请注明
本文标题:Trying to achieve skewed menu items without skewed text. Came close but 2nd tier ...
本站链接:https://www.codesec.net/view/628550.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 数据库(综合) | 评论(0) | 阅读(23)