11 replies to this topic

[Josy]

Esse aqui é o menu vertical q abre na horizontal os sub-menus... onde altero ele pra deixar o menu na horizontal e q abra os su-menus na vertical, assim

menu1 menu2 menu3 menu4

submenu submenu submenu submenu
submenu submenu



body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

[Josy]

Achei q pra colocar o menu na horizontal é usado:

ul li {
display: block;
margin: 5px;
float: left;
}



Mas nao sei onde eu substituio no meu código...

[Andreia Regina]

Oi Josy!

No css que trata os submenus, coloca:

display:inline;

[Josy]

Mas eu quero colocar os menus na horizontal e os sub-menus na vertical... tah certo desse jeito q vc falou?

[Andreia Regina]

Desculpe Josy!

Então onde trata do menu vc coloca o que disse anteriormente!

[Josy]

Pois é, mas onde trata no menu no css, pq conheço muito pouco desse código,,, é na parte:

ul li a {
display: inline ;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

troquei onde tinha display:block para inline, mas nao deu certo

Edição feita por: Josy, 13/02/2006, 14:37.

[Josy]

Pra fazer o sub-menu abrir para baixo ja fiz uma alteração, só nao consigo fazer o menu se posicionar lado a lado assim:

menu1 menu2 menu3

Achei em uma pagina o seguinte código ul li {
display: block;
margin: 5px;
float: left;
}
Mas alterei na minha página e o menu fica igual, agora ele está montado assim:

ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
width: 150px; /* MENU */
border-bottom: 1px solid #ccc;
}


ul li {
position: relative;
}

[Andreia Regina]

Oi Josy!

Olha este link

Boa sorte

[Josy]

Tentei fazer parte por parte, pra ver como se monte o menu horizontal, mas nao deu certo...

O meu css tah assim:

body {
font: normal 13px Lucida Sans Unicode;
}

ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
width: 150px; /* MENU */
border-bottom: 1px solid #ccc;
}


ul li {

position: relative;


}

li ul {
left:149px; /* SUB-MENU */
width: 250px;
top: 0;
display: none;

}

/* Styles MENU */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding:5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom:0;

}
ul li a:hover { color: #E2144A; background: #f9f9f9; }

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display:block; } /* The magic */

Desse jeito ele abre os sub-menus para baixo como mostra nesse link, mas os menus nao consigo deixar lado a lado....

Consegue me ajudar

[Josy]

nao nesse aqui nao resolvi ainda.. tah uma confusao esse css pra mim, ja tentei refaze-lo mas o menu na horizontal nao deu certo....


Vou ter q pedir uma maozinha nesse aqui ainda...

Edição feita por: Josy, 22/02/2006, 15:07.

[Josy]

O menu agora está na horizontal corretamente, mas o sub-menu nao abre, alguma coisa pode estar errada no código... vou postar aqui se alguem ver o q é, me da uma dica...


teste.css
____________


body {
font: normal 13px Lucida Sans Unicode;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
border-bottom: 1px #ccc;
}

#navcontainer ul li
{
display: inline;
}
#navcontainer li ul
{
left:149px; /* SUB-MENU */
width: 250px; /* tamanho sub-menu */
top: 0;
display: none;
}
#navcontainer ul li a
{
text-decoration: none; /* sem sublinhado */
color: #777; /* letras cinza */
background: #fff; /* IE6 Bug fundo branco*/
padding:5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom:0;
padding: .2em 1em;
}
#navcontainer ul li a:hover
{
color: #E2144A; background: #f9f9f9;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: center; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#navcontainer li:hover ul, li.over ul { display:block; } /* The magic */

config.css
________________
// JavaScript Document

startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace("over", "");
}
}
}
}
}
window.onload=startList;


menu2.php
_______________________

<script type="text/javascript" src="config.js"></script>
<link rel="stylesheet" type="text/css" href="teste.css" media="screen" />
<div id="navcontainer">
<ul>
<?
$consulta= $conn->Execute("SELECT campo1 from tabela");
$num_consulta = $consulta->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta->fields['rp'];
echo "<li><a href='#'>".$rp."</a>";
$consulta->MoveNext();
$controle++;
echo "<ul>";
$consulta2 = $conn->Execute("SELECT campo2 FROM tabela WHERE campo1 ='$rp'");
$num_consulta2 = $consulta2->RecordCount();
$controle2 = 0;
while ($controle2 < $num_consulta2)
{
$est = $consulta2->fields['estabelecimento'];
echo "<li><a href='pagina.php?ID=$est'>".$est."</a></li>";
$consulta2->MoveNext();
$controle2++;
}
echo "</ul>";
}
echo "</li>";
echo "</div>";
?>
</body>
</html>

[Josy]

Ficou assim:

<div id="navcontainer">
<ul>
<?
$consulta= $conn->Execute("SELECT campo1 from tabela");
$num_consulta = $consulta->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta->fields['rp'];
echo "<li><a href='#'>".$rp."</a>";
$consulta->MoveNext();
$controle++;
echo "<ul>";
$consulta2 = $conn->Execute("SELECT campo2 FROM tabela WHERE campo1 ='$rp'");
$num_consulta2 = $consulta2->RecordCount();
$controle2 = 0;
while ($controle2 < $num_consulta2)
{
$est = $consulta2->fields['estabelecimento'];
echo "<li><a href='pagina.php?ID=$est'>".$est."</a></li>";
$consulta2->MoveNext();
$controle2++;
}
echo "</ul>";
echo "</li>";
}
echo "</ul>";
echo "</div>"; ?>
?>

Tah certo, mas acho q o sub-menu nao abre pq o arq .css q diz q deve abrir sub-menu nao está correto, o q vc acha?

Edição feita por: Josy, 23/02/2006, 14:36.