jquery - 使用 JQuery 和 CSS 的弹出菜单

Question

大家好，我想在这里创建一个弹出式菜单。这个想法是让菜单从左到右浮动。我所做的是创建了两个无序列表，一个用于图标，一个用于菜单本身。这是我的 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>

这是我的 CSS 代码:

    body { background: #263544; }

ul.icon-menu { margin-top:20px; }
li.icon-box { width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 4px; }
li.icon-box.home { background: #e74c3c; }
li.icon-box.aboutme { background: #1dd0ad; }
li.icon-box.portfolio { background: #3498db; }
li.icon-box.blog { background: #f1c40f; }
li.icon-box.contact { background: #f39c12; }

span.icon { display: inline-block; background: url('img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 44px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}


ul.menu { margin-top:20px; position: absolute;  }
li.menu-box { width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 4px; }
li.menu-box.home { background: #e74c3c; }
li.menu-box.aboutme { background: #1dd0ad; }
li.menu-box.portfolio { background: #3498db; }
li.menu-box.blog { background: #f1c40f; }
li.menu-box.contact { background: #f39c12; }

a{ text-decoration: none; }
h2 {  color: #fff; font-size: 22px; margin: 0 24px;}

这是我尝试使用 jQuery 处理的图像。

首先，我的问题是我不能立即将它们放在一起，而且我不知道如何制定 jQuery 效果。所以我的想法是，每当我将鼠标悬停在菜单图标框上时，它就会显示隐藏菜单框。

这是 JSfiddle 链接:http://jsfiddle.net/2Y5Zm/

Answer 1

DEMO

我修改了您的示例(仅主页 block )。以下是仅使用 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。