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锻炼的图像。

enter image description here

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

这是JSfiddle LINK：http://jsfiddle.net/2Y5Zm/

Answer 1

DEMO

我修改了你的例子（只有主页）。以下是您只能通过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。

Answer 2

我会对此采取完全不同的方法。我会制作一个包含飞行选项每一行的div。这个div将是overflow：hidden的初始大小。然后我会把所有的飞出选项放在这个div中，浮动左边，第一个是显示的初始图片。

然后使用Jquery在鼠标悬停或单击上设置动画。持有者div的新宽度应为：

amount_options_this_flyout_holds * flyout_options_div_width。

（抱歉不正确，不理会这样做）

$(document).ready(function(){
    $('.holder').click(function(){
        var newWidth = $('.option', this).length * 'option_width'; //gets the amount of option and multiplies.
        $(this).css('width', newWidth);
    });
]);

通过一些摆弄你应该让它正常工作。持有者的基础css应该是初始宽度。您需要在该JQuery脚本中添加功能以将其设置为动画。使用.animate，您可以添加一些缓动动画以获得额外的奖励积分。

*稍后我会用一些.animate代码编辑它。

使用JQuery和CSS的弹出菜单

2 个答案: