2

例子

我的问题是：是否可以仅使用 css 来实现此示例？如果不是，你会怎么做？非常感谢 Jsfiddle 示例；）如何获得斜线？我应该使用图像还是在 css 中是可能的？以及点击时变化的三角形？我知道可以用 Js 来做这件事，也许在 css :after 和 :before 对我有帮助吗？PS：隐藏菜单的Javascript：

<script language="javascript"> 
    function toggle() {
    var ele = document.getElementById("toggleMenu");
    var text = document.getElementById("displayMenu");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Menu";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>
<div class="menu-toggle"><div id="wrap"><a id="displayMenu" href="javascript:toggle();">Menu</a></div></div>
<div id="toggleMenu" style="display: none">
            <div class="menu">  
                <ul><li> Home </li>
                    <li> Item </li>
                </ul>
            </div>
</div>
4

3 回答 3

4

通常我用图像做这样的事情来实现只用 css 的点击事件

<figure>
<img id="zoom" src="http://cargowire.net/Content/images/events/stackoverflow.jpg" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>

和 CSS：

   figure { background: #e3e3e3; display: block; float: left;}
       #zoom {
          width: 0px; 
          -webkit-transition: width 1s;
      }

      #zoom:target {
         width: 400px;

      }

在这里检查：http: //jsfiddle.net/dCTeW/也许菜单也可以做类似的事情

于 2013-01-17T20:09:40.690 回答
0

这是完全可能的，但只有当鼠标悬停时，据我所知，不是点击。您将需要使用 CSS :hover 状态。

这里有一篇深入的文章：http: //csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

以及该文章的演示：http: //csswizardry.com/demos/css-dropdown/

如果你想使用点击，那么一点点 jquery 可能会帮助你：

$('.menu-item').click(function(){
    $(this).find('hover-div').toggle()
})

http://api.jquery.com/toggle/
这是您需要实现的切换文档。

于 2013-01-17T20:03:35.033 回答
0

如果您坚持使用单击而不是悬停，您可以尝试按照建议使用 :focus ，但这实际上是一种 hack，并且不考虑正确使用 HTML 和 css。只是为了演示，看看这个：http: //jsfiddle.net/9efMt/1/

如您所见，我使用了一个输入，带有:focus伪类和+兄弟选择器。该css并没有什么问题，但是将菜单放入输入中还没有完成！

我在同一个小提琴中的 imo 正确示例中将 jquery 用于 js。我所做的只是在单击菜单链接时切换一个类。它看起来像这样：

$('#menu2').click(function() {
  $('#menu2-sub').toggleClass('active');
});

css 应该是相当直接的。

于 2013-01-17T20:35:44.560 回答