ERRO NA CRIA?ÃO DE MENU VERTICAL

KELLY 23/02/2015 13:52:47
#444702
Boa tarde pessoal,

Estou tentando criar menus na vertical utilizando jQuery, mas ele não está funcionando. Já tentei de tudo, até mudar de navegador para ver se há alguma incompatibilidade, mas nada.

Alguém poderia me dar uma força?

Segue o código anexado ao tópico.
KERPLUNK 23/02/2015 16:05:41
#444709 Resposta escolhida
Sem mistério. Veja esse fiddler
KELLY 25/02/2015 13:28:05
#444780
Boa tarde KERPLUNK, gostei do exemplo. Como faço para baixar esse código completo com os scripts? Não conhecia esse tipo de repositório de código.

Grata!
KERPLUNK 25/02/2015 18:20:08
#444788
1 - Não é um repositório de código. é um interpretador. No canto direito superior, o código HTML, no esquerdo superior, o CSS, no canto esquerdo inferior, o javascripe e no direito inferior, o resultado de tudo junto.
2 - Observe também, na parte esquerda, onde diz [Ô]framework & extensions[Ô]. Veja que está sendo usada a versão 1.9.1 do jquery, para esse exemplo específico.

Páginas web, são simplesmente isso, uma junção de HTML, CSS e Javascript. Ou seja, crie um arquivo simples de texto e cole os códigos que estão em cada uma das seções do fiddler(exceto o resultado final, no canto direito inferior), salve com extensão HTML e adicione a referência ao Jquery e pronto, o html pode ser aberto em qualquer browser com o mesmo resultado que está vendo no fiddler


O código completo para este exemplo ficaria assim:

<html>

<head>
<style>
/*custom font for text*/
 @import url(http://fonts.googleapis.com/css?family=Nunito);

/*Basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#vertical-menu {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    margin-right: 10px;
}
/*list items*/
 #vertical-menu li {
    list-style-type: none;
}
/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}
</style>

<script src=[Ô]http://code.jquery.com/jquery-1.11.2.min.js[Ô]></script>



</head>
<body>


<div id=[Ô]vertical-menu[Ô]>
    <ul>
        <li class=[Ô]active[Ô]>
            	<h3><span class=[Ô]plus[Ô]>+</span>Dashboard</h3>

            <ul>
                <li><a href=[Ô]#[Ô]>Reports</a>
                </li>
                <li><a href=[Ô]#[Ô]>Search</a>
                </li>
                <li><a href=[Ô]#[Ô]>Graphs</a>
                </li>
                <li><a href=[Ô]#[Ô]>Settings</a>
                </li>
            </ul>
        </li>
        <!-- we will keep this LI open by default -->
        <li>
            	<h3><span class=[Ô]plus[Ô]>+</span>Tasks</h3>

            <ul>
                <li><a href=[Ô]#[Ô]>Today[ô]s tasks</a>
                </li>
                <li><a href=[Ô]#[Ô]>Urgent</a>
                </li>
                <li><a href=[Ô]#[Ô]>Overdues</a>
                </li>
                <li><a href=[Ô]#[Ô]>Recurring</a>
                </li>
                <li><a href=[Ô]#[Ô]>Settings</a>
                </li>
            </ul>
        </li>
        <li>
            	<h3><span class=[Ô]plus[Ô]>+</span>Favorites</h3>

            <ul>
                <li><a href=[Ô]#[Ô]>Global favs</a>
                </li>
                <li><a href=[Ô]#[Ô]>My favs</a>
                </li>
                <li><a href=[Ô]#[Ô]>Team favs</a>
                </li>
                <li><a href=[Ô]#[Ô]>Settings</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
$(window).load(function(){
$([Ô]#vertical-menu h3[Ô]).click(function () {
    //slide up all the link lists
    $([Ô]#vertical-menu ul ul[Ô]).slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is([Ô]:visible[Ô])) {
        $(this).next().slideDown();
        $(this).remove([Ô]span[Ô]).append([ô]<span class=[Ô]minus[Ô]>-</span>[ô]);
    }
})
});
</script>

</body>
</html>
KELLY 28/02/2015 00:16:20
#444845
KERPLUNK obrigada pela ajuda!
Tópico encerrado , respostas não são mais permitidas
Voltar