Question

我有一个我用于移动网站的菜单。我的问题是，当您单击以展开菜单时，最小化或收缩菜单的唯一方法是再次单击菜单按钮。

所以，我想让观众更明显地再次点击菜单按钮会使其最小化。我的想法是，我会在点击之前向菜单添加向下箭头，然后向上添加向上箭头。

以下是我想要使用的箭头。 Arrows

HTML

<div id="menuclick" class="smenu_div">
    <ul>
      <li>
        <a href="#">Menu</a>
        <ul id='hiddenMenu'>
           <li><a href="/mobile/m.index.html">Home</a></li>
           <li><a href="m.trucks.html">Trucks</a></li>
           <li><a href="m.equipment.hmtl">Equipment</a></li>
         </ul>
        </li>
    </ul>   
</div>

CSS

 /*Mobile 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%;
    overflow:hidden;
    position: relative;
    display: block;
    float:right;
}

.smenu_div ul li
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0);
    line-height:justified;
    margin-top: 10px;
    position:relative;
}


/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{ 
  z-index: 50;
  display: none;
  position: relative;
  width: 100%;
  background: transparent;
  float:none;
  }

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

的JavaScript

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

Answer 1

我更新了你的小提琴：http://jsfiddle.net/kJE5F/2/，它现在有了指定的箭头。

新的CSS：

.smenu_div ul li a.menu-title
{
    background: #000000 url('http://s26.postimg.org/5szmru8r9/down.png') no-repeat right center;
    background-size: 48px 30px;
    padding-right: 50px;
}

.menu-open .smenu_div ul li a.menu-title
{
    background-image: url('http://s26.postimg.org/rqw3lmnrp/image.png')
}

（请不要像我那样热链接图像数据！）

还有一些新的JavaScript：

document.body.classList.toggle('menu-open');

但我会改变箭头图像，因为它们与按钮的颜色不能很好地搭配，请看看这些：https://www.iconfinder.com/search/?q=arrow&license=2&price=free。

使用onClick更改背景图像

1 个答案: