使用jQuery实现摇滚菜单

Rocking and Rolling Rounded Menu with jQuery 菜单悬停时，发生图标滚动菜单拉长的效果。

菜单

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1359
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$('.item').hover(
    function() {
        var $this = $(this);
        expand($this);
    },
    function() {
        var $this = $(this);
        collapse($this);
    }
);

编译

CSS

HTML

<div>
    <div class="title"></div>
</div>
<div class="menu">
    <div class="item">
        <a class="link icon_mail"></a>
        <div class="item_content">
            <h2>Contact us</h2>
            <p>
                <a href="#">eMail</a>
                <a href="#">Twitter</a>
                <a href="#">Facebook</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_help"></a>
        <div class="item_content">
            <h2>Help</h2>
            <p>
                <a href="#">FAQ</a>
                <a href="#">Live Support</a>
                <a href="#">Tickets</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_find"></a>
        <div class="item_content">
            <h2>Search</h2>
            <p>
                <input type="text"></input>
                <a href="">Go</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_photos"></a>
        <div class="item_content">
            <h2>Image Gallery</h2>
            <p>
                <a href="#">Categories</a>
                <a href="#">Archives</a>
                <a href="#">Featured</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_home"></a>
        <div class="item_content">
            <h2>Start from here</h2>
            <p>
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Pricing</a>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" src="/uploads/160101/jquery-1.4.2.min.js"></script>
<script src="https://tympanus.net/Tutorials/RockingRollingMenu/jquery-css-transform.js" type="text/javascript"></script>
<script src="https://tympanus.net/Tutorials/RockingRollingMenu/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>

Rocking and Rolling Rounded Menu with jQuery 菜单悬停时，发生图标滚动菜单拉长的效果。

菜单

编辑器支持Emmet

快捷键

Rocking and Rolling Rounded Menu with jQuery 菜单悬停时，发生图标滚动菜单拉长的效果。

菜单

使用jQuery和CSS3实现竖向手风琴菜单导航栏

使用jQuery实现的下滑/下拉式菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：