Question

好吧我正在尝试做的是在我的菜单上创建一个标签，以获得一个很好的下拉列表，并能够输入3个以上的链接。如何使更多选项卡具有允许3个exta链接的下拉列表？谢谢！

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='http://www.example.com'><span>Home</span></a></li>
        <li><a href='http://www.example.com/category.php?id=4'><span>Photos</span></a></li>
        <li><a href='http://www.example.com/category.php?id=5'><span>Videos</span></a></li>
        <li><a href='http://www.example.com/pages.php?id=about'><span>About me</span></a></li>
        <li>More</li>
    </ul>
</div>

和css是

#cssmenu {
    background: #FCB9C5;
    width: auto;
    text-align: center;
}
#cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;
}
#cssmenu ul:after {
    content:" ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
#cssmenu ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
#cssmenu.align-right ul li {
    float: right;
}
#cssmenu.align-center ul {
    text-align: center;
}
#cssmenu ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    font-family:'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
}
#cssmenu ul li a:hover {
    color: #fff;
}
#cssmenu ul li a:hover:before {
    width: 100%;
}
#cssmenu ul li a:after {
    content:"";
    display: block;
    position: absolute;
    right: -3px;
    top: 19px;
    height: 6px;
    width: 6px;
    background: #ffffff;
    opacity: .5;
}
#cssmenu ul li a:before {
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #333333;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}
#cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after {
    display: none;
}
#cssmenu ul li.active a {
    color: #fff;
}
#cssmenu ul li.active a:before {
    width: 100%;
}
#cssmenu.align-right li.last > a:after, #cssmenu.align-right li:last-child > a:after {
    display: block;
}
#cssmenu.align-right li:first-child a:after {
    display: none;
}
@media screen and (max-width: 768px) {
    #cssmenu ul li {
        float: none;
        display: block;
    }
    #cssmenu ul li a {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #fb998c;
    }
    #cssmenu ul li.last > a, #cssmenu ul li:last-child > a {
        border: 0;
    }
    #cssmenu ul li a:after {
        display: none;
    }
    #cssmenu ul li a:before {
        display: none;
    }
}

Answer 1

这样的事情应该有效：

<html>
<head>
    <title></title>
    <style type="text/css">
        /*PUT YOUR CSS HERE*/
    </style>
    <script type="text/javascript">
        document.body.onload = addClickHandler;
        var isDropDownOpen = false;

        function showMore() {
            if(isDropDownOpen) return;
            isDropDownOpen = true;

            var more = document.getElementById("more");

            var links = [];
            links["Name"] = "http://www.example.com/other.php";
            links["Name 2"] = "http://www.example.com/other2.php";

            var ul = document.createElement("ul");
            ul.style.position="absolute";
            ul.style.background="blue";

            for(var key in links) {
                var value = links[key];
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.setAttribute("href", value);
                var span = document.createElement("span");
                span.textContent = key;

                a.appendChild(span);
                li.appendChild(a);
                ul.appendChild(li);
            }
            ul.id = "more";
            more.appendChild(ul);
        }

        function hideMore() {
            var more = document.getElementById("more");
            more.innerHTML = "More";
            isDropDownOpen = false;
        }

        function addClickHandler {
            document.body.onclick = function(event) {
                if(isDropDownOpen) {
                    var target = event.target;
                    if(target.id !== "more") {
                        hideMore();
                    }
                }
            };
        }
    </script>
</head>
<body>
<div id='cssmenu'>
    <ul>
        <li class='active'><a href='http://www.example.com'><span>Home</span></a></li>
        <li><a href='http://www.example.com/category.php?id=4'><span>Photos</span></a></li>
        <li><a href='http://www.example.com/category.php?id=5'><span>Videos</span></a></li>
        <li><a href='http://www.example.com/pages.php?id=about'><span>About me</span></a></li>
        <li id="more" onclick="showMore();">More</li>
    </ul>
</div>
</body>
</html>

如何在css菜单中添加下拉菜单？

1 个答案: