Question

我正在寻找适合我博客博客的菜单，幸运的是我找到了一个。但问题是我不知道如何将代码添加到HTML。我没有注意到代码，虽然我将html添加为HTML / JAVASCRIPT下的小工具和上面的CSS]]＆gt;标签前的插件代码。代码如下.. 我看过的网站是http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

HTML

<div id="dl-menu" class="dl-menuwrapper">
    <button class="dl-trigger">Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="#">Item 1</a>
            <ul class="dl-submenu">
                <li><a href="#">Sub-Item 1</a></li>
                <li><a href="#">Sub-Item 2</a></li>
                <li><a href="#">Sub-Item 3</a></li>
                <li>
                    <a href="#">Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li><a href="#">Sub-Sub-Item 1</a></li>
                        <li><a href="#">Sub-Sub-Item 2</a></li>
                        <li><a href="#">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

CSS

.dl-menu.dl-animate-out-1 {
animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
50% {
    transform: translateZ(-250px) rotateY(30deg);
}
75% {
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
}
100% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
}
}

.dl-menu.dl-animate-in-1 {
animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
0% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
}
20% {
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
}
100% {
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
}
}

一个插件

$( '#dl-menu' ).dlmenu({
    animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
});

Answer 1

您已将HTML和CSS放在正确的位置。现在插件代码是一个jQuery代码，所以你要确保你的博客中有jQuery，然后在</head>之上添加你的插件代码

<script>
$(document).ready(function(){
$( '#dl-menu' ).dlmenu({
    animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
});
});
</script>

Answer 2

为了更好地指定您的Mohammad Hamza的答案，需要将这些文件放在<head> </head>标记中。在任何.js文件之前，CSS应该先排序。

根据插件的外观，您需要的css文件是component.css。 default.css文件有一条评论说它只是开发人员的演示样式，所以忽略该文件。此外，您的示例中的CSS，您不需要放在任何地方。特定的动画CSS也包含在component.css

中

然后，包括fonts文件夹。其中包括使用网络应用Icomoon制作的图标字体。最后，您需要js文件夹中的文件。

所以在你的<head>里面应该是这样的：

<link rel="stylesheet" type="text/css" href="css/component.css">
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.dlmenu.js"></script>

希望这会有所帮助，并澄清。

如何将此菜单插入我的Blogger博客

2 个答案: