COLOCAR MENU NA HORIZONTAL

KELLY 05/08/2015 22:47:13
#449657
Boa noite gente!

Alguém sabe o porquê que esse menu não fica na horizontal só na vertical?

Código HTML:

<ul id=[Ô]menu[Ô]>
<li>Menu 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li>-</li>
<li>Menu 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li>-</li>
<li>Menu 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>

Código jQuery:
$( [Ô]#menu[Ô] ).menu({position: { my: [Ô]left top[Ô], at: [Ô]right top[Ô] , collision: [Ô]flip [Ô] } });
TUNUSAT 06/08/2015 13:18:56
#449670 Resposta escolhida
KELLY,

Estava tentando te ajudar e achei esta ferramenta bacaninha... não sei você conhece:
=================================
Edit fiddle - JSFiddle
http://jsfiddle.net/2zA6A/27/
=================================

é possível você colar seu código HTML, a CSS e o JavaScript lá e brincar à vontade.

Mas não cheguei a uma conclusão, infelizmente.
Vou deixar alguns links para você fuçar:

=================================
Menu Widget
http://api.jqueryui.com/menu/#option-position
=================================
jQuery Novice To Ninja
http://abraham.cs.uml.edu/~heines/91.462/jQuery/Book-CastledineSharkie-JQueryNoviceToNinja/jquery1-pdf.pdf
=================================
Web Style Sheets - CSS tips & tricks
http://www.w3.org/Style/Examples/007/menus.en.html
=================================

Opa!!!
O cara disse que o menu dele é [Ô]horizontal[Ô]:

=================================
Galera tenho menu com estilo em CSS, onde eu altero ele pra aparecer o menu centralizado?
http://javafree.uol.com.br/topic-893563-Centralizar-Menu-CSS.html

salvar: menu.css 
#menu{  
width:250px;  
}  
#menu ul li{  
display:inline;  
position:relative;  
}  
#menu ul li ul{  
position:absolute;  
}  
#menu ul li ul li{  
display:none;  
}  
#menu ul li:hover ul li{  
display: block;  
}

salvar em html:
<html>  
<head>  
<link rel=[Ô]stylesheet[Ô] href=[Ô]menu.css[Ô] type=[Ô]text/css[Ô] />  
<style type=[Ô]text/css[Ô]>  
*{  
margin:0;  
padding:0;  
}  
</style>  
</head>  
<body>  
<div id=[Ô]menu[Ô]>  
<ul>  
<li>A Empresa</li>  
<li>Produtos  
    <ul>  
        <li>Mesas</li>  
        <li>Cadeiras</li>  
        <li>Diversos</li>  
    </ul>  
</li>  
<li>Pedidos</li>  
<li>Contato</li>  
</ul>  
</div>  
</body>  
</html>

=================================

[][ô]s,
Tunusat.
KERPLUNK 06/08/2015 18:14:28
#449682
é necessário um esclarecimento. $(selector).menu({...}); é um método do JQueryUI e não do JQuery. Ele foi projetado para ser usado como menu(vertical), o que você quer é um menubar, que são coisas diferentes. Existem maneiras de se fazer isso, pode-se adicionar um plugin, pode-se fazer um hack no CSS, como o TUNUSAT mostrou e ainda se pode fazer a menubar manualmente. JQueryUI, apesar de ser simples e eficaz, tem uma certa deficiência de widgets. Como por exemplo Grids e menus. Existem várias alternativas à ele, bem mais completas, também gratuitas, como o JQuery EasyUI, é GPL e possui versão paga(suporte), mas pode ser usado dentro dos termos da licença GPL. Também existem opções que seriam pagas para sites comerciais, como o JQWidgets, que apesar de ser pago, é um preço bem modesto, vista o custo benefício. Outra coisa a ser cogitada é o uso do AngularJS nas suas aplicações. Ele possui uma UI muito completa e em constante evolução, além do benefício avassalador do Angular em suas aplicações.
Só a título de curiosidade, o widget menubar do JQueryUI encontra-se congelado, ou seja, não está sendo desenvolvido no momento.
KELLY 07/08/2015 00:02:38
#449699
Bom dia pessoal,

TUNUSAT, eu gostei do exemplo, mas usar CSS é muito trabalho. Cheguei a pesquisar na internet e encontrei ese menubar como o KERPLUNK citou. Achei que tivesse alternativas mais fáceis para se criar um menubar.
LAMPIAO 07/08/2015 11:01:37
#449704
Olá Kelly, eu sei que tentar fazer na unha, é interessante pois acaba-se aprendendo com os erros.

Mas veja, o que você ta fazendo, é quase que reinventar a roda, nesse link aqui Themeforest você tem n modelos pra todos os gostos, onde você pode comprar ou inspecionar os elementos de um template qualquer pra saber como foi feito.

Os templates são baratinhos e é interessante adquirir um, assim você terá uma base da qual você pode derivar pra qualquer outro projeto web.

E sim, você vai precisar usar CSS se quiser fazer um menu decente.

A pesquisa insessante ajuda muito, muito mesmo.

Abraços
KELLY 08/08/2015 00:36:07
#449736
Obrigada Lampião, vou dar uma olhada neste exemplo.
Tópico encerrado , respostas não são mais permitidas
Voltar