Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucastakahashi

[Resolvido] Menu com o dropdown dividido em duas colunas

Por , em Desenvolvimento frontend

Recommended Posts

lucastakahashi    0

lucastakahashi
Postado

Bom galera, estou a uma semana tentando montar um menu, mas não consigo.

 

Eu uso o Joomla, e desenvolvi uma posição horizonta para um menu, e configurei tudo bonitinho, o css e a estrutura do menu.

 

E sempre que eu posiciono o mouse em uma das categorias, o dropdown dele é uma coluna com varios links. Mas o problema é que, em um deles tem mais de 10 itens, e o dropdown dele fica extremamente cumprido, eu pensei em dividir em duas colunas esse dropdown, assim como é feito no site Terra.com.br e até mesmo naquele hostmidia.com.br que recebi via e-mail marketing daqui do imasters.

 

Exemplo:

Atualmente esta assim:

+Menu1 +Menu2 +Menu3 ...

-Iten 11 -Iten 21 -Iten 31

-Iten 12 -Iten 22 -Iten 32

-Iten 13

-Iten 14

-Iten 15

-Iten 16

-Iten 17

-Iten 18

-Iten 19

-Iten 20

-Iten 21

-Iten 22

-Iten 23

 

Gostaria que ficasse:

+Menu1 +Menu2 +Menu3 ...

-Iten 11 -Iten 18 -Iten 21 -Iten 31

-Iten 12 -Iten 19 -Iten 22 -Iten 32

-Iten 13 -Iten 20

-Iten 14 -Iten 21

-Iten 15 -Iten 22

-Iten 16 -Iten 23

-Iten 17

 

 

Tentei usar duas div para dividir ele, mas daí o menu desaparece, com o arcaico table o menu aparece em apenas uma das td...

 

Alguém sabe alguma forma deu dividir, sem comprometer o sistema que o joomla tem para chamar menu pela base de dados?

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucastakahashi    0

lucastakahashi
Postado

Só dividir em dois ul.

 

Como você tentou fazer? Mostra o código.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Esta assim:

 

Codigo que foi inserido dentro do .CSS da Template

 

/*****************************************************/

/* main navigation */
#navigation {
margin: 0;
padding: 0;
list-style: none;
clear: left;
position: relative;
left: 10px;
top: 0px;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 100%;
font-weight: bold;
}
#navigation li {
float: left;
position: relative;
background-color: #000000;
background-position: 0 100%;
}
#navigation a {
float: left;
color: #FFF;
text-decoration: none;
line-height: 26px;
vertical-align: middle;
height: 26px;
padding-right: 15px;
padding-left: 15px;
}
#navigation li ul {
display: none;
}
#navigation li:hover ul,
#navigation li.hover ul {
display: block;
}
#navigation li:hover,
#navigation li.hover {
background-color: #FFCC00;
}
#navigation li:hover a,
#navigation li.hover a {
color: #000000;
}
#navigation ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 99;
list-style: none;
width: 115px;
}
#navigation ul li {
float: left;
width: 100%;
background-color: #000000;
}
#navigation ul li:hover,
#navigation ul li.hover {
background-color: #FFCC00;
color: #000000;
}
#navigation ul li a {
width: 107px;
color: #FFF !important;
}
#navigation ul li a:hover {
color: #000000 !important;
}
#navigation ul li ul {
display: none !important;
position: absolute;
top: 0;
left: 115px;
}
#navigation li ul li:hover ul,
#navigation li ul li.hover ul {
display: block !important;
}

/*****************************************************/

CODIGO DEVOLDIDO EM HTML

 

<ul class="art-menu" id="navigation"><li class="parent item17"><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Menu1</span></a><ul><li class="item21"><a href="#">Item11</a></li><li class="item22"><a href="#">Item12</a></li><li class="item23"><a href="#">Item13</a></li><li class="item24"><a href="#">Item14</a></li><li class="item25"><a href="#">Item16</a></li></ul></li><li class="parent item18"><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Menu2</span></a><ul><li class="parent item26"><a href="#">Item21</a><ul><li class="item27"><a href="#">Item211</a></li></ul></li><li class="parent item28"><a href="#">Item22</a><ul><li class="item29"><a>Item221</a></li></ul></li></ul></li><li class="item19"><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Menu3</span></a></li><li class="parent item20"><a href="#"><span class="l"> </span><span class="r"> </span><span class="t">Menu4</span></a><ul><li class="parent item30"><a href="#" onclick="return false;" /><ul><li class="item32"><a href="#">Item411</a></li></ul></li><li class="parent item31"><a href="#" onclick="return false;" /><ul><li class="item33"><a href="#">Item421</a></li></ul></li></ul></li></ul></div>

Eu tentei, trocando os sub-menus que tem dentro do <UL><LI> principal, por

<table><tr><td><li>texto
<ul><li>.....</li></ul>
</li></td><td><li>texto
<ul><li>.....</li></ul>
</li></td></tr></table>
Mas dai o Joomla não conseguiu enviar o menu, dai eu criei uma posição dentro do table <jdoc:.....> dai ele apareceu em uma coluna mas tudo apertado.

 

O que eu estou tentando fazer, ou achar é algo que de para mudar em .js ou no .css para que os submenus que estão em listas, se dividam em dois espaços... Igual esta em varios sites como os citados no primeiro post.

A maioria dos sites que mostram como fazer esses menus em css, sempre mostra com a mesma estrutura

 

+Categoria______+Categoria2

