试图在没有偏斜文本的情况下实现偏斜的菜单项。接近但第二层项目奇怪地级联

时间:2013-08-20 23:04:15

标签: jquery html css css3

我使用'transform'来偏移li项,然后在span s上进行相反的转换以理顺文本。

我不得不使用jQuery在文本周围添加span因为我必须在工作中使用的CMS自动创建菜单,所以我不能在其中添加任何类或span HTML。

我已经接近实现我想要的东西,但是下拉菜单项由于某种原因是级联的。

我该如何解决这个问题?

以下是我所做的: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;
}

1 个答案:

答案 0 :(得分:1)

这是你想要实现的(下拉的定位可能需要一些调整)? http://jsfiddle.net/jzKHD/

顶级项目的偏差也会影响下拉ul的界限 - 然后你将每个下拉列表“忽略”li,而你实际上应该忽略整个ul { {1}}:

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 */
}

编辑:要使其与第三级导航一起正常工作,请将变换移动到仅影响第一个下拉列表的单独规则(使用子选择器)。所以上面的样式集应该是这样的:

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;
}

在这里小提琴:http://jsfiddle.net/ns832/(同样,我忽略了间距问题,它们应该很容易修复。)