好玩的3D折叠效果的菜单

于 2022-05-18 21:09:08 发布
阅读量191 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript css 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chendongpu/article/details/124851160
版权

请添加图片描述
源码如下：

<!doctype html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码。" />
<title>{title}</title>
</head>
<body>

    <header class="header">
        <hgroup>
            <h1>Makisu</h1>
            <h2>CSS 3D Dropdown Concept</h2>
        </hgroup>
    </header>

    <section class="demo">

        <dl class="list nigiri">
            <dt>Nigiri</dt>
            <dd><a href="#">Maguro</a></dd>
            <dd><a href="#">Sake</a></dd>
            <dd><a href="#">Unagi</a></dd>
            <dd><a href="#">Buri</a></dd>
            <dd><a href="#">Suzuki</a></dd>
            <dd><a href="#">Saba</a></dd>
            <dd><a href="#">Iwashi</a></dd>
            <dd><a href="#">Kohada</a></dd>
            <dd><a href="#">Hirame</a></dd>
            <dd><a href="#">Tobiwo</a></dd>
        </dl>

        <dl class="list maki">
            <dt>Maki</dt>
            <dd><a href="#">Ana-kyu</a></dd>
            <dd><a href="#">Chutoro</a></dd>
            <dd><a href="#">Kaiware</a></dd>
            <dd><a href="#">Kampyo</a></dd>
            <dd><a href="#">Kappa</a></dd>
            <dd><a href="#">Natto</a></dd>
            <dd><a href="#">Negitoro</a></dd>
            <dd><a href="#">Oshinko</a></dd>
            <dd><a href="#">Otoro</a></dd>
            <dd><a href="#">Tekka</a></dd>
        </dl>

        <dl class="list sashimi">
            <dt>Sashimi</dt>
            <dd><a href="#">Maguro</a></dd>
            <dd><a href="#">Toro</a></dd>
            <dd><a href="#">Ebi</a></dd>
            <dd><a href="#">Saba</a></dd>
            <dd><a href="#">Ika</a></dd>
            <dd><a href="#">Tako</a></dd>
            <dd><a href="#">Tomago</a></dd>
            <dd><a href="#">Kani</a></dd>
            <dd><a href="#">Katsuo</a></dd>
            <dd><a href="#">Maguro</a></dd>
        </dl>

        <a href="#" class="toggle">Toggle</a>
<div style="text-align:center">    
<p>{google_729x90}</p>
</div>
    </section>

    <div class="warning">
        <div class="message">
            <h1>CSS 3D Not Detected :(</h1>
            <p>I couldn't detect your browser's CSS 3D capabilities. If I'm wrong, please <a href="https://github.com/soulwire/Makisu/issues" target="_blank">file an issue</a>, otherwise, try a <a href="http://www.google.com/chrome" target="_blank">sexier browser</a></p>
        </div>
    </div>

    <a href="https://github.com/soulwire/Makisu" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <script src="js/jquery.min.js"></script>
    <script src="js/makisu.js"></script>
    <script>

        // The `enabled` flag will be `false` if CSS 3D isn't available

        if ( $.fn.makisu.enabled ) {

            var $sashimi = $( '.sashimi' );
            var $nigiri = $( '.nigiri' );
            var $maki = $( '.maki' );

            // Create Makisus

            $nigiri.makisu({
                selector: 'dd',
                overlap: 0.85,
                speed: 1.7
            });

            $maki.makisu({
                selector: 'dd',
                overlap: 0.6,
                speed: 0.85
            });

            $sashimi.makisu({
                selector: 'dd',
                overlap: 0.2,
                speed: 0.5
            });

            // Open all
            
            $( '.list' ).makisu( 'open' );

            // Toggle on click

            $( '.toggle' ).on( 'click', function() {
                $( '.list' ).makisu( 'toggle' );
            });

            // Disable all links

            $( '.demo a' ).click( function( event ) {
                event.preventDefault();
            });

        } else {

            $( '.warning' ).show();
        }

    </script>
    

</body>
</html>

下载源码

reg183
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
分享10款效果惊艳的HTML5图片特效
u014507851的博客
01-22 2万+
在HTML5的世界里，图片特效都十分绚丽，我们在网站上也分享过很多不错的HTML5图片特效，现在我们精选10款效果惊艳的HTML5图片特效分享给大家。1、HTML5 3D正方体旋转动画 很酷的3D特效之前我们分享过很多非常不错的HTML5 3D立体动画特效，尤其是一些HTML5 Canvas动画，更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果，该特效是一个可以旋转播放的正方体，...
超炫3D下拉菜单网页特效
11-19
超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效
带有3D效果的折叠菜单(Menu)效果
04-03
这个是带有3D效果的折叠菜单(Menu)效果，源码Sidebar-Reveal-Taasky，应用Taasky的带有3D效果的折叠菜单，该源码实现了一种应用Taasky的带有3D效果的折叠菜单--Sidebar-Reveal-Taasky的效果的，效果还是比较炫的，可能是带有3d效果的感觉吧。
一款非常棒的CSS 3D下拉式菜单实现-Makisu
weixin_30246221的博客
10-29 138
日期：2012-10-26来源：GBin1.com 说到折叠效果，曾经我们介绍过一款oriDomi折纸效果的javascript类库，它是一款JavaScript类库，可以把页面中任何HTML元素生成折叠效果。在今天我们介绍的文章中，使用CSS3D菜单作为一个jQuery插件，它可以自动转换成任何一款列表中的元素。在今天的文章中，我们介绍一款非常棒的3D效果下拉式菜单-Makisu，它独有的...
最全面3D建模菜单，各种流程细分讲解
李旭的博客
05-16 2368
在当下3D技术发展的高速时期，3D建模表现出了极强的生命力，3Dmax、Maya、ZB这些都是3D建模的常用软件。说到这里就要给大家普及一下三维模型，什么是三维模型？三维模型是物体的多边形表示，通常用计算机或者其它视频设备进行显示。显示的物体可以是现实世界的实体，也可以是虚构的物体。游戏3D则是通过大型的3D游戏引擎制作游戏世界和各种物件的3D模型，并有计算机处理后得到真实感较强的3D图像。现在越来越多的人瞄准游戏3D行业。今天带来整理后的教程资料，从入门到项目经验传授，总有一个你感兴趣的发展方向来学习。
3D下拉菜单--简易版
weixin_42161401的博客
10-19 382
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0; } @-webkit-keyframes open{ 0%{
超炫3D下拉菜单Makisu
12-03
插件描述：超炫3D下拉菜单Makisu. 参考示例：http://www.jq22.com/jquery-info4948
分享7款顶级的CSS3动画特效
yanyiping992的博客
07-06 2840
今天我们要来分享最新的7款CSS3动画特效，其中有菜单、文字、图片特效，另外还有几个表现非常特别的动画，看了你就知道了。1、CSS3 SVG文字背景动画 超酷的文字特效今天我们来分享一款基于CSS3和SVG的文字特效，文字的背景可以定义一些动画特效，在背景动画播放的同时，我们还可以选中文字。本示例让文字背景展示水波和火焰的动画特效，当然你还可以利用SVG的特点来制作其他炫酷的背景动画。 在线演示 ...
unity3d新手入门必备教程
weixin_33729196的博客
06-07 1025
Unity3D入门教程中文版 Unity3D基本操作、 用Unity3D创建简单漫游... 1 基本设置... 1 修改视角控制键为右键... 9 如何取消浏览窗口上的右键菜单... 10 植物效果设置... 10 水面效果的设置... 15 烘培光影贴图的处理... 16 如何制作连续加载的场景漫游... 29 ...
Android实战开发通用流行框架大全
门心叼龙的专栏
01-22 6920
GitHub上受欢迎的Android UI Library https://mvnrepository.com/ https://jar-download.com/ https://docs.oracle.com/javase/7/docs/api/ http://hg.openjdk.java.net/jdk8/jdk8/jdk/file/tip/src/share/classes/ja...
Makisu, CSS 3D 下拉概念.zip
09-18
Makisu, CSS 3D 下拉概念 Makisu一个实验性的CSS概念，包装在一个的jQuery插件插件中。查看演示 ( 你将需要一个能够支持 CSS 3D的浏览器，如 Chrome 。)现在可以在这里找到支持浏览器的列表： 。示例用法像任何常规jQuery插件
好玩的3D折叠效果的菜单.rar
05-18
"好玩的3D折叠效果的菜单"项目可能是一个开源的软件资源，允许开发者探索和学习如何实现这种效果。 3D折叠效果主要涉及到以下几个关键知识点： 1. **CSS3**: 这是实现3D折叠效果的基础，CSS3提供了许多新的选择器...
滑动折叠菜单导航效果
01-23
滑动折叠菜单导航效果是一种常见的网页交互设计，它在网页布局和用户体验方面起着至关重要的作用。这种设计通常用于网站的顶部或者侧边栏，帮助用户轻松地浏览和访问网站的各个部分。以下是对滑动折叠菜单导航效果的...
WPF自定义左侧折叠菜单
11-27
在Windows Presentation Foundation（WPF）框架中，创建一个自定义的左侧折叠导航菜单是一项常见的任务，它可以提升应用程序的用户体验，使用户能够轻松地在多个功能模块间切换。本篇文章将详细探讨如何实现这一功能...
CSS3 3D折叠展开动画菜单
04-16
解压密码：RJ4587 今天我们要继续为大家分享一款CSS3菜单，和上面几款不同的是，这款CSS3菜单有3D的动画效果，当下拉菜单展开和折叠时，将会出现3D的效果，当然这种3D的效果非常简单，我们只需要设置一些简单的CSS3...
图片3D立体折叠效果
07-09
"图片3D立体折叠效果"是一个专注于增强图像展示的动态特效，它结合了弹簧效果、阴影效果，为图片带来更加生动逼真的表现力。这个demo展示了如何利用编程技术实现这种高级视觉交互。 首先，我们来探讨3D立体折叠效果...
侧边栏折叠菜单效果（内容自选）
最新发布
12-20
以下是一个使用Vue.js实现的侧边栏折叠菜单效果的例子： ```html <template> <div> <button @click="toggleSidebar">Toggle Sidebar</button> <div class="sidebar" :class="{ collapsed: isCollapsed }"> <!-- Sidebar content --> </div> <div class="main-content"> <!-- Main content --> </div> </div> </template> <script> export default { data() { return { isCollapsed: false }; }, methods: { toggleSidebar() { this.isCollapsed = !this.isCollapsed; } } }; </script> <style> .sidebar { width: 200px; height: 100vh; background-color: #f0f0f0; transition: width 0.3s; } .sidebar.collapsed { width: 50px; } .main-content { margin-left: 200px; transition: margin-left 0.3s; } .main-content.collapsed { margin-left: 50px; } </style> ``` 在上面的例子中，我们使用了Vue.js来实现侧边栏折叠菜单效果。通过点击按钮，可以切换侧边栏的折叠状态。当侧边栏折叠时，它的宽度会变窄，主内容区域会向右移动，创建了一个动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值