style menu didn't slide

Question

I'm trying to make this style meny

I'm using this guide to make the html file - just make it in one file

Ihe problem that it isn't slide .

The Html code - I don't this there is error with the html code:

<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 code - the problem can be here:

    $(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 code - the problem can be here:

       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;}

hi everybody , i coppy there source like he is (the css file and the query file is links to there site) and this code works! can u make me code that will work without get scripts from another pages , that include the jquery code and the css and will work? — , Sep 09 '12 at 15:25

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

You have to remove the same id (the id is a unique value), like Kuro said

but another error is there are a missing "});" end of input.

and this part of code, is something that you can remove adding some CSS (like border:0;)

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

You are using Hosting24 and they create a script in all pages...
for remove it look at this question Webhoster inserts a javascript which brokes my code how to remove it?
Hope this help you.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 09 '12 at 14:43

Guilherme

1,980
22
23

"but another error is there are a missing "});" end of input." there is error with what i coppy to here - forgot to coppy this }); should i delete the $("a").click(function(){ $(this).blur(); }); ? – Sep 09 '12 at 14:47
@user1515823 The `blur` part is irrelevant. @Guilherme was just pointing out that you can do it with CSS instead. I suggest that you can keep it for now. – Chris Sep 09 '12 at 14:48
remove the ", easing: 'easeOutBounce'" of your animation – Guilherme Sep 09 '12 at 14:54
@Guilherme Seriously, that really isn't the issue. – Chris Sep 09 '12 at 14:57
I try to save your page and seems to me that you have a script at the bottom that are returning an error, try to remove it - and works http://teste.gschutz.com/checking.htm – Guilherme Sep 09 '12 at 15:11
sorry - i havn't see script in the bottom :( just have jquery script in head – Sep 09 '12 at 15:18
them you are using a hosting that are creating this link "http://stats.hosting24.com/count.php", what browser you are using? try the "Element Inspector" (Chrome and Firefox) its a very powerfull tool – Guilherme Sep 09 '12 at 15:22
hi everybody , i coppy there source like he is (the css file and the query file is links to there site) and this code works! can u make me code that will work without get scripts from another pages , that include the jquery code and the css and will work? erepublikil.site90.net/menu1.html – Sep 09 '12 at 15:37

style menu didn't slide

1 Answers1