--Subcategoria__--Link

---link_________--Link

 

Mas até agoa não achei

 

+Categoria_____+Categoria2

--subcategoria_-Link__-Link

---LINK

 

Caso não consiga entender eu monto umas imagens demonstrando.

 

Como seria usar duas <ul>

<ul><li>Menu1
<ul>(...)</ul><ul>(...)</ul></li><li>Menu2(...)

Se for isso, como eu faria para o Joomla responder a esse formato, sendo que eu uso o componente original dele de criar menus?

 

Fico agradecido!

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucastakahashi    0

lucastakahashi
Postado

Você não consegue dividir essa unica lista em duas?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

RESOLVIDO!!!

 

Tentei dividir, mas o Joomla respondeu de forma inesperada, dai tentando mecher no css consegui fazer uma descoberta, vou compartilhar com vocês.

 

Tendo em nota o layout em css apresentado a cima,

descobri que se você forçar um tamanho a ele, ele divide

as tag <li> em x colunas.

 

Veja o codigo:

 

/* As linhas abaixo representa o ul que descera na dropdown, quando
o mouse esta sobre o link do menu*/
#navigation ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 99;
list-style: none;
background-color:#000000;
}

/* Aqui ele representa os link daquele ul que desceu sobre o efeito
do mouse hover do dropdown*/
#navigation ul li {
float: left;
background-color: #000000;
}

 

Como dividir em colunas.

É facil, você entrega um valor width para os link que estão dentro da

ul dropdown, e depois você insere um width na ul do dropdown

com a multiplicação do valor de colunas que pretende dividir

com o width dos link.

 

Exemplo: Quero duas colunas

[x * 2 = 2x]

 

Tamanho width do link: 100px.

Numero de colunas: 2.

Tamanho para o ul que tem os link: 200px.

 

Analise o codigo:

 

/* As linhas abaixo representa o ul que descera na dropdown, quando
o mouse esta sobre o link do menu*/
#navigation ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 99;
list-style: none;
width: 200px;
background-color:#000000;
}

/* Aqui ele representa os link daquele ul que desceu sobre o efeito
do mouse hover do dropdown*/
#navigation ul li {
float: left;
width: 100px;
background-color: #000000;
height: 15px;
}

Agora quero com tres colunas:

[x * y = xy]

 

x: Tamanho width do link: 100px.

y: Numero de colunas: 3.

xy: Tamanho para o ul que tem os link: 300px.

 

/* As linhas abaixo representa o ul que descera na dropdown, quando
o mouse esta sobre o link do menu*/
#navigation ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 99;
list-style: none;
width: 300px;
background-color:#000000;
}

/* Aqui ele representa os link daquele ul que desceu sobre o efeito
do mouse hover do dropdown*/
#navigation ul li {
float: left;
width: 100px;
background-color: #000000;
height: 15px;
}

Se alguem quiser alterar a ordem, ao invez de

Exemplo A

1 - 2

3 - 4

 

para

Exemplo B

1 - 3

2 - 4

 

Eu não sei como faz no css, mas sei que é apenas alterar a ordem

dos li dentro do ul.

Assim:

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

Aparecera como o exemplo A e

<li>1</li>

<li>3</li>

<li>2</li>

<li>4</li>

Aparecera como o exemplo B.

 

Veja o codigo em html, para ter uma analise melhor

(embuti o css, para o exemplo):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* main navigation */
#navigation {
margin: 0;
padding: 0;
list-style: none;
clear: left;
position: relative;
left: 10px;
top: 0px;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 100%;
font-weight: bold;
}
#navigation li {
float: left;
position: relative;
background-color: #000000;
background-position: 0 100%;
}
#navigation a {
float: left;
color: #FFF;
text-decoration: none;
line-height: 26px;
vertical-align: middle;
height: 26px;
padding-right: 15px;
padding-left: 15px;
}
#navigation li ul {
display: none;
}
#navigation li:hover ul,
#navigation li.hover ul {
display: block;
}
#navigation li:hover,
#navigation li.hover {
background-color: #FFCC00;
}
#navigation li:hover a,
#navigation li.hover a {
color: #000000;
}
#navigation ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 99;
list-style: none;
width: 200px;
background-color:#000000;
}
#navigation ul li {
float: left;
width: 100px;
background-color: #000000;
height: 15px;
}
#navigation ul li:hover,
#navigation ul li.hover {
background-color: #FFCC00;
color: #000000;
}
#navigation ul li a {
width: 107px;
color: #FFF !important;
}
#navigation ul li a:hover {
color: #000000 !important;
}
#navigation ul li ul {
display: none !important;
position: absolute;
top: 0;
left: 115px;
}
#navigation li ul li:hover ul,
#navigation li ul li.hover ul {
display: block !important;
}
</style>
</head>

<body>
<div style="width:1000px;">
<ul id="navigation">
	<li>menu</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4
    	<ul>
        <li>item</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        </ul>
    </li>
    <li>menu5</li>
    <li>menu6</li>
    <li>menu7</li>
    <li>menu8
    	<ul>
        <li>item</li>
        <li>item9</li>
        <li>item2</li>
        <li>item10</li>
        <li>item3</li>
        <li>item11</li>
        <li>item4</li>
        <li>item12</li>
        <li>item5</li>
        <li>item13</li>
        <li>item6</li>
        <li>item14</li>
        <li>item7</li>
        <li>item15</li>
        <li>item8</li>
        <li>item16</li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

Bem simples.

Agradeço pela ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito