Question

我在CSS3＆amp ;;中构建自己的垂直菜单HTML5：
enter image description here

我需要首先考虑＆＃34;项目1＆＃34;分为两个按钮，第一个是＆＃34;项目1＆＃34;，第二个是箭头按钮，它将打开/关闭带子项的隐藏ul。这样的事情：
enter image description here

第一个按钮 - 调用从子项中选择的默认操作第二个按钮 - 给用户自己选择，当按下第一个按钮时，现在做什么或做什么。

如何将第一个项目分成两个按钮？

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-1.11.1.js"></script>
    <link href="./css/WMenu.css" rel="stylesheet"/>
</head>
<body>
    <ul class="WMenu">
        <li id="" class="WButton">
            Item 1
        </li>
        <ul for="AddPageBtn" class="WMenuPopup">
            <li class="WButton">Sub-Item 1</li>
            <li class="WButton">Sub-Item 2</li>
            <li class="WButton">Sub-Item 3</li>
            <li class="WButton">Sub-Item 4</li> 
        </ul>
        <li class="WButton">Item 2</li>
        <li class="WButton">Item 3</li>
        <li class="WButton">Item 4</li>
    </ul> 
</body>
</html>

CSS：

.WMenu {
    background: url("../images/WMenu/bg.png");
    background-repeat: repeat-z;
    background-attachment: fixed;
    list-style-type: none;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    height: 100%;
    width: 200px;
    margin: 0 0 0 10px;
    padding: 0;
}

/*Выпадающее под-меню */
.WMenuPopup {
    list-style-type: none;
}

.WButton {
    background: #feffff;
    background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef));
    background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -o-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -ms-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
    padding: 4px; 
    margin-right: 2px; 
    margin-bottom: 2px;
    width: auto;
    height: auto;
}

.WButton:hover {
    cursor: pointer;
    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
    padding: 4px; 
    margin-right: 2px; 
    margin-bottom: 2px; 
    font-weight:bold;
    width: auto;
}

Answer 1

这是一种方法：

http://jsfiddle.net/c5JG6/

new html：

 <ul class="WMenu">
        <li id="" class="split_button button_left WButton">
        Item 1           
    </li>
    <li class="split_button button_right WButton">
        click!
    </li>
    <ul for="AddPageBtn" class="WMenuPopup">
        <li class="WButton">Sub-Item 1</li>
        <li class="WButton">Sub-Item 2</li>
         <li class="WButton">Sub-Item 3</li>
        <li class="WButton">Sub-Item 4</li> 
    </ul>
      <li class="WButton">Item 2</li>
      <li class="WButton">Item 3</li>
       <li class="WButton">Item 4</li>
    </ul>

新css：

 .split_button {
    display: block;
   margin-left: 0px;
   margin-right: 0px !important;
   box-sizing: border-box;
   float: left;     
}
.split_button.button_left {
   width: 80%;
} 
.split_button.button_right {
   width: 20%;
   border-left: 1px solid black;
}
.WMenuPopup {
   list-style-type: none;
   clear:both;float:none;
}

将在所有浏览器中工作ie8

Answer 2

首先，子菜单ui应该放在parent li元素中。其次，只需在li元素中添加<span>或<a>，然后设置样式。

http://jsfiddle.net/EjzuK/

<强> HMTL

<ul class="WMenu">
    <li id="" class="WButton">
        <a>Item 1<span class="WButtonArrow">Click</span></a>
        <ul for="AddPageBtn" class="WMenuPopup">
            <li class="WButton"><a>Sub-Item 1</a></li>
            <li class="WButton"><a>Sub-Item 2</a></li>
            <li class="WButton"><a>Sub-Item 3</a></li>
            <li class="WButton"><a>Sub-Item 4</a></li> 
        </ul>
    </li>
    <li class="WButton"><a>Item 2</a></li>
    <li class="WButton"><a>Item 3</a></li>
    <li class="WButton"><a>Item 4</a></li>
</ul>

<强> CSS

.WMenu {
    background: url("../images/WMenu/bg.png");
    background-repeat: repeat-z;
    background-attachment: fixed;
    list-style-type: none;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    height: 100%;
    width: 200px;
    margin: 0 0 0 10px;
    padding: 0;
}

/*Выпадающее под-меню */
.WMenuPopup {
    display: none;
    list-style-type: none;
}

.WButton a {
    cursor: pointer;
    display: block;
    position: relative;
    background: #feffff;
    background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef));
    background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -o-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -ms-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
    padding: 4px; 
    margin-right: 2px; 
    margin-bottom: 2px;
    width: auto;
    height: auto;
}

.WButton a span.WButtonArrow {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background: #feffff;
    background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef));
    background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -o-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: -ms-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 35%,#a0d8ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
    border-left: 1px solid #a0d8ef;
    padding: 4px;
    width: auto;
    height: auto;
}

.WButton a span.WButtonArrow:hover {
    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
    border-left: 1px solid #05abe0;
}

.WButton a:hover {
    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
}

<强>的jQuery

$(function() {

    $('.WButtonArrow').click(function() {

        $(this).closest('.WButton').find('.WMenuPopup').toggle();

    });

});

使用子菜单构建垂直菜单

2 个答案: