使用JQuery和CSS的弹出式菜单

嗨，伙计们，我想在这里创建一个弹出菜单。其想法是将菜单从左向右浮动。我所做的是创建了两个无序列表，一个用于图标，另一个用于菜单本身。这是我的HTML代码

<ul class="icon-menu">
            <li class="icon-box home"> 
                <a href="#">
                  <span class="icon home"></span>

                </a>
            </li>   


            <li class="icon-box aboutme"> 
                <a href="#">
                  <span class="icon aboutme"></span>

                </a>
            </li>


            <li class="icon-box portfolio"> 
                 <a href="#">
                    <span class="icon portfolio"></span>

                 </a>
            </li>


            <li class="icon-box blog"> 
                 <a href="#">
                     <span class="icon blog"></span>

                 </a>
            </li>


            <li class="icon-box contact"> 
                 <a href="#">
                    <span class="icon contact"></span>
                   </a>
            </li>



      </ul>

这是我试图使用jQuery进行训练的图像

首先，我的问题是我不能马上把它们放在一起，我不知道如何表达jQuery效应。所以，只要我将鼠标悬停在菜单图标框上，它就会显示隐藏菜单框

---

这里是JSfiddle链接：

对此，我将采取完全不同的方法。我会做一个div来保存每一行的fly-out选项。此div将是带有overflow:hidden的初始大小。然后，我将把所有的弹出选项放在这个div中，并将float放在左侧，第一个是要显示的初始图片

然后使用Jquery在鼠标上方或单击鼠标时设置飞出动画。支架div的新宽度应为：

数量\选项\此弹出按钮\可容纳*弹出按钮\选项\分区\宽度

（对不起，我的错误，是在我脑子里做的）

通过一些摆弄，你应该让它正常工作。支架的基本css应为初始宽度。您需要在JQuery脚本中添加功能，以使其恢复动画效果。使用.animate，您可以加入一些轻松的动画，以获得额外的奖励点数

*稍后我将使用一些.animate代码对其进行编辑。

我已经修改了您的示例（仅主块）。以下是您只能使用css实现的功能

.icon-box a { display: block; }
.icon-box h2 { position: absolute; top: 0; left: 0; opacity: 0; background: #E74C3C; line-height: 120px; width: 120px; -webkit-transition: all  .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;}
.icon-box a:hover h2 { opacity: 1; left: 120px; margin: 0;
text-align: center;
border-left: 2px solid #8D0F0F;}

以及html结构中的更改：

               <li class="icon-box home"> 
                    <a href="#">
                      <span class="icon home"></span>
                      <h2>Home</h2>
                    </a>
                </li>

---

我在列表中添加了

h2

。

为什么

jquery

？我的意思是你也可以通过使用

css

来实现。只需使用

：将
状态悬停在css中的
元素上即可。@vedanterkar jQuery可以增加浏览器兼容性，可能还会带来更多效果。@yes。没错。但根据op的问题，我认为这里对
jquery
的需求很小，这是一个“为我做”的问题，或者你已经在这方面尝试了一些
jquery
。他想要什么？您可以只使用css做很多事情。：）我真的很喜欢你的主意。当我将鼠标悬停在主H2框上时，是否也可以使其保持在屏幕上？因为现在它已经消失了。最后一个Chrome：在上面悬停时可以正常工作。是在里面的，所以它会一直保持可见，当徘徊在嗨我喜欢你的想法。可以用JSFIDLE向我展示整个过程吗？我会看看我能做些什么，但我工作很忙。基本上，您只需更改用javascript保存所有内容的div的宽度。因为你有一个holder div on overflow:hidden，所以它不会显示任何超出其原始大小的内容，直到它通过鼠标点击或者其他方式扩展。就这些，没什么复杂的。
.icon-box a { display: block; }
.icon-box h2 { position: absolute; top: 0; left: 0; opacity: 0; background: #E74C3C; line-height: 120px; width: 120px; -webkit-transition: all  .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;}
.icon-box a:hover h2 { opacity: 1; left: 120px; margin: 0;
text-align: center;
border-left: 2px solid #8D0F0F;}

               <li class="icon-box home"> 
                    <a href="#">
                      <span class="icon home"></span>
                      <h2>Home</h2>
                    </a>
                </li>