Question

我要做的是创建一个下拉菜单，以便在移动网站上使用。由于您不能将鼠标悬停在菜单项上以查看子菜单，因此我需要解决该问题。我研究了这个并试图解决这个问题。许多网站建议使用带有onclick功能的JS。我无法抓住它。感谢。

这是HTML。

<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<div class="smenu_div">    
    <ul>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
        </li>   
            </ul>
    </ul>
</div>
</body></html>

这是CSS。

/*Small Menu*/
.smenu_div ul
{
    padding:0px;
    margin-top:35px; 
    margin-right:40px;
    font-family:georgia;
    font-size:60px;
    color:#ffffff;
    list-style:none;
    text-indent:15px;
    text-align:center; 
    width:35%;
    float:right;
    overflow:hidden;
}

.smenu_div ul li
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background:#000000;
    line-height:justified;
    border-bottom:1px solid #333;
    margin-top: 10px;
}
.smenu_div li ul:active{ display: block; }

.smenu_div ul li a
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration:none;
    color:#ffffff;
    display:block;
}
.smenu_div ul li a:hover
{
    color:#000000;
    background:#fdff30;
}
.smenu_div ul li#active
{
    color:#000000;
    background:#fdff30;
}

Answer 1

我几乎无法提出您的问题，但是要创建在html和css的小屏幕网站中使用的菜单，请尝试http://css-tricks.com/convert-menu-to-dropdown/

Answer 2

只需在onclick函数中调整CSS。

HTML：

<div id="menuclick">Click to show menu</div>

<div id="hiddenMenu" style="display: none;">
    TEXT GOES HERE
</div>

JavaScript的：

var hidden = true;
document.getElementById('menuclick').onclick = function() {
    document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
    hidden = !hidden;
};

工作示例：http://jsfiddle.net/F5nJT/1/

如果你想要一个浮动菜单，你会想要使用该元素的css位置，这样当它的显示发生变化时，它就不会使文档重排。

触摸屏的CSS下拉菜单。使用active作为悬停

2 个答案: