Como criar um menu DHTML?

votos
0

Eu preciso criar um menu DHTML com as características especificadas, mas eu não consigo descobrir como fazê-lo. Aqui está o que eu preciso:

Todos os itens são Definiu horizontalmente. Se eles seria maior do que a tela, duas pequenas setas aparecem no lado direito do menu que permitem deslocar-lo. Algo assim:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Os itens do menu deve ser clicável em qualquer lugar do celular. Eles devem esticar tanto verticalmente e horizontalmente para o conteúdo. O texto nos itens deve ser centrada tanto vertical como horizontalmente. O menu deve funcionar no IE7 / Opera / FF / Safari.

A rolagem é a parte fácil - eu apenas colocar tudo em um recipiente (digamos, um <div>), defina o recipiente para overflow: hiddene, em seguida, brincar no Javascript com clientWidth, scrollWidthe scrollLeft. Que eu descobri e já tentou.

Mas como fazer os itens do menu de modo elástico, que pode ser clicado em qualquer lugar e texto centralizado?

Publicado 09/12/2008 em 15:11
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Experimente o CSS abaixo:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

E, em seguida, formatar o seu menu como:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

Isto irá forçar o alinhamento vertical e impedir que as ligações de embrulho. Deixe-nos saber como ele funciona.

Respondeu 09/12/2008 em 15:18
fonte usuário

votos
-2

clicável em qualquer lugar é fácil: você pode ligar o gatilho evento onclick (e esperemos que algum estilo cursor) para o elemento de célula atômica, ou você pode fazer os elementos celulares atômicas <a> etiquetas (ou, mais provavelmente envolvê-los em <li>) e ligação e estilo de forma adequada (estofamento, margem, foo).

por exemplo, o caso 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(Obviamente, eu realmente não recomendo em linha de estilo ou script manipuladores, mas você começa a idéia)

Aplicando preenchimento será centrada efetivamente o texto, e não ter largura atribuído eles vão naturalmente esticar para caber seu conteúdo.

Respondeu 09/12/2008 em 15:21
fonte usuário

votos
1

OK, eu falei com os meus superiores e eles decidiram que poderia ser OK que você pode clicar com o botão direito e não um item de menu e selecione "Abrir em nova janela". Se este requisito é descartado, então eu não sou obrigado a <a>elementos para ligações. Com JavaScript posso transformar qualquer coisa em um link. Assim, eu escolhi você, pikachoo <table> !

Yap, é uma heresia, mas funciona. Mais especificamente, é a única construção que eu posso pensar que pode fazer tudo o seguinte, ao mesmo tempo:

  • texto centro horizontal e verticalmente;
  • Esticar a conteúdos horizontalmente e verticalmente;
  • Não enrole a próxima linha quando os itens estão começando a transbordar.

Qualquer outra coisa que pode fazer o mesmo provavelmente será mais convulted de qualquer maneira. E antes que alguém tem a ideia - não, eu não preciso de suporte ao mecanismo de pesquisa. É uma aplicação web interna. Seria muito ruim se o Google poderia índice que ...

Respondeu 09/12/2008 em 16:12
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more