Question

我正在尝试制作此style meny

我正在使用此guide制作html文件 - 只需将其设为一个文件

问题是它不是幻灯片。

Html代码 - 我不知道html代码有错误：

<ul>
        <li class="green" id="dropper">
            <p><a href="#">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow" id="dropper">
            <p><a href="#">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red" id="dropper">
            <p><a href="#">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue" id="dropper">
            <p><a href="#">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple" id="dropper">
            <p><a href="#">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>

Jquery代码 - 问题可以在这里：

    $(document).ready(function(){
        //Remove outline from links
        $("a").click(function(){
            $(this).blur();
        });

        //When mouse rolls over
        $("#dropper").mouseover(function(){
            $(this).stop().animate({height:'300px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

        //When mouse is removed
        $("#dropper").mouseout(function(){
            $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

CSS代码 - 问题可以在这里：

       body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

ul{
    margin:0;
    padding:0;
}

li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

    .subtext{
        padding-top:15px;
    }

/*Menu Color Classes*/
.green{background:#6AA63B url('http://buildinternet.com/live/smoothmenu/images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://buildinternet.com/live/smoothmenu/images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://buildinternet.com/live/smoothmenu/images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://buildinternet.com/live/smoothmenu/images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://buildinternet.com/live/smoothmenu/images/blue-item-bg.jpg') top left no-repeat;}

Answer 1

你必须删除相同的id（id是一个唯一值），就像Kuro所说的那样
但另一个错误是缺少“}）;”输入结束。

这部分代码，你可以删除添加一些CSS（如border：0;）

$("a").click(function(){
    $(this).blur();
});

您正在使用Hosting24并且他们在所有页面中创建脚本...
删除它看看这个问题Webhoster inserts a javascript which brokes my code how to remove it?
希望这能帮助你。

样式菜单没有滑动

1 个答案